在网页开发中，为了有更好地用户体验，我们常常会对一些交互元素添加动画效果来达到这个目的，我们知道 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
更多内容推荐
不愧是阿里内部 Spring Boot 笔记，从头到尾全是干货
Spring Boot 具有 Spring 一切优秀特性，Spring 能做的事，Spring Boot 都可以做，而且使用更加简单，功能更加丰富，性能更加稳定而健壮。随着近些年来微服务技术的流行，Spring Boot 也成了时下炙手可热的技术。
2022-11-04
Moment.js 如何对时间进行比较获得不同的天数
对 2 个 Moment 的时间进行比较，并且获得不同天数的代码如下：
2022-09-11
5、基于 Sentinel 实现流量控制 03
2023-09-27
“程”风破浪的开发者｜总结巧用 CSS 实现各种效果的「百计千谋」
在过往的半年中，我实现了90+的CSS效果。即有像3D环绕这样简单的动画效果，也有像网页小游戏这样复杂的功能。总结我是实现思路以及其中的知识点。
2022-10-26
Vue.$nextTick 的原理是什么 -vue 面试进阶
原理性的东西就会文字较多，请耐下心来，细细品味
2023-03-01
【牛客刷题 - 算法】NC7 买卖股票的最好时机 (一)
描述假设你有一个数组prices，长度为n，其中prices[i]是股票在第i天的价格，请根据这个价格数组，返回买卖股票能获得的最大收益 你可以买入一次股票和卖出一次股票，并非每天都可以买入或卖出一次，总共只能买入和卖出一次，且买入必须在卖出的前面的某一天
2022-10-03
Vue.$nextTick 的原理是什么 -vue 面试进阶
原理性的东西就会文字较多，请耐下心来，细细品味
2022-10-13
深入 react 源码看 setState 究竟做了什么？
在深究 React 的 setState 原理的时候，我们先要考虑一个问题：setState 是异步的吗？首先以 class component 为例，请看下述代码（demo-0）
2023-03-15
BottomSheetDialog 使用详解，设置圆角、固定高度、默认全屏等
MD风格的底部弹窗，比自定义dialog或popupwindow使用更简单，功能也更强大。
2022-06-11
好诗相伴 05｜见自己：我在诗中渡自己
在诗词中“见自己”，就是看看诗词给了我们什么。
2021-09-15
Qt | 控件之 QComboBox
QComboBox组件的使用。
2022-07-17
实战分享，电路板设计后这样干，一个人也能轻松搞定项目！
作为一个专职硬件测试人员，对于产品流程设计上layout设计完成到打板或者加工完成这段这几个环节一直很好奇。记录一个简单项目的这个流程，我自己也理一理思路，也希望能帮到其他朋友。
2023-02-14
VUE 前端文本输出为超文本
VUE 的前端文本输出为超文本。
2022-12-23
好诗相伴 04｜见众生：众生皆苦亦哲学
见众生就是读诗词里的人性。
2021-09-15
【12.23-12.30】写作社区优秀技术博文回顾
一周的末尾，写作社区又如约而至！开发这个栏目的目的是让更多的优秀作者与作品发光发热。事不宜迟，就让我们看看这周写作社区又有哪些优秀作品和作者涌现了吧~
2022-12-30
将 Sentinel 熔断限流规则持久化到 Nacos 配置中心
在实际操作的过程中你会发现，每次项目重启后，配置的限流规则都没有了！
2023-02-28
10 分钟带你彻底搞懂资源库架构模式
2022-02-18
课程例题预习
2023-09-25
好诗相伴 03｜见万物：世间万物在诗中
诗词里的“万物”就是诗词里的意象。
2021-09-15
推荐阅读
02｜实战：如何使用 Jupyter Notebook？
2023-11-13
07. 从草台班子到星河舰队，想象一条河流
2023-10-17
如何设计一个最简化的推荐系统
2023-07-03
33. 预算编制的具体规定和常用方法的对比
2023-10-17
HarmonyOS 实战项目
2023-11-17
国家高新技术企业是国企吗? 获得高新企业证书有什么用？
2023-03-17
模具制造业云 MES 系统难点及其解决方案
2023-11-01
电子书
大厂实战PPT下载
换一换 
谢凯 | 字节跳动 基础架构研发工程师
甘启 | Soul App 交互技术负责人
黄金金（青夜） | 高德地图 信息业务中心前端架构师
评论