使用CSS3完成阴阳师宣传页

最近跟着老师做了阴阳师宣传页面，使用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）用百分比设置长宽时，参照的是其父级元素。

写博只是为了自己不断学习，不喜勿喷，提建议欣然接收~