效果预览

按下右侧的“点击预览”按钮在当前页面预览,点击链接全屏预览。

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;
}

大功告成!

知识点

前端每日实战:4# 视频演示如何用纯 CSS 创作一个金属光泽 3D 按钮特效的更多相关文章

  1. 如何用纯 CSS 创作一个金属光泽 3D 按钮特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此 ...

  2. 前端每日实战:72# 视频演示如何用纯 CSS 创作气泡填色的按钮特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKqZjy 可交互视频 此视频是可 ...

  3. 前端每日实战:23# 视频演示如何用纯 CSS 创作一个菜单反色填充特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 此视频是 ...

  4. 前端每日实战:27# 视频演示如何用纯 CSS 创作一个精彩的彩虹 loading 特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vjvoow 可交互视频教程 此视频 ...

  5. 前端每日实战:10# 视频演示如何用纯 CSS 创作一个同心圆弧旋转 loader 特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视频是可以交 ...

  6. 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...

  7. 前端每日实战:158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pxLbjv 可交互视频 此视频是可 ...

  8. 前端每日实战:122# 视频演示如何用纯 CSS 创作一个苹果系统的相册图标

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/zJKwbO 可交互视频 此视频是可 ...

  9. 前端每日实战:156# 视频演示如何用纯 CSS 创作一个飞机舷窗风格的 toggle 控件

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jeaOrw 可交互视频 此视频是可 ...

随机推荐

  1. 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%': 显示结果: +------------------------ ...

  2. 编译安装 logstash-output-jdbc

    环境 mac https://github.com/theangryangel/logstash-output-jdbc logstash-plugin install logstash-output ...

  3. iOS火焰动画效果、图文混排框架、StackView效果、偏好设置、底部手势等源码

    iOS精选源码 高性能图文混排框架,构架顺滑的iOS应用. 使用OpenGLE覆盖阿尔法通道视频动画播放器视图. 可选最大日期截至当日日期的日期轮选器ChooseDatePicker 简单轻量的图片浏 ...

  4. django框架中的cookie与session

    cookie因为http是一个无状态协议,无法记录用户上一步的操作,所以需要状态保持.cookie和session的区别:1.cookie是保存在浏览器本地的,所以相对不安全.cookie是4k的大小 ...

  5. Leaflet,OpenLayers3加载ArcGIS切片(png格式,Exploded松散型)

    需求 做了一个简单的WebGIS应用,不想因为加载切片就安装一台GIS服务器.于是想直接访问图片的方式来加载地图. 需解决的问题 leafletjs目前是不能够直接加载ArcGIS服务切片的,但可以借 ...

  6. hadoop-2.5.2 源码学习1

  7. npm参考手册

    一 权限操作 npm允许通过scope组织私有包,通过team细化权限控制 npm官方仓储有两种类型的包,普通包和scope包 普通包特征: - 只能公有,谁都可以下载使用 - 仅可以通过所有者(ow ...

  8. [LC] 225. Implement Stack using Queues

    Implement the following operations of a stack using queues. push(x) -- Push element x onto stack. po ...

  9. Windows10下Linux系统的安装和使用

    WSL 以往我都是直接安装VirtualBox,然后再下载Linux系统的ISO镜像,装到VirtualBox里运行. 改用Win10系统后,了解到了WSL(Windows Subsystem for ...

  10. SQL Server 查询分析器的执行计划中的扫描方式,举例理解

    student表,id,name,address id上建立聚集索引,Name建索引,address无索引.1. [Table Scan]:遍历整个表,查找所有匹配的记录行.这个操作将会一行一行的检查 ...