利用伪类:before&&:after实现图标库图标

一、实现如下效果

 利用伪类:before&&:after实现图标库图标_第1张图片

二、代码实现思路

图案一源码 

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>伪类绘图title>
 6         <style>
 7             .button {
 8                 display: inline-block;
 9                 position: relative;
10                 font-size: 30px;
11                 width: 90px;
12                 height: 90px;
13                 background-color: #00aabb;
14                 cursor: pointer;
15             }
16             .button:after, .button:before {
17                 content: "";
18                 position: absolute;
19                 left: 50%;
20                 top: 50%;
21                 transform: translate(-50%, -50%);
22                 box-shadow: 0 0 0 .5px rgba(177,177,177,.8);
23                 /*box-shadow: inset 0 0 0 1em;内阴影*/ 
24                 background: #FFF;
25             }
26             .button:before {
27                 height: 1.5em;
28                 width: 2px;
29             }
30             .button:after {
31                 width: 1.5em;
32                 height: 2px;
33             }
34         style>
35     head>
36     <body>
37         <div class="button">div>
38     body>
39 html>
View Code

图案二源码

利用伪类:before&&:after实现图标库图标_第2张图片

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>icon-img图标进阶玩法title>
 6         <style>
 7             .icon-img {
 8                 display: inline-block;
 9                 position: relative;
10                 height: 80px;
11                 width: 100px;
12                 border: solid 5px #00aabb;
13                 border-radius: 5px;
14                 font-size: 10px;
15                 overflow: hidden;
16             }
17             .icon-img:before {
18                 content: "";
19                 position: absolute;
20                 top: 18px;
21                 right: 20px;
22                 width: 15px;
23                 height: 15px;
24                 box-shadow: inset 0 0 0 15px #00AABB; 
25                 border-radius: 50%;
26             }
27             .icon-img:after {
28                 content: "";
29                 position: absolute;
30                 left: 0;
31                 bottom: -30px;
32                 width: 80px;
33                 height: 50px;
34                 background-color: #00AABB;
35                 
36                 box-shadow: inset 0 0 0 50px #00AABB, 30px -20px 0 0 #00AABB;
37                 transform: rotate(45deg);            }
38         style>
39     head>
40     <body>
41         <div class="icon-img">div>
42     body>
43 html>
View Code

 

转载于:https://www.cnblogs.com/zjf-1992/p/6073956.html

你可能感兴趣的:(利用伪类:before&&:after实现图标库图标)