原来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 也能这么炫酷（一）

评论

MySQL 数据库操作指南：LIMIT，OFFSET 和 JOIN 的使用

2023总结 - 后端开发如何利用 AI 快速完成工作

WorkPlus平台级定制，支持企业个性化需求定制

28 | 堆和堆排序：为什么说堆排序没有快速排序快

【精彩回顾】恒拓高科亮相第十一届深圳军博会

27 | 递归树：如何借助树来求解递归算法的时间复杂度

WorkPlus即时通讯，让沟通零障碍！企业协作更高效

拼多多根据ID取商品详情 API 的优势是什么？

抖音商品详情API是什么？

京东商品详情数据在数据分析行业中的重要性

29 | 堆的应用：如何快速获取到Top 10最热门的搜索关键词

【Go实现】实践GoF的23种设计模式：适配器模式

WorkPlus高效助力企业沟通的专业级即时通讯软件

企业级即时通讯系统的领跑者，WorkPlus引领沟通协作创新潮流

创作场景

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

评论

更多内容推荐

推荐阅读

电子书

大厂实战PPT下载