css3 伪类伪元素使用技巧

时间 2020-09-11 标签 css3 css 3 伪类伪元素使用技巧

1.以前学习过css3的伪元素::before和::after，能够作不少事情。一个是能够作一些css3图标，功能异常强大；另外是能够配合:hover作一些按钮效果（参考https://tympanus.net/Development/CreativeLinkEffects/#cl-effect-21）。
2.对于伪类须要注意经常使用伪类的使用顺序，参见以前的文章，关于伪类与伪元素的配合使用：css

<style type="text/css"> div::after,div::before{ opacity: 0; -webkit-transition:opacity 0.3s; transition:opacity 0.3s; } div::before{ margin-right: 10px; content: '['; } div::after{ margin-left: 10px; content: ']'; } div:hover::after,div:hover::before{ opacity: 1; } </style>
</head>
<body>
<div>cool</div>
</body>

效果是hover div 会出现先后括号；
3.css图标制做：css3

<div id="wraper">
    <div id="power"></div>
    <div id="play"></div>
    <div id="unknow"></div>
    <div id="arrow-right"></div>
<style type="text/css"> *{ margin: 0;padding: 0; } p{ font-size: 150px; font-family: Arial; text-align: center; } #wraper{padding:10px;width:380px;height:380px;border:3px solid #ccc;margin:auto;} #power{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position: relative;display: inline-block;} #power:before{width:7px;height:22px;background:#EEB422;position: absolute;left:8px;top:-13px;content: "";border: 3px solid #fff;} #play{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position:relative;display: inline-block;background: #EEB422;} #play:before{border:11px solid transparent;border-left:17px solid #fff;content: "";position: absolute;left:9px;top: 3px;} #unknow{ width: 30px;height:30px;margin: 20px; border: 6px solid #EEB422; border-radius:50%; display: inline-block;position: relative; background-color:#EEB422; } #unknow:before{ border:11px solid transparent ;border-right: 13px solid #fff; content: ""; position: absolute; left:-5px; top: 4px;} #up{ width: 30px;height: 30px; margin: 20px; position: fixed; right: 20px; bottom: 20px; border: 5px solid #4F4F4F;border-radius: 7px;background-color:#4F4F4F; } #up:before{ border:12px solid transparent ;border-bottom: 9px solid #CDC1C5; content: ""; position: fixed; right: 48px; bottom: 57px;} #up:hover{background-color:#1C1C1C; border-color: #1C1C1C; } #up:after{border:12px solid transparent ;border-bottom: 9px solid #CDC1C5; content: ""; position: fixed; right: 48px; bottom: 61px;} #arrow-right{width: 30px;height:30px;margin: 20px; border: 6px solid #EEB422; border-radius:8px; display: inline-block;position: relative; background-color:#EEB422; } #arrow-right:before{content: "";border:10px solid transparent;border-left:13px solid #EEB422;position: absolute;left:36px;top:5px;} </style>

最后效果：
web