纯CSS实现超酷发送按钮

来源：互联网发布：程序员自我评定怎么写编辑：程序博客网时间：2024/05/16 11:34

p{text-indent:2em;}

今天在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前端开发，分享相关资源，欢迎点赞，欢迎拍砖。
---------------------------------------------------------------------------------------------------------

22 0