效果预览

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

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. Linux 杀死进程方法大全(kill,killall)

    杀死进程最安全的方法是单纯使用kill命令,不加修饰符,不带标志.   首先使用ps -ef命令确定要杀死进程的PID,然后输入以下命令:   # kill -pid   注释:标准的kill命令通常 ...

  2. appium自动化的工作原理(1)

    用appium开发移动端自动化测试脚本这么长时间,还没有认证的了解下它的原理是什么,到底是如何实现的呢? 1.先看一个Appium加载的过程图解(来自:了解appium自动化的工作原理--https: ...

  3. 分布式锁 -- Java常用技术方案

    来自博客园http://www.cnblogs.com/PurpleDream/p/5559352.html , 前言:       由于在平时的工作中,线上服务器是分布式多台部署的,经常会面临解决分 ...

  4. ArcGIS自定义坐标变换中的方法说明

    在10.1里面,一共提供了12种转换的方法,如下: Ø  Geocentric_Translation Ø  Molodensky Ø  Molodensky_Abridged Ø  Position ...

  5. 吴裕雄--天生自然 PHP开发学习:在CenterOS 7 系统安装配置PHP 7

    执行命令"yum install httpd"进行安装,然后在选择处,我们输入y,等待软件安装完毕.安装完成后,Apache配置文件路径是:/etc/httpd/conf/http ...

  6. 手撸GBDT原理(未完成)

    一直对GBDT里面的具体计算逻辑不太清楚,在网上发现了一篇好博客. 先上总结的关系图 GBDT对类别变量是怎么处理的? 这些东西都是在网上发现的,讲的挺好的. GBDT原理与Sklearn源码分析-回 ...

  7. spring xml 注入 map 时 map 标签报错

    如图所示: 在XML配置文件中并没有问题,问题出在实体类,在类中属性 maps 用 Map定义即可,用HashMap定义就会出现如上错误 K-I-N-G-D-O-M

  8. h-index|IF|Good story|IPS

    科研论文写作 科研论文写作的关键在于写出研究的重要性. 对科研工作者的评价标准主要以论文为主,可以从论文的定性和定量角度评价.论文的外部评价,包括科学院分区(包括123类):影响因子IF,可以通过we ...

  9. Linux启动初始化配置文件浅析

    转自:http://blog.51cto.com/19055/1144600 1)/etc/profile   登录时,会执行. 全局(公有)配置,不管是哪个用户,登录时都会读取该文件. (2)/ec ...

  10. mysql5.7解压版安装

    环境:win 10 1.解压 新建my.ini [mysqld] port = 3306 basedir=解压路径 datadir=解压路径\data max_connections=200 char ...