纯CSS实现超酷发送按钮
今天在Dribble闲逛,偶然间看到一个不错的发送完成效果,使用纯css实现了下,最终效果如下。
----------------
----------------------------------------
----------------------------------------
---------------
制作这个案例,你需要拥有
1. Checkbox的:checked伪类模拟实现CSS单击事件
2. CSS3 transform和transition
3. 自行实现的冲动和耐心
好的言归正传,我们来一起实现一下。
html部分,我们需要使用label配合input[type="checkbox"]实现CSS单击事件,需要div#btnPlane和div#btnOk来分别承载“飞机”和“对勾”。
<div class="btnContainer"> <label id="btnLabel" for="btnInput"></label> <input type="checkbox" id="btnInput" name="btnInput" /> <div id="btnPlane"></div> <div id="btnOk"></div> </div>
CSS部分代码如下,使用CSSReset和prefix-free。
/* * 页面盒子属性设置,页面背景颜色设置 * */ div{ box-sizing: border-box; } body { background: #FF7F50; } /* * 按钮容器设置 * 大小、水平垂直居中显示、圆角和溢出设置 * */ .btnContainer { width: 100px; height: 100px; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border: 2px solid #fff; border-radius: 50%; overflow: hidden; /* 修正border-radius时,webkit内核的overflow:hidden问题*/ -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); } /* * 标签设置 * 大小和容器相同,鼠标设置,层次设置 * */ .btnContainer #btnLabel { display: block; width: 100px; height: 100px; cursor: pointer; position: absolute; z-index: 100; } /* * 复选框设置 * 隐藏 * */ .btnContainer input[type="checkbox"] { display: none; } /* * “飞机”设置 * 大小、背景设置,过渡设置 * */ .btnContainer #btnPlane { width: 100px; height: 100px; background: url(https://i.cloudup.com/gBzAn-oW_S-2000x2000.png) center center no-repeat; background-size: 50%; transition: all 2s; } /* * “对勾”设置 * 大小、背景设置,位置设置,过渡设置 * */ .btnContainer #btnOk { width: 100px; height: 100px; background: url(https://i.cloudup.com/2ZAX3hVsBE-3000x3000.png) center center no-repeat; background-size: 20%; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; opacity: 0; transition: all .5s ease 1s; } /* * 响应设置 * 单击之后的“飞机”和对勾 * */ .btnContainer input[type="checkbox"]:checked~ #btnPlane{ transform: translate(100px, -100px); } .btnContainer input[type="checkbox"]:checked~ #btnOk{ opacity: 1; }
这里需要重点注意一个chrome浏览的bug,chrome浏览器在设置border-radius时,overflow:hidden在圆角部分会失效,文中进行了修正。Enjoy it.
----------------------------------------------------------
前端开发whqet,关注web前端开发,分享相关资源,欢迎点赞,欢迎拍砖。
---------------------------------------------------------------------------------------------------------
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。