纯CSS实现超酷发送按钮

今天在Dribble闲逛，偶然间看到一个不错的发送完成效果，使用纯css实现了下，最终效果如下。

----------------

----------------------------------------<喎?http://www.weiyer.com/Search.asp?KeyWord=/kf/ware/vc/" target="_blank" class="keylink">vcD48cD48c3Ryb25nPtTaz9/R0L6/teO799XiwO+jrM/C1NjK1bLYteO799XiwO+hozwvc3Ryb25nPjwvcD48cD4tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tPC9wPjxwPi0tLS0tLS0tLS0tLS0tLTwvcD48cD7Wxtf31eK49rC4wP2jrMTj0OjSqtO109A8L3A+PHA+MS4gQ2hlY2tib3i1xDpjaGVja2VkzrHA4MSjxOLKtc/WQ1NTtaW798rCvP48L3A+PHA+Mi4gQ1NTMyB0cmFuc2Zvcm26zXRyYW5zaXRpb248L3A+PHA+My4g19TQ0Mq1z9a1xLPltq+6zcTN0MQ8L3A+PHA+usO1xNHUuenV/bSro6zO0sPHwLTSu8bwyrXP1tK7z8KhozwvcD48cD5odG1ssr+31qOsztLDx9Do0qrKudPDbGFiZWzF5LrPaW5wdXRbdHlwZT0="checkbox"]实现CSS单击事件，需要p#btnPlane和p#btnOk来分别承载“飞机”和“对勾”。

CSS部分代码如下，使用CSSReset和prefix-free。

/*
 * 页面盒子属性设置，页面背景颜色设置
 * */
p{
	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前端开发，分享相关资源，欢迎点赞，欢迎拍砖。
---------------------------------------------------------------------------------------------------------