今天没事写了这篇文章，对于css样式初学者来说，制作点击关闭按钮不容易实现，下面我就制作了一个点击按钮，供大家参考制作。
首先使用的技术有
css3 transition，transform，before，after等；
下面就直接用代码表示了：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .demo{ width: 500px; height: 300px; background: grey; } .close:hover{ transform:rotate(179deg); } .close{ float: right; transition: all 0.5s; position: relative; display: inline-block; width: 50px; height: 50px; overflow: hidden; line-height: 50px; border: 1px solid blue; border-radius: 50%; cursor: pointer; } .close:after,.close:before{ background: #1ebcc5; content: ''; position: absolute; height: 2px; width: 100%; top: 48%; /* top = 0.5*(1-h/H)% 表示叉的top离定点的距离 */ left: 0; } .close:after{ transform:rotate(45deg); } .close:before{ transform:rotate(-45deg); } </style> </head> <body> <div class="demo"> <div class="btn-set"> 欢迎来到sky8g网站 <span class="close"></span> </div> </div> </body> </html> |
显示如下图：
