前端每日实战:4# 视频演示如何用纯 CSS 创作一个金属光泽 3D 按钮特效
效果预览
按下右侧的“点击预览”按钮在当前页面预览,点击链接全屏预览。
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
前端每日实战:4# 视频演示如何用纯 CSS 创作一个金属光泽 3D 按钮特效相关推荐
- 如何用纯 CSS 创作一个金属光泽 3D 按钮特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此 ...
- 如何用纯 CSS 创作一个金属光泽 3D 按钮特效 1
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此 ...
- 前端每日实战:45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教程 此视频 ...
- html鼠标拖尾效果,前端每日实战:25# 视频演示如何用纯 CSS 创作一个慧星拖尾效果的 loader 动画...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, s ...
- 前端每日实战:102# 视频演示如何用纯 CSS 创作一个小和尚
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oMmYXp 可交互视频 此视频是可 ...
- 前端每日实战:125# 视频演示如何用纯 CSS 创作一个失落的人独自行走的动画...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MqpOdR/ 可交互视频 此视频是 ...
- 前端每日实战:160# 视频演示如何用纯 CSS 创作一个打开内容弹窗的交互动画...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/GYXvez 可交互视频 此视频是可 ...
- 前端每日实战:119# 视频演示如何用纯 CSS 创作一个接扎啤的动画(内含2个视频)...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/rZeOQp 可交互视频 此视频是可 ...
- 前端每日实战:84# 视频演示如何用纯 CSS 创作一个极品飞车 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MBbEMo 可交互视频 此视频是可 ...
- python绘制图形沙漏_前端每日实战:118# 视频演示如何用纯 CSS 创作一个沙漏 loader...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, saf ...
最新文章
- java 绑定事件_Javascripts事件基础和事件绑定
- Eclipse(javaweb)刚换工作空间之后,应该做哪几件事
- 模板 字段_劲爆新功能:轻流文字识别(OCR)功能支持自定义识别模板啦
- 用java实现楼层导航_JS实现网站楼层导航效果代码实例
- 电导池行业调研报告 - 市场现状分析与发展前景预测(2021-2027年)
- Where does the error come from?----Bias and Variance
- 串口协议发送数据格式详细分析
- CDN与智能DNS 基本原理
- 推荐歌曲 一百首最经典的歌曲下载
- 非标产品和标准产品的区别(关于3C)
- golang力扣leetcode 1823.找出游戏的获胜者
- VBA调用系统调色板
- 编程实用工具大全(前后端皆可用,不来瞅瞅?)
- go get 不了,就使用 go.mod中的replace来引入远程包(需要把远程包下载在本地)
- 刚入职一个月的程序猿
- 2019年研究生数学建模E题加拿大站点数据批量下载
- 很有用的东西,可以修复MBR引导区,在windows命令行下mbrfix /drives 0 fixmbr就可以了
- 数显之家快讯:「SHIO世硕心语」曾国藩:人没格局,比没钱更可怕!
- 微信小程序在编辑器上样式正常,但在手机上不显示样式
- 生产mysql遇到kill不掉的sql的解决方法