css3 僞類僞元素使用技巧

原創

2020-02-22 06:01

1.之前學習過css3的僞元素::before和::after，可以做很多事情。一個是可以做一些css3圖標，功能異常強大；另外是可以配合:hover做一些按鈕效果（參考https://tympanus.net/Development/CreativeLinkEffects/#cl-effect-21）。
2.對於僞類需要注意常用僞類的使用順序，參見之前的文章，關於僞類與僞元素的配合使用：

<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圖標製作：

<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>