如何用纯 CSS 创作一个金属光泽 3D 按钮特效 1
效果预览
在线演示
按下右侧的“点击预览”按钮在当前页面预览,点击链接全屏预览。
https://codepen.io/zhang-ou/full/MGeRRO
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/c/cdKMBTk
源代码下载
本地下载
请从 github 下载。
https://github.com/comehope/front-end-daily-challenges/tree/master/004-metallic-glossy-3d-button-effects
代码解读
在 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
原文地址:https://segmentfault.com/a/1190000014599280
如何用纯 CSS 创作一个金属光泽 3D 按钮特效 1相关推荐
- 如何用纯 CSS 创作一个金属光泽 3D 按钮特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此 ...
- 4. 纯 CSS 创作一个金属光泽 3D 按钮特效
4. 纯 CSS 创作一个金属光泽 3D 按钮特效 原文地址:https://segmentfault.com/a/1190000014599280 HTML代码: <div class=&qu ...
- 如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个精彩的彩虹 loading 特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vjvoow 可交互视频教 ...
- 如何用纯 CSS 创作气泡填色的按钮特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKqZjy 可交互视频 ...
- 如何用纯 CSS 创作背景色块变换的按钮特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/XYKdwg 可交互视频教 ...
- 如何用纯 CSS 创作一个小球上台阶的动画
如何用纯 CSS 创作一个小球上台阶的动画 效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/come ...
- 如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个冒着热气的咖啡杯
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/xjXxoz 可交互视频教程 此视 ...
最新文章
- 七喜携手AMD,摆脱英特尔“潜规则”
- js 获取input type=file 文件,并且上传
- Sublime P4语法高亮设置
- OllyDbg完全教程
- 【Redis学习笔记】2018-06-12 复制与传播
- Base64编码运用与基本原理
- 信号分析中一些特征量
- CentOS6找回root密码 - 黑猴子
- merge into ORA-30926
- 方法调方法(委托方式)
- JAVA8的双重循环怎么优化_Java8处理List的双层循环问题
- c+字符串数组_了解C ++字符串数组
- A. Holidays
- 消息队列一:为什么需要消息队列(MQ)?
- linux安装R3.5.0
- TOGAF ADM 架构开发方法概述以及各个阶段的目的和交付物
- 更改Word文档中自带插入公式中的字体解决方案
- 在pycharm内给自己的代码设置签名,附加时间
- canvas lineWidth1px问题
- 针对Informer中时序数据ETT油温数据分析
热门文章
- 全网最具深度的三次握手、四次挥手讲解,知乎上已获万赞
- js 实现计数器功能
- 计算机设备领用 调拨流程,设备、家具调拨办事流程(部门间调拨使用)
- SQL Server 实验七 数据完整性及数据库程序设计
- 微信开发者工具使用 --git 同步到码云
- java ftp 长连接超时_FTP被动模式连接及超时问题解决
- Java - 枚举类型enum用法
- 从源码看DL4J中Native BLAS的加载,以及配置
- java程序 键盘事件_java编写程序实现键盘钢琴,运用键盘事件、鼠标事件
- Linux系统中查看Mysql数据库版本号的四种方法(图文完整版)