html制作3d按钮,纯CSS3 3D按钮 按钮酷似牛奶般剔透
本文作者html5tricks,转载请注明出处
接下来我们来分析一下实现这款CSS3 3D按钮的步骤及其代码,总体而言,这款CSS3 3D按钮主要由HTML代码和CSS代码组成。实现原理是用两个span来替代
HTML代码:
+
–
HTML代码很简单,我们可以看出每个checkbox下面均定义了2个span,通过对这两个span样式的定义,我们就可以模拟出checkbox选中的动画效果了。
接下来是CSS代码:
.toggle {
margin: 4px;
display: inline-block;
}
.toggle {
box-shadow: inset 0 0 35px 5px rgba(0, 0, 0, 0.25), inset 0 2px 1px 1px rgba(255, 255, 255, 0.9), inset 0 -2px 1px 0 rgba(0, 0, 0, 0.25);
border-radius: 8px;
background: #ccd0d4;
position: relative;
height: 140px;
width: 140px;
}
.toggle:before {
box-shadow: 0 0 17.5px 8.75px white;
border-radius: 118.3px;
background: white;
position: absolute;
margin-left: -50.4px;
margin-top: -50.4px;
opacity: 0.2;
content: "";
height: 100.8px;
width: 100.8px;
left: 50%;
top: 50%;
}
.toggle .button {
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
filter: blur(1px);
transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.5), inset 0 -3px 4px -1px rgba(0, 0, 0, 0.2), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 3px 4px -1px rgba(255, 255, 255, 0.2), inset 0 0 5px 1px rgba(255, 255, 255, 0.8), inset 0 20px 30px 0 rgba(255, 255, 255, 0.2);
border-radius: 96.32px;
position: absolute;
background: #ccd0d4;
margin-left: -48.16px;
margin-top: -48.16px;
display: block;
height: 96.32px;
width: 96.32px;
left: 50%;
top: 50%;
}
.toggle .label {
transition: color 300ms ease-out;
text-shadow: 1px 1px 3px #ccd0d4, 0 0 0 rgba(0, 0, 0, 0.8), 1px 1px 4px white;
line-height: 139px;
text-align: center;
position: absolute;
font-weight: 700;
font-size: 42px;
display: block;
opacity: 0.9;
height: 100%;
width: 100%;
color: rgba(0, 0, 0, 0.4);
}
.toggle input {
opacity: 0;
position: absolute;
cursor: pointer;
z-index: 1;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.toggle input:active ~ .button {
box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.4), inset 0 -8px 30px 1px rgba(255, 255, 255, 0.9), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 8px 25px 0 rgba(0, 0, 0, 0.4), inset 0 0 10px 1px rgba(255, 255, 255, 0.6);
}
.toggle input:active ~ .label {
font-size: 40px;
color: rgba(0, 0, 0, 0.45);
}
.toggle input:checked ~ .button {
box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.4), inset 0 -8px 25px -1px rgba(255, 255, 255, 0.9), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 8px 20px 0 rgba(0, 0, 0, 0.2), inset 0 0 5px 1px rgba(255, 255, 255, 0.6);
}
.toggle input:checked ~ .label {
font-size: 40px;
color: rgba(0, 0, 0, 0.4);
}
也没什么特别的,基本都是CSS3常用的一些属性,阴影动画什么的,我们只是通过对颜色的选取,以及合理地运用阴影特效,才用纯CSS3描绘出一个3D立体如牛奶般剔透的按钮动画特效。
html制作3d按钮,纯CSS3 3D按钮 按钮酷似牛奶般剔透相关推荐
- 纯CSS3实现牛奶般剔透的3D按钮特效
今天我们要来看一款非常特别的纯CSS3 3D按钮,它的外观酷似纯白剔透的牛奶,点击按钮的时候还会出现一种很柔和的弹力效果.按钮按下时,按钮会轻轻的弹动一下,非常逼真.本文我们在观赏演示的同时,也将源代 ...
- html实现3D按钮,纯css3实现的3D按钮
前面已经为大家介绍了好多纯css3实现的按钮.今天要再给大家带来一款纯css3实现的3D按钮.在实例中给出了五种颜色的3D按钮.效果图如下: 实现的代码. html代码: CSS 3D Buttons ...
- 汉堡式折叠html,纯CSS3菜单汉堡包按钮变形动画特效
这是一款非常有趣的纯CSS3菜单汉堡包按钮变形动画特效.该特效共有9种不同的按钮变形动画效果,这些效果都是使用CSS3帧动画完成的,效果非常的酷. 制作方法 HTML结构 该按钮变形动画使用嵌套 的H ...
- 鼠标动效html,5种纯CSS3鼠标hover按钮动画效果
这是一款鼠标hover按钮动画特效.该特效共有5种hover动画效果,它们在结构布局上使用flex来进行布局,并通过css transition来实现动画效果. 使用方法 HTML结构 该按钮特效使用 ...
- css 3d魔方源代码,CSS3 3D环境实现立体 魔方效果代码(示例代码)
魔方 section{width: 100px;height:100px;border:5px solid red; margin:50px auto;padding:100px;perspectiv ...
- 7款外观迷人的HTML5/CSS3 3D特效按钮特效
下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮 按钮实现非常简单 之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...
- 前端 开关按钮样式_7款外观迷人的HTML5/CSS3 3D按钮特效
下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮 按钮实现非常简单 之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...
- 炫酷的css3动作源码,8 个超炫酷的纯 CSS3 动画及源码分享
在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...
- 纯html5语言编写的动画,8个纯CSS3制作的动画应用及源码
本文作者html5tricks,转载请注明出处 对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以 ...
最新文章
- 网站开发流程以及HTML5简介(三)
- 中国银河证券签约神策数据 数据赋能业务跨越性增长
- Qt QWidget控件透明动画实现
- Windows下的ssh姐妹花 Xshell 和 Xftp
- springboot-2-ioc
- .net mysql 多线程_.Net多线程问题总结
- 采集浏览器访问某网站时产生的流量,并保存为pcap文件
- 继腾讯后 B站又获阿里投资!加速二次元电商商业化
- python2和python3的默认编码_Python2和Python3中的字符串编码问题解决
- 系统提示System.Data.OracleClient 需要 Oracle 客户端软件 8.1.7 或更高版本解决办法...
- js子窗口调用父窗口函数并传递对象给父窗口的方法
- 【python】编程语言入门经典100例--21
- 云小店商城源码修复30套模板支持一键对接各大系统
- 小说采集,采集笔趣阁小说网站(www.biquges.cc)
- html什么是一级标题,一级标题是什么(论文一二三级标题范本)
- WIN10打印机显示服务器脱机,网络打印机脱机,教你win10网络打印机脱机无法打印的应对办法...
- mysql amoeba 配置_mysql amoeba安装配置步骤
- Python爬取煎蛋网图片
- 北京邮电大学计算机考研英语,我的考研心得——北京邮电大学计算机专业
- 墨者靶场-SQL手工注入漏洞测试(MySQL数据库-字符型)