CSS实现播放暂停按钮样式 | 您所在的位置:网站首页 › 小朋友自我介绍短句简短 › CSS实现播放暂停按钮样式 |
播放按钮常见形式为三角形,CSS绘制三角形主要用到了border-width属性,他可以定义四个边框各个的宽度。 播放样式代码: button{ padding: 0; background-color: white; box-sizing: border-box; } .play{ height: 74px; border-style: solid; border-width: 37px 0 37px 60px; border-color: transparent transparent transparent black; }效果: 暂停按钮常见样式为两个竖线,实现这个效果用到了border-style的一个属性值double,意为双边框 暂停按钮样式代码: button{ padding: 0; background-color: white; box-sizing: border-box; } .pause{ width: 74px; height: 74px; border-style: double; border-width: 0px 0px 0px 60px; border-color: #202020; }效果: 鼠标悬浮切换按钮样式: button{ padding: 0; background-color: white; box-sizing: border-box; } .play{ height: 74px; border-style: solid; border-width: 37px 0 37px 60px; border-color: transparent transparent transparent black; transition: all .5s ease; } .play:hover{ border-style: double; border-width: 0px 0px 0px 60px; }效果: 使用CSS不仅可以绘制三角形,还有很多常见图形,可参考:http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet 代码地址:https://github.com/justforuse/HTML-CSS-JS/tree/master/play-pause 参考链接: https://css-tricks.com/making-pure-css-playpause-button/ |
CopyRight 2018-2019 实验室设备网 版权所有 |