CSS3实现的player播放按钮
完成的效果如下
Step 1:先了解border的原理:
Step 2:HTML代码结构
- <section class="playContainer">
- <li class="playBtn">
- <a href="#" title="start">Start</a>
- </li>
- <li class="pauseBtn">
- <a href="#" title="pause">Pause</a>
- </li>
- <li class="stopBtn">
- <a href="#" title="stop">Stop</a>
- </li>
- <li class="forwardBtn playBtn">
- <a href="#" title="forward">Forward</a>
- <a href="#" title="forward">Forward</a>
- </li>
- <li class="rewindBtn">
- <a href="#" title="rewind">Rewind</a>
- <a href="#" title="rewind">Rewind</a>
- </li>
- <li class="ejectBtn">
- <a href="#" class="arrow">Eject</a>
- <a href="#" class="dash">Eject</a>
- </li>
- </section>
Step 3:画背景圆,position:relative
- .playContainer li { position: relative; float: left; border: 25px solid #404040; color: #404040; height: 0; width:0; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; margin: 0 20px; }
Step 4:画stop按钮,要让按钮居中。
按钮相对外层圆圈绝对定位,从圆圈的中心开始,所以要调整top和left值
stop按钮边长14px,相对原点需要向上、向左移动7个像素,居中。
全部的CSS如下:
- .playContainer { position: relative; float: left; background: rgba(0, 0, 0, 0.8); padding: 20px; }
- .playContainer li { position: relative; float: left; border: 25px solid #404040; color: #404040; height: 0; width:0; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; margin: 0 20px; }
- .playContainer a { border-style: solid; text-indent: -9999px; position: absolute; top: -8px; left: -3px; }
- .playBtn a { border-color: transparent transparent transparent #fff; border-width: 8px 0 8px 12px; width: 0; height: 0; }
- .pauseBtn a { border-color: transparent white; border-width: 0 6px; height: 15px; width: 6px; left: -9px; }
- .stopBtn a { border: 7px solid #fff; height: 0; width: 0; left: -7px; top: -7px;}
- .forwardBtn a { border-left-width: 8px; left: 1px; }
- .forwardBtn a:first-child { margin-left: -7px; }
- .rewindBtn a { border-width: 8px 8px 8px 0; border-color: transparent #fff transparent transparent; width: 0; height: 0; }
- .rewindBtn a:first-child { margin-left: -7px; }
- .ejectBtn a.arrow { border-width: 0 8px 8px 8px; border-color: transparent transparent #fff transparent; top:-26px; left:-8px; }
- ectBtn a.dash { border-width: 0 0 4px; border-color: transparent transparent #fff; height: 0; width:16px; left: -8px; top: 4px; }
CSS3实现的player播放按钮的更多相关文章
- 使用CSS3实现的player播放按钮
完成的效果如下 查看效果并下载 Step 1:先了解border的原理: Step 2:HTML代码结构 <section class="playContainer"> ...
- C# Winform使用Windows Media Player播放多媒体整理
一.简单使用示例步骤 1.添加Windows Media Player 组件当前是系统的 Com组件 工具箱>右键“选择项”>选择Com组件 2.控件拖拽到桌面,使用 private vo ...
- Mac 上 QuickTime Player 播放器以 1.1、1.2 倍速等更精确速度快进/快退播放的方法
苹果的 QuickTime Player 播放器上点击双箭头按钮可以用 2.4.8 倍的速度快进/快退播放视频,但是 2 倍速太快了,如果我想以 1.1.1.2 倍速这种更精确的速度控制视频播放呢?按 ...
- 基于MFC的Media Player播放器的制作(3---功能实现)
| 版权声明:本文为博主原创文章,未经博主允许不得转载. 下面我们试试一下,按下退出Button退出播放器的功能: 首先,我们双击退出Button按钮,就会弹出下图的框: 上面的弄好之后我们就实现 ...
- BonBon - 使用 CSS3 制作甜美的糖果按钮
BonBon 是一组使用 CSS3 制作的甜美的糖果按钮样式.在过去,我们都是使用图片或者 JavaScript 来实现漂亮的按钮效果,随着越来越多的浏览器对 CSS3 的支持和完善,使用 CSS3 ...
- 美妙的 CSS3 动画!一组梦幻般的按钮效果
今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...
- 纯CSS3彩色边线3D立体按钮制作教程
原文:纯CSS3彩色边线3D立体按钮制作教程 今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...
- Netflix是怎样运行的(极度简化版)— 每次点击播放按钮背后的复杂东西
Netflix是怎样运行的(极度简化版)- 每次点击播放按钮背后的复杂东西 本文摘译自 How Netflix works: the (hugely simplified) complex stuff ...
- 一款纯css3实现的颜色渐变按钮
之前为大家分享了推荐10款纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮.这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非常好看,一起看下效果图: 在线预览 ...
随机推荐
- 【JAVA错误笔记】 - c3p0问题java.lang.NoClassDefFoundError:com.mchange.v2.ser.Indirector
错误描述:java.lang.NoClassDefFoundError:com.mchange.v2.ser.Indirector 原因分析: 这是c3p0的一个错误信息,我们在下载 c3p0时候,z ...
- 实现输出h264直播流的rtmp服务器 flash直播服务器
http://www.cnblogs.com/haibindev/archive/2012/04/16/2450989.html 实现输出h264直播流的rtmp服务器 RTMP(Real Time ...
- 怎样区分JQuery对象和Dom对象 常用的写法
第一步,http://www.k99k.com/jQuery_getting_started.html 第二步,新手先仔细得全部看一遍jQuery的选择器,很重要!!! (http://shawphy ...
- LevelDB windows vs2013 c++编译和测试
引用: (src1) :http://download.csdn.net/detail/flyfish1986/8881263(这里有下载地址) (src2) :http://blog.csdn.ne ...
- Gradle实战教程之依赖管理
这是从我个人网站中复制过来的,原文地址:http://coolshell.info/blog/2015/05/gradle-dependency-management.html,转载请注明出处. 简要 ...
- OpenJudge 2775 文件结构“图”/ Poj 1057 FILE MAPPING
1.链接地址: http://bailian.openjudge.cn/practice/2775 http://poj.org/problem?id=1057 2.题目: 总时间限制: 1000ms ...
- <s:iterator></s:iterator>循环指定输出,(status的方法使用)
list集合中的实体的一个属性是另一个实体的集合(如下) public class PetInfo { private int petId; private String private Set< ...
- Python之实现一个简易计算器
自己动手写计算器 一.功能分析 用户输入一个类似这样 3*( 4+ 50 )-(( 100 + 40 )*5/2- 3*2* 2/4+9)*((( 3 + 4)-4)-4) 这样的表达式,假设表达式里 ...
- jQuery 快速入门教程
内容目录 jQuery 入门 什么是jQuery 如何使用jQuery jQuery的运行原理 如何选择jQuery版本 ready() 准备就绪时执行代码 jQuery 核心:选取元素 使用jQue ...
- ECMAScript一元操作符
在ECMAScript中提供了一元操作符进行简单的运算,一元操作符是ECMAScript中最简单的操作符,它只能对一个值进行操作. 一元操作符有两种类型,一种是递增和递减操作符,一种是一元加和一元减操 ...