在网页开发中，为了有更好地用户体验，我们常常会对一些交互元素添加动画效果来达到这个目的，我们知道 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中定位相关的知识点。
2022-10-15
上干货 | 园区智慧物联管理解决方案
通过一套物联网平台实现整个园区的一体化智能化管理
2022-10-19
6.3 版式设计六大原则（一）对齐之一键速成
2023-10-17
Moment.js 如何对时间进行比较获得不同的天数
对 2 个 Moment 的时间进行比较，并且获得不同天数的代码如下：
2022-09-11
自主创新、领先一代，星环科技成功登陆科创板
10月18日，“国产大数据基础软件”星环信息科技（上海）股份有限公司（简称“星环科技”，证券代码“688031”）在科创板上市，宣告正式开启新征程。
2022-10-21
09｜用好两种模版，做好会议纪要
2023-07-28
leetcode 121 Best Time to Buy and Sell Stock 买卖股票的最佳时机 (简单)
遍历一次数组，在每个位置i时，记录i位置之前所有价格中的最低价格，然后将当前价格作为售出价格，查看当前收益是不是最大收益即可。
2022-07-03
16｜实现路径：B 端产品与设计师需要会写代码吗？
每一个B端设计师都希望有无限的创意，但我们的创意都需要基于研发可以实现的前提，才能登上面对客户的舞台。只有你理解、找到了创新的体验内容的实现路径之后，自己的创意才能得到完美的落地呈现。
2023-06-12
js 进阶手写常见函数
无论是学习react还是vue，它们都是js的应用框架。剥去他们的壳子看到的始终是js，所以作为一个前端大厨必须要熟练掌握好js这个大勺，才能烧出一顿好菜
2022-10-03
15｜直播中心搭建（一）：如何通过 Video.js 配置直播中心？
从这节课起，我们一起来学习实践直播中心的搭建与配置。
2023-05-26
leetcode122. Best Time to Buy and Sell Stock II 买卖股票的最佳时机 II(简单)
每天可以无限次买卖，但是只能持有一支股票。想有最大利润，就得低价买高价卖。如果第二天价格比当前价格高，我们就卖出，把差价加入利润中。若后天价格更高，我们还可以在第二天卖出后再买入。以此类推，遍历完整个数组后即可获得最大利润。
2022-07-29
Dva.js 新手入门指南
Dva.js 入门指南
2022-08-03
做了七年前端开发，我最近才意识到可访问性的必要......
作为一名7年多的前端开发者，我从未想过我的工作需要具有可访问性，直到最近才领悟。
17｜3D 效果：别人的数字大屏很酷炫，你的产品为什么实现不了？
如果你看到别人做的大屏特别好，自己想做却又做不出来，那么可以基于你对软件的了解对症下药。
2023-06-14
14｜ECharts 实战：可视化如何更好地服务于创作者？
这节课，我们将会学习应用一款轻量级数据可视化组件库——ECharts。
2023-05-24
集世界杯 +GameFi 元素的 MetaElfLand，推出世界杯专场活动
又到了四年一度的球迷狂欢节，本次卡塔尔世界杯已于11月21号举行。
2022-11-24
一文讲透研发效能！您关心的问题都在
阅读本文你将收获： 1、什么是研发效能？定义是什么？研发效能真的能提高吗 2、研发效能提升过程中常见的八大误区 3、研发效能实践框架的构成：研发效能实践+研发效能平台+研发效能度量
2022-06-24
堡垒机 4a 认证是什么意思？是指哪 4a？
堡垒机4a认证是什么意思？是指哪4a？很多人对于这两个问题不是很了解，今天我们小编就给大家来简单回答一下。
2022-05-17
js 进阶手写常见函数
无论是学习react还是vue，它们都是js的应用框架。剥去他们的壳子看到的始终是js，所以作为一个前端大厨必须要熟练掌握好js这个大勺，才能烧出一顿好菜
2022-10-31
如何用纯 css 代码实现太极阴阳鱼动画效果
今天看到一个有意思的效果，闲来无事做一个：
2022-12-09
推荐阅读
软件测试 / 测试开发 / 人工智能丨知识图谱实现精准测试效果
2023-11-23
直播预约 | 邀您共同探讨“云 XR 技术如何改变元宇宙的虚拟体验”
2023-06-29
一个炫酷的头像悬停效果
2023-02-06
8.5 PPT 母版设计方法
2023-10-17
Vue3 中常用的 Composition(组合)API-ref(引用) 函数
2023-06-18
6.7 版式设计六大原则（四）重复
2023-10-17
6.9 版式设计六大原则（六）留白
2023-10-17
电子书
大厂实战PPT下载
换一换 
周全 | 快手 基础架构中心负责人
周絮 | 阿里云 架构师
刘中兵 | 快手 资深架构师
评论