在网页开发中，为了有更好地用户体验，我们常常会对一些交互元素添加动画效果来达到这个目的，我们知道css3有过渡动画和关键帧动画可以实现一些简单的动画效果，例如元素位置改变就可以通过提前定义好的动画使我们可以完整的看到整个元素移动的过程。好了，话不多说，直接上干货。
在开发中，按钮button想必大家都十分常用吧，但是你有没有想过怎么去做一个炫酷的按钮呢？某天，在写css时，突发奇想，玩出来了个’幽灵’按钮，哈哈，名字不重要，我们先看看按钮效果。

接下来，直接上代码：
（温馨提示：左右/上下滑动可查看全部代码）

<html>
<head>
 <title></title>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <style type="text/css">
       body {
           background: #000;
       }
       .btn-st{
               font-size:20px;
               width:40px;
               height:40px;
               color:#fff;
               border:0;
               outline: 0;
               position: fixed;
               left: 50%;
               background:rgba(0,0,0,0.3);
               top:70px; ;z-index: 110;
               transition-property: left,background;
               transition-duration: 1s;
               transition-timing-function: ease-in-out;
       }
       .line{
               display:block;
               box-sizing: border-box;
               position:absolute;
               background:#fff;
               transition: all .2s ease-out
         }
       .line-top,.line-bottom{width: 0px;height:1px;}
       .line-left,.line-right{width: 1px;height:0px;}
       button:hover{box-shadow: 0 0 20px yellow;}

       .line-top{top:-1px;left:-50px;}
       button:hover>.line-top{width:41px;left:-1px;}

       .line-left{top:80px;left:-1px}
       button:hover>.line-left{height:41px;top:-1px;}

       .line-right{right:-1px; bottom:80px;}
       button:hover>.line-right{height:42px; bottom:-1px;}

       .line-bottom{bottom:-1px;right:-50px;}
       button:hover>.line-bottom{width:42px;right:-1px;}
   </style>

</head>
<body>
 <button type="button" id="btn" class="btn-st">
       <span class="glyphicon glyphicon-menu-hamburger"></span>
       <span class="line line-top"></span>
       <span class="line line-right"></span>
       <span class="line line-bottom"></span>
       <span class="line line-left"></span>
   </button>
</body>
</html>

很简单吧，其实就是通过对4个元素的定位偏移量做一个过渡动画，就可以实现了，有没有很炫呢？

好了，先上个小菜，接下来我们玩个大的，结合js，来做一个特别酷炫的轮播切图，老规矩，上效果：

本转载自 Think体验设计公众号。

原文链接：https://mp.weixin.qq.com/s/U9sFGG6ZWzh9E4kKUm41ZA

创作场景

原来 css 也能这么炫酷（一）