前端每日实战: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 可交互视频 此视频是可 ...
随机推荐
- Linux 杀死进程方法大全(kill,killall)
杀死进程最安全的方法是单纯使用kill命令,不加修饰符,不带标志. 首先使用ps -ef命令确定要杀死进程的PID,然后输入以下命令: # kill -pid 注释:标准的kill命令通常 ...
- appium自动化的工作原理(1)
用appium开发移动端自动化测试脚本这么长时间,还没有认证的了解下它的原理是什么,到底是如何实现的呢? 1.先看一个Appium加载的过程图解(来自:了解appium自动化的工作原理--https: ...
- 分布式锁 -- Java常用技术方案
来自博客园http://www.cnblogs.com/PurpleDream/p/5559352.html , 前言: 由于在平时的工作中,线上服务器是分布式多台部署的,经常会面临解决分 ...
- ArcGIS自定义坐标变换中的方法说明
在10.1里面,一共提供了12种转换的方法,如下: Ø Geocentric_Translation Ø Molodensky Ø Molodensky_Abridged Ø Position ...
- 吴裕雄--天生自然 PHP开发学习:在CenterOS 7 系统安装配置PHP 7
执行命令"yum install httpd"进行安装,然后在选择处,我们输入y,等待软件安装完毕.安装完成后,Apache配置文件路径是:/etc/httpd/conf/http ...
- 手撸GBDT原理(未完成)
一直对GBDT里面的具体计算逻辑不太清楚,在网上发现了一篇好博客. 先上总结的关系图 GBDT对类别变量是怎么处理的? 这些东西都是在网上发现的,讲的挺好的. GBDT原理与Sklearn源码分析-回 ...
- spring xml 注入 map 时 map 标签报错
如图所示: 在XML配置文件中并没有问题,问题出在实体类,在类中属性 maps 用 Map定义即可,用HashMap定义就会出现如上错误 K-I-N-G-D-O-M
- h-index|IF|Good story|IPS
科研论文写作 科研论文写作的关键在于写出研究的重要性. 对科研工作者的评价标准主要以论文为主,可以从论文的定性和定量角度评价.论文的外部评价,包括科学院分区(包括123类):影响因子IF,可以通过we ...
- Linux启动初始化配置文件浅析
转自:http://blog.51cto.com/19055/1144600 1)/etc/profile 登录时,会执行. 全局(公有)配置,不管是哪个用户,登录时都会读取该文件. (2)/ec ...
- mysql5.7解压版安装
环境:win 10 1.解压 新建my.ini [mysqld] port = 3306 basedir=解压路径 datadir=解压路径\data max_connections=200 char ...