效果预览
按下右侧的“点击预览”按钮在当前页面预览,点击链接全屏预览。
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
原文地址:https://segmentfault.com/a/1190000014599280
如何用纯 CSS 创作一个金属光泽 3D 按钮特效的更多相关文章
-
前端每日实战:4# 视频演示如何用纯 CSS 创作一个金属光泽 3D 按钮特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此视频是可以 ...
-
4. 纯 CSS 创作一个金属光泽 3D 按钮特效
原文地址:https://segmentfault.com/a/1190000014599280 HTML代码: <div class="box">BUTTON< ...
-
如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视 ...
-
如何用纯 CSS 创作一个容器厚条纹边框特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/YLqbXy 可交互视频教程 此视 ...
-
如何用纯 CSS 创作一个菜单反色填充特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 ...
-
前端每日实战:23# 视频演示如何用纯 CSS 创作一个菜单反色填充特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 此视频是 ...
-
前端每日实战:10# 视频演示如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视频是可以交 ...
-
如何用纯 CSS 创作一个精彩的彩虹 loading 特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vjvoow 可交互视频教 ...
-
前端每日实战:27# 视频演示如何用纯 CSS 创作一个精彩的彩虹 loading 特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vjvoow 可交互视频教程 此视频 ...
随机推荐
-
iOS 之消息推送(个推)---个人小结
前言:自从上个星期开始整这个推送,弄了差不多一个星期,今天终于给整好了,因此现在来记录这段"奇妙"的旅程. 我们公司使用的消息推送是用的第三方--个推,这里不得不说一下,个推的技术 ...
-
crm on premise IFD 部署下提供oauth 2.0 集成自定义应用
很多情况下我们的CRM系统会和弟三方应用集成,一般情况我们会开发一个中间站点来提供web api 给弟三方应用. 参考:http://alexanderdevelopment.net/post/201 ...
-
SVN 中trunk、branches、tags
SVN 中trunk.branches.tags 我们在一些著名开源项目的版本库中,通常可以看到trunk, branches, tags等三个目录.由于SVN固有的特点,目录在SVN中并没有特别 ...
-
四、 添加模型Model(ASP.NET MVC5 系列)
在这一章节中我们将添加一些classes类来管理数据库中的movies.这些classes类就是ASP.NET MVC应用程序中的"model". 我们将用.NET框架中的数据访问 ...
-
实现MongoDB读写分离的“读偏好”介绍
在某些情况下,将读请求发送给副本集的备份节点是合理的,例如,单个服务器无法处理应用的读压力,就可以把查询请求路由到可复制集中的多台服务器上.现在绝大部分MongoDB驱动支持读偏好设置(read pr ...
-
如何给USB移动硬盘格式化分区
硬盘盒装好后,插在电脑USB接口上,电脑正常识别到移动硬盘后,但因为全新硬盘没有分区,在"我的电脑"里是看不到盘符的.下面以40G移动硬盘分区讲一下硬盘如何分区.1.操作系统最好是 ...
-
DRBD架构详解(原创)
DRBD概述Distributed Replicated Block Device(DRBD)是一种基于软件的,无共享,复制的存储解决方案,在服务器之间的对块设备(硬盘,分区,逻辑卷等)进行镜像.DR ...
-
火狐插件安装-基于web自动化测试
一.Firebug 安装 1. 打开火狐浏览器—选择右上角“打开菜单”(图一)----附件组件(图二) 图一 图二 2. 点击:扩展(图三)—-------用于所有附加组件的工具(图四)----选 ...
-
golang代码片段(摘抄)
以下是从golang并发编程实战2中摘抄过来的代码片段,主要是实现一个简单的tcp socket通讯(客户端发送一个数字,服务端计算该数字的立方根然后返回),写的不错,用到了go的并发以及看下郝林大神 ...
-
使用pycharm手动搭建python语言django开发环境(三) 使用django的apps应用 添加应用静态文件
1)在django 工程目录中使用cmd命令行 敲入"python manage.py startapp app名称(例子为blog)" 2)在django工程目录中应该生成了bl ...