css 播放暂停按钮实现_html/css_WEB-ITnose
程序员文章站
2022-04-20 14:17:34
...
效果图
html代码
//播放按钮//暂停按钮//重置按钮▐▐
css
.circle { border: solid 1px #23527C; border-radius: 50px; height: 50px; position: absolute; width: 50px; } .circle:hover { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); } .circle_inner_play { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 20px; border-color: transparent transparent transparent #23527C; position: absolute; top: 50%; left: 50%; margin: -10px 0 0 -7px; } .circle_inner_pause { position: absolute; top: 50%; left: 50%; margin-left: -12px; margin-top: -10px; color: #23527C; } .circle_inner_reset { width: 18px; height: 18px; background-color: #23527C; margin: -9px 0 0 -9px; position: absolute; top: 50%; left: 50%; }
推荐阅读
-
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
-
html5+css3实现稍微完整的视频播放器
-
html+css实现自定义图片上传按钮
-
css5种实现垂直居中_html/css_WEB-ITnose
-
纯CSS3实现图片展示特效_html/css_WEB-ITnose
-
?4种实现多列布局css_html/css_WEB-ITnose
-
一款纯css3实现的响应式导航_html/css_WEB-ITnose
-
CSS3 实现六边形Div图片展示效果_html/css_WEB-ITnose
-
一款简洁的纯css3代码实现的动画导航_html/css_WEB-ITnose
-
服务器重定向与客户端重定向学习,辨析与实现_html/css_WEB-ITnose