CSS实现播放暂停按钮样式
来源:互联网 发布:冷热数据分离 编辑:程序博客网 时间:2024/06/05 12:27
播放按钮常见形式为三角形,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/
阅读全文
0 0
- CSS实现播放暂停按钮样式
- 自创播放暂停按钮
- CSS样式实现选择按钮
- 纯 CSS 方式实现 CSS 动画的暂停与播放
- 简单实现Aandroid视频中播放暂停按钮的效果
- andorid控件之ImageButton实现"播放/暂停"按钮切换
- 实现动画暂停播放
- CSS实现鼠标滑过按钮更改按钮样式
- Axure 播放/暂停按钮的切换
- html为视频添加播放暂停按钮
- as3菜鸟教程if-else语句实现按钮的控制播放和暂停
- flash AS3.0实现进度条与播放暂停按钮的同步
- 几款精典按钮CSS样式
- css样式按钮
- 几款精典按钮CSS样式
- 几个css按钮样式
- 几个css按钮样式
- css 按钮样式
- 27.Oracle杂记——Oracle常用动态视图v$rollname
- 设计模式之工厂方法模式和抽象工厂模式
- git仓储使用
- Nginx几种常见实现301重定向方法上的区别
- 28.Oracle杂记——Oracle常用动态视图v$rollstat
- CSS实现播放暂停按钮样式
- @TargetApi() 与@SuppressLint("NewApi")
- java编程思想 第四章 练习4
- 文档总结13-linux中yum与定时任务
- 线性代数的一些笔记(仅供自己作back up)
- PHP之Redis的常用操作
- 游戏开发中的数学和物理算法:定义线
- Going deeper with convolutions
- jzoj5424【NOIP2017提高A组集训10.25】凤凰院凶真