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

最新推荐文章于 2023-12-07 16:16:53 发布

weixin_33827731

最新推荐文章于 2023-12-07 16:16:53 发布

阅读量1.0k

点赞数

原文链接：http://www.cnblogs.com/zjf-1992/p/6073956.html

版权

一、实现如下效果

二、代码实现思路

图案一源码　

 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

图案二源码

 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

weixin_33827731

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用伪类:before&&:after实现图标库图标

一、实现如下效果二、代码实现思路图案一源码　 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>伪类绘图</title> 6 &lt...
复制链接

扫一扫