在网页开发中，为了有更好地用户体验，我们常常会对一些交互元素添加动画效果来达到这个目的，我们知道 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
更多内容推荐
11｜DPlayer 播放器综合应用：怎样实现自己的第一个视频播放器？
这节课，我们一起来学习如何在视频平台中实现自己的第一个视频播放器。
2023-05-17
基于 Vue 的两层吸顶踩坑总结
本文简单的介绍了 VueSticky 插件的实现原理并分享了实战过程中出现的问题以及解决方案，希望对大家有所帮助。
CSS 文档中定位指南：static、relative、absolute、fixed、sticky
CSS 中 position 属性用于指定元素的定位方法的类型（static、relative、absolute、fixed、sticky）。
2021-08-11
迈向 Grid 二维布局时代
CSS Grid 布局是一种强大并且富有创意的的布局方案，这篇文章专门为不了解 Grid 的 web 开发人员来介绍它
Web3.0 杂谈 -#004（51/100）
Web3.0的基本构成元素--NFT。
2022-10-02
10｜详情页实现：如何实现需求定制化？
这节课，我们就结合在线视频平台里两个重要的定制化模块——个人中心和视频。
2023-05-15
经典面试题 - 定位不到元素
了解常见问题
2022-09-19
jquery 入门到实战
1、JQuery快速入门
2022-09-17
JavaScript 基础
JavaScript使用JS的几种写法行内式的js 直接写道元素的内部
2022-11-25
如何搭建自动化测试框架
今天先聊聊如何搭建自动化测试框架，主要会聊聊一些思路上的东西，从一个最简单的demo到把一个框架该有的组件都搭建好。本文主要以web自动化为例子，使用的语言是js。
2021-02-16
微信小程序挖坑汇总
textarea无法被覆盖。上层覆盖元素设置z-index无效。
2022-09-08
23｜运营物料的后台管理：如何全栈化实现列表分页的功能？
如何从前端到服务端，全栈化地实现列表分页的功能，这也是企业工作中，常见的功能需求点。可以分为两个部分来实现，前端部分、服务端部分。
2023-01-30
华为云官网 Web3D 和动效技术的应用与探索
动效技术，极大地提升了门户页面的视觉与交互体验效果。
你可能不是那么了解的 CSS Background
Background，写过 CSS 的朋友们肯定都知道这个属性的作用，顾名思义，背景嘛。本文主要为大家介绍 Background 属性的一些基础和进阶用法。
25｜后台搭建功能：如何设计和实现 Vue.js 运营后台的搭建功能？
页面搭建流程主要分成两个部分，第一是要先做布局设计，第二是填充物料到布局中。所以页面搭建是围绕着“操作布局”和“填充物料”来进行的。
2023-02-06
Fabric.js 居中元素 🎗️
🎗️ 使用 fabric.js 时，难免需要将元素进行居中处理。本文将详细讲解如何居中元素到视窗和画布 🎗️
2022-06-05
24｜后台搭建数据源：如何设计运营搭建页面的数据结构？
物料数据源（也就是页面数据结构）的设计与实现，我们主要学习三个要点“物料数据源”“JSON Schema”和“物料预览功能的实现”。
2023-02-03
特别加餐｜用 ChatGPT 开发一个看板项目
有不少同学希望了解AI，尤其是生成式AI对前端开发工作和前端工程师意味着什么，我个人也在关注相关领域的进展，正好趁着这次加餐的机会，跟你交流一下我的想法。
2023-05-22
QComboBox 样式表
在QComboBox 的使用过程中，他的美化数不胜数，但是在QComboBox的美化过程中，他与别的控件使用方法不大一样，他需要设置在QComboBox，下面的内容会详细的介绍在QComboBox的美化使用。
2022-07-18
从零到一，我也能写小程序
看了这篇文章，即使让我现在就从头写一个能够正常运行的小程序，也没有原本想象中的那么难了。
推荐阅读
那些不用 js 也能实现的效果
2023-07-06
开心档之 DTD - 元素
2023-08-03
缕析条分 Scroll 属性 | 京东云技术团队
2023-07-18
答疑篇｜前导篇 & 前端实战篇思考题答案
2023-07-19
5.4 PPT 表格设计美化方法
2023-10-17
CSS 小技巧之绘制心形图案
大前端14｜ECharts 实战：可视化如何更好地服务于创作者？
2023-05-24
电子书
大厂实战PPT下载
换一换 
任昭臣 | 腾讯 OVBU 终端 CI/CD 负责人
张泽亚 | 字节跳动 高级前端工程师
王植萌 | 去哪儿网 基础架构技术高级总监
评论