类似百度音乐唱片播放时CD图片不停旋转的实现

效果图

 1 html代码
2 <imgsrc="img/logo.png"class="img-responsive"style="float: left;"/>
3 css3代码
4 # img{
5 -webkit-transition:-webkit-transform 5s;
6 -webkit-transform: rotate(0deg);
7 -moz-transform: rotate(0deg);
8 -webkit-transform-origin: center;
9 -moz-transform-origin: bottom center;
10 -webkit-animation: css_a 5s;
11 animation: css_a 5s;
12 -moz-animation: css_a 5s;
13 -webkit-animation-duration:10s;
14 -webkit-animation-timing-function: linear;
15 /*
16 * 不停的动
17 */
18 -webkit-animation-iteration-count: infinite;
19 /* Safari and Chrome */
20 -moz-animation-timing-function: linear;
21 /*
22 * 不停的动
23 */
24 -moz-animation-iteration-count: infinite;
25 }
26 @-webkit-keyframes css_a {from { /*chrome */
27
28 -webkit-transform: rotate(0deg);
29 -ms-transform: rotate(0deg);
30 /* IE 9 */
31 -moz-transform: rotate(0deg);
32 /* Firefox */
33 }
34
35 to {
36
37 -webkit-transform: rotate(360deg);
38 -ms-transform: rotate(360deg);
39 /* IE 9 */
40 -moz-transform: rotate(360deg);
41 /* Firefox */
42 }
43
44 }
45 @-moz-keyframes css_a {from { /*火狐 */
46 -webkit-transform: rotate(0deg);
47 -ms-transform: rotate(0deg);
48 /* IE 9 */
49 -moz-transform: rotate(0deg);
50 /* Firefox */
51 }
52
53 to {
54 -webkit-transform: rotate(360deg);
55 -ms-transform: rotate(360deg);
56 /* IE 9 */
57 -moz-transform: rotate(360deg);
58 /* Firefox */
59 }
60 }
 

类似百度音乐唱片播放时CD图片不停旋转的实现的更多相关文章

  1. ueditor插入百度音乐无法播放-403 问题

    简单记录一下,其实403是因为百度音乐设置了禁止外部连接引用,因此 几乎所有的百度音乐播放都会提示403. 注意:预览页面(dialog/music/music.html)和实际插入页面(uedito ...

  2. css 让背景图片不停旋转

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. css3动画应用-音乐唱片旋转播放特效

    css3动画应用-音乐唱片旋转播放特效 核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...

  4. 与众不同 windows phone (40) - 8.0 媒体: 音乐中心的新增功能, 图片中心的新增功能, 后台音乐播放的新增功能

    [源码下载] 与众不同 windows phone (40) - 8.0 媒体: 音乐中心的新增功能, 图片中心的新增功能, 后台音乐播放的新增功能 作者:webabcd 介绍与众不同 windows ...

  5. Ubuntu 14.04 用户如何安装深度音乐播放器和百度音乐插件

    播放本地音乐或者收听国外的音乐电台,Ubuntu 14.04 自带的音乐播放器 Rhythmbox 完全能够满足,但是如果你想有像酷狗那样的国内播放器就需要折腾一下,还好有深度音乐播放器,这是一款完全 ...

  6. MuPlayer『百度音乐播放内核』

    MuPlayer『百度音乐播放内核』 —— 跨平台.轻量级的音频播放解决方案. 多端(PC & WebApp)通用,统一的API调用方式 HTML5 Audio与Flash内核的平滑切换(支持 ...

  7. 百度音乐API抓取

    百度音乐API抓取 前段时间做了一个本地音乐的播放器 github地址,想实现在线播放的功能,于是到处寻找API,很遗憾,不是歌曲不全就是质量不高.在网上发现这么一个APIMRASONG博客,有“获取 ...

  8. python3_爬虫_爬百度音乐

    工具及环境 1.操作系统:windows 64位系统 2.软件工具:谷歌浏览器.pycharm集成开发工具 3.第三方库:request 注:如果第三方库搭建有困难,请看博客:https://www. ...

  9. SpringMVC+springSecurity+flexPaper 配置--类似百度文库在线预览

    背景:现在项目需要做一个类似百度文库的在线预览功能,在网上找了下很多人推荐使用FlexPaper,所以今天尝试学习了FlexPaper顺便集成到现有的框架中 由于网上目前的说的都不是很详细,所以现在记 ...

随机推荐

  1. keil优化等级设置

    附表:Keil C51中的优化级别及优化作用 级别说明 0 常数合并:编译器预先计算结果,尽可能用常数代替表达式.包括运行地址计算. 优化简单访问:编译器优化访问8051系统的内部数据和位地址. 跳转 ...

  2. Android 首次进入应用时加载引导界面

    功能需求:首次进入应用时加载引导界面 思路: 1.首次进入,怎么判断?查看SharedPreferences中某个字段 2.基本上每个应用都有个进入实际功能是的动画加载页面,我们可以在该Activit ...

  3. ruby迭代起基础

    “循环”会用在程序中的各种地方.而在循环的地方善用“迭代器”,则是熟练进行Ruby程序设计的重要关键. 不过,迭代器确实有比较抽象的地方,语法也有点怪异(尤其是yield的用法),光是依靠文字说明.看 ...

  4. HDU2048(标准错排问题)

    错排问题. 将错排方法数记为D(n). 1. 把第n个元素放在一个位置,比如k,有n-1种方法. 2. 编号为k的元素有两种放法. <1> 把它放到位置n.那么对于剩下的n-2个元素,就有 ...

  5. 在mac上利用homebrew安装软件

    在mac经常需要安装一些软件,你可以通过app store下载,或者可以通过浏览袭搜索下载.这里介绍通过homebrew安装一些软件,它会自动为你下载一些软件的相关依赖,免去安装的烦恼. 首先我们需要 ...

  6. java—— 笔记链接

    深入Java关键字null 链接:   http://tieba.baidu.com/f?kz=510289524 颜色代码 链接:  http://wenku.baidu.com/link?url= ...

  7. 我与Ubuntu的5年共成长

    初次接触Ubuntu那还是2010年的初夏,那年大学二年级即将结束,为了增加计算机学院学生的技术能力和就业竞争力,学校组织了很多培训机构.公司企业来学校做技术宣讲.分享等 记得有一个企业是做Mp3 M ...

  8. Django 邮件推送 解决附件中文名字乱码

    Django邮件功能,详情可看官方文档(https://docs.djangoproject.com/en/1.10/topics/email/). 最近做这个功能时遇到的问题,发送附件,收到后中文名 ...

  9. git commit error about 'vi'

    error: There was a problem with the editor 'vi'. Please supply the message using either -m or -F opt ...

  10. Android Studio中解决Gradle DSL method not found: &#39;android()&#39;

    近期导入as的项目出了这种问题 这个问题困扰了我非常长时间,好吧,搜了半天全都是runProguard的.最后在stackoverflow上搜到解决的方法了: http://stackoverflow ...