完成的效果如下
查看效果并下载
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; }
.ejectBtn a.dash { border-width: 0 0 4px; border-color: transparent transparent #fff; height: 0; width:16px; left: -8px; top: 4px; }
- 大小: 31.2 KB
- 大小: 2.6 KB
- 大小: 2.6 KB
- 大小: 11.7 KB
分享到:
相关推荐
感谢各位mjj对本项目的支持与帮助 新版版emby把媒体信息的...可以通过CSS屏蔽设置入口和播放按钮(默认匹配简体中文界面) 设置入口 (可选)完美屏蔽播放按钮还需要更改服务器的listview.js文件 路径 X:\EMBY sXerver\
第二:主要还是来学习 CSS3 的线性、径向渐变、旋转、缩放以及动画。 图形解析 1、背景(径向渐变) 2、玩家(player)加载动画(线性渐变) 3、背景镂空旋转正方形 4、正方形文字放大动画 5、文字按钮制作 下面我们...
控制按钮 播放/暂停 快退 快进 以前的 下一个 重复 播放清单 最大化 打开文件 静音/取消静音 快捷键 N〜下一个 P〜上一个 M〜静音/取消静音 空格键〜播放/暂停 左箭头〜快退 右箭头〜快进 向上箭头〜增大音量 向下...
一个React组件,使设置视频变得非常容易,当用户将鼠标悬停在该视频上时,该视频将播放。 这对于设置缩略图将在悬停时播放视频预览特别有用。 特征 开箱即用的鼠标和触摸屏交互支持 轻松添加自定义缩略图和加载状态 ...
Essential Audio Player JS是一种简单,干净,最小的精简型JavaScript / HTML5 / CSS Web音频播放器。 没有不必要的控件,只有一个按钮和一个轨道(可选)。 纯JavaScript,无框架依赖性。 基于<audio>标签的...
音乐播放器 音乐播放器是使用JavaScript,CSS和HTML开发的有趣且简单的项目。 这个项目是一个有趣的项目,可以收听我们的自制歌曲收集应用程序。 用户可以播放不同类型... 用户可以单击前进和后退播放按钮来更改歌曲。
jQuery图片特效smooth-rotatable-images-css3-jquery jQuery图片特效tz-todoapp jQuery图片特效youtube-player jQuery图片自动轮播淡入淡出的幻灯插件iFadeSlide jQuery大气banner带时间线自动播放的焦点图轮番切换...
Light-AudioPlayer A Light AudioPlayer with HTML5, jQuery and CSS3. | Music: See you again -...元素或提供的音频文件时,将使用Quick Time, Windows Media Player来播放音频 ###没有图片 全都是CSS做的,兄弟 #
向按钮添加功能(播放/暂停,音量,静音和搜索栏) 网络-v1.0 :hammer_and_wrench: 技术 在项目建设中使用了以下工具: :定位,缩放等 :结构和效果 现在时代 我可以用吗 实现CSS 材质图标 :rocket: 如何...
音乐播放器 使用HTMLAudioElement API和自定义设计构建的音乐播放器。 项目规格书 自定义用户界面 显示乐曲封面和其他详细信息 播放和暂停 在歌曲之间切换
浩海更新历史清单:V1: 提取了《游戏频道》初始版本使用的播放器源代码进行共享并命名为《在线多格式音频播放器》1,包含两个播放器控件(Media Player和Real Player)2,支持本地文件和网络文件的混合式列表播放模式3,...
播放器介绍:1 拥有了更强大的列表处理能力 2,全新引入了选段播放功能 3,遇到错误连接或者断链可以自动转到下首播放 4,支持了动态解析地址的播放功能 4,内含Realplayer、Mediaplayer和Flashplayer三大播放引擎,基本...
播放器介绍:1 拥有了更强大的列表处理能力 2,全新引入了选段播放功能 3,遇到错误连接或者断链可以自动转到下首播放 4,支持了动态解析地址的播放功能 4,内含Realplayer、Mediaplayer和Flashplayer三大播放引擎,基本...
8.24 通过内嵌Flash Player播放FLV电影 8.25 WebView网站Session Cookie判断与访问 8.26 文件下载管理器 8.27 手机Socket联机拨号服务器 第9章 Google服务与Android完美整合 9.1 Google账号验证Token 9.2 Google搜索...
播放器介绍:1 拥有了更强大的列表处理能力 2,全新引入了选段播放功能 3,遇到错误连接或者断链可以自动转到下首播放 4,支持了动态解析地址的播放功能 4,内含Realplayer、Mediaplayer和Flashplayer三大播放引擎,基本...
livescribe 3 智能笔的离线播放器。 该播放器是基于以下文章的 livescribe pencast 的完全可操作的离线播放器:[ ] css 样式表的一些快速技巧,结合用于控件的图像,意味着 [ ] 的全部功能可以离线使用。 快速...
浩海更新历史清单:V1: 提取了《游戏频道》初始版本使用的播放器源代码进行共享并命名为《在线多格式音频播放器》1,包含两个播放器控件(Media Player和Real Player)2,支持本地文件和网络文件的混合式列表播放模式3,...
浩海更新历史清单:V1: 提取了《游戏频道》初始版本使用的播放器源代码进行共享并命名为《在线多格式音频播放器》1,包含两个播放器控件(Media Player和Real Player)2,支持本地文件和网络文件的混合式列表播放模式3,...
MusicPlayer.github.io 它是使用HTML和CSS制作的音乐播放器设计,其中包括各种动画和悬停效果,设计... 它由两页组成:主页和SingleLit播放列表页,当我们将鼠标悬停在Artists图片上时,单击“播放”按钮会出现该页面。