使用CSS3完成阴阳师宣传页

最新推荐文章于 2024-04-28 20:15:09 发布

weixin_34199405

最新推荐文章于 2024-04-28 20:15:09 发布

阅读量431

点赞数

原文链接：http://www.cnblogs.com/lilacmemo/p/8515430.html

版权

最近跟着老师做了阴阳师宣传页面，使用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>