前端每日实战:4# 视频演示如何用纯 CSS 创作一个金属光泽 3D 按钮特效
效果预览
按下右侧的“点击预览”按钮在当前页面预览,点击链接全屏预览。
https://codepen.io/zhang-ou/full/MGeRRO
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
源代码下载
请从 github 下载。
代码解读
在 dom 中定义一个容器:
<div class="box">BUTTON</div>
容器居中显示:
html, body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: skyblue;
}
设置按钮的 2d 样式,为了便于调整按钮尺寸,使用了变量:
.box {
background: linear-gradient(to right, gold, darkorange);
color: white;
--width: 250px;
--height: calc(var(--width) / 3);
width: var(--width);
height: var(--height);
text-align: center;
line-height: var(--height);
font-size: calc(var(--height) / 2.5);
font-family: sans-serif;
letter-spacing: 0.2em;
border: 1px solid darkgoldenrod;
border-radius: 2em;
}
设置按钮的 3d 样式:
.box {
transform: perspective(500px) rotateY(-15deg);
text-shadow: 6px 3px 2px rgba(0, 0, 0, 0.2);
box-shadow: 2px 0 0 5px rgba(0, 0, 0, 0.2);
}
定义按钮的鼠标划过动画效果:
.box:hover {
transform: perspective(500px) rotateY(15deg);
text-shadow: -6px 3px 2px rgba(0, 0, 0, 0.2);
box-shadow: -2px 0 0 5px rgba(0, 0, 0, 0.2);
}
.box {
transition: 0.5s;
}
用伪元素增加光泽:
.box {
position: relative;
}
.box::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, transparent, white, transparent);
left: 0;
}
定义光泽动画效果:
.box::before {
left: -100%;
transition: 0.5s;
}
.box:hover::before {
left: 100%;
}
最后,隐藏容器之外的内容:
.box {
overflow: hidden;
}
大功告成!
知识点
- linear-gradient https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
- variables https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
- calc https://developer.mozilla.org/en-US/docs/Web/CSS/calc
- perspective https://developer.mozilla.org/en-US/docs/Web/CSS/perspective
- text-shadow https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow
- box-shadow https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
前端每日实战:4# 视频演示如何用纯 CSS 创作一个金属光泽 3D 按钮特效的更多相关文章
- 如何用纯 CSS 创作一个金属光泽 3D 按钮特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此 ...
- 前端每日实战:72# 视频演示如何用纯 CSS 创作气泡填色的按钮特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKqZjy 可交互视频 此视频是可 ...
- 前端每日实战:23# 视频演示如何用纯 CSS 创作一个菜单反色填充特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 此视频是 ...
- 前端每日实战:27# 视频演示如何用纯 CSS 创作一个精彩的彩虹 loading 特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vjvoow 可交互视频教程 此视频 ...
- 前端每日实战:10# 视频演示如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视频是可以交 ...
- 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...
- 前端每日实战:158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pxLbjv 可交互视频 此视频是可 ...
- 前端每日实战:122# 视频演示如何用纯 CSS 创作一个苹果系统的相册图标
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/zJKwbO 可交互视频 此视频是可 ...
- 前端每日实战:156# 视频演示如何用纯 CSS 创作一个飞机舷窗风格的 toggle 控件
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jeaOrw 可交互视频 此视频是可 ...
随机推荐
- Could not open Hibernate Session for transaction; nested exception is org.hibernate.TransactionExcep linux下mysql修改连接超时wait_timeout修改后就ok了
Linux下mysql修改连接超时wait_timeout 1,首先: show variables like '%timeout%': 显示结果: +------------------------ ...
- 编译安装 logstash-output-jdbc
环境 mac https://github.com/theangryangel/logstash-output-jdbc logstash-plugin install logstash-output ...
- iOS火焰动画效果、图文混排框架、StackView效果、偏好设置、底部手势等源码
iOS精选源码 高性能图文混排框架,构架顺滑的iOS应用. 使用OpenGLE覆盖阿尔法通道视频动画播放器视图. 可选最大日期截至当日日期的日期轮选器ChooseDatePicker 简单轻量的图片浏 ...
- django框架中的cookie与session
cookie因为http是一个无状态协议,无法记录用户上一步的操作,所以需要状态保持.cookie和session的区别:1.cookie是保存在浏览器本地的,所以相对不安全.cookie是4k的大小 ...
- Leaflet,OpenLayers3加载ArcGIS切片(png格式,Exploded松散型)
需求 做了一个简单的WebGIS应用,不想因为加载切片就安装一台GIS服务器.于是想直接访问图片的方式来加载地图. 需解决的问题 leafletjs目前是不能够直接加载ArcGIS服务切片的,但可以借 ...
- hadoop-2.5.2 源码学习1
- npm参考手册
一 权限操作 npm允许通过scope组织私有包,通过team细化权限控制 npm官方仓储有两种类型的包,普通包和scope包 普通包特征: - 只能公有,谁都可以下载使用 - 仅可以通过所有者(ow ...
- [LC] 225. Implement Stack using Queues
Implement the following operations of a stack using queues. push(x) -- Push element x onto stack. po ...
- Windows10下Linux系统的安装和使用
WSL 以往我都是直接安装VirtualBox,然后再下载Linux系统的ISO镜像,装到VirtualBox里运行. 改用Win10系统后,了解到了WSL(Windows Subsystem for ...
- SQL Server 查询分析器的执行计划中的扫描方式,举例理解
student表,id,name,address id上建立聚集索引,Name建索引,address无索引.1. [Table Scan]:遍历整个表,查找所有匹配的记录行.这个操作将会一行一行的检查 ...