Rumah > Artikel > hujung hadapan web > css 播放暂停按钮实现_html/css_WEB-ITnose
效果图
html代码
//播放按钮 <div id="playBtn" class="circle" style="margin: 20px 0px 10px 20px;"> <div class="circle_inner_play"> </div> </div> //暂停按钮 <div id="pauseBtn" class="circle" style="margin: 20px 0px 10px 85px;"> <div class="circle_inner_pause"> ▐▐ </div> </div> //重置按钮 <div id="resetBtn" class="circle" style="margin: 20px 0px 10px 150px;"> <div class="circle_inner_reset"> </div> </div>
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%; }