纯CSS实现超酷发送按钮

╰+攻爆jí腚メ 2022-08-10 16:49 230阅读 0赞

前端开发whqet,csdn,王海庆,whqet,前端开发专家

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

![1407241040_4854.gif][]

\----------------

\----------------------------------------

**[在线研究][Link 2]点击这里，[下载收藏][Link 3]点击这里。**

\----------------------------------------

\---------------

制作这个案例，你需要拥有

1. Checkbox的:checked伪类模拟实现CSS单击事件

2. CSS3 transform和transition

3. 自行实现的冲动和耐心

好的言归正传，我们来一起实现一下。

html部分，我们需要使用label配合input\[type="checkbox"\]实现CSS单击事件，需要div\#btnPlane和div\#btnOk来分别承载“飞机”和“对勾”。

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][whqet]，关注web前端开发，分享相关资源，欢迎点赞，欢迎拍砖。  
\---------------------------------------------------------------------------------------------------------

[Link 1]: https://dribbble.com/shots/1663480-Sending-Complete
[1407241040_4854.gif]: https://img-my.csdn.net/uploads/201408/05/1407241040_4854.gif
[Link 2]: http://codepen.io/whqet/pen/snceC
[Link 3]: http://codepen.io/whqet/share/zip/snceC/
[whqet]: http://blog.csdn.net/whqet