原来css也能这么炫酷（一）_语言 & 开发_Think体验设计



 写点什么

在网页开发中，为了有更好地用户体验，我们常常会对一些交互元素添加动画效果来达到这个目的，我们知道 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 也能这么炫酷（一）

评论

更多内容推荐

推荐阅读

电子书

大厂实战PPT下载