最近跟着老师做了阴阳师宣传页面，使用css3完成了一个简单的动画效果，效果如下：
当鼠标滑过开始游戏图标时，图标的大小以及透明度均会发生相应的变化，不涉及js的使用，只是单纯的css实现，代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阴阳师手游</title> <style> html{ height: 100%; } body{ height: 100%; margin: 0; background: url(images/1.png) center/cover; overflow: hidden; } .btn{ width: 206px; height: 206px; background-image: url(images/2.png); margin: 100px auto; background-positiion: 206px -151px; } .btn:before{ display: block; content: ''; width: 206px; height: 206px; margin: 100px auto; background-position: 206px -151px; } .btn:hover:before{ animation: dragon 0.7s infinite; } @keyframes dragon{ from{ transform: scale(1); opacity: 1; } to{ transform: scale(1.4); opacity: 0; } } </style> </head> <body> <div class="btn"></div> </body> </html>
关于这个小demo的总结如下：
（1）：before为伪类元素，它的作用是在指定的元素内容（不是元素本身）之前插入一个包含content属性指定内容的行内元素，其中content属性是必须的，可以理解为激活伪元素；
（2）在设置背景颜色时，cover表示将背景图片铺满整个屏幕，不留空白区域，且保持纵横比；center实现图片居中；overflow:hidden消灭滚动条；
（3）用百分比设置长宽时，参照的是其父级元素。
写博只是为了自己不断学习，不喜勿喷，提建议欣然接收~
