看到音乐播放器播放界面的唱片一直旋转，突然想到在网页中的一直旋转效果，所有特地查了一下分享出来

这是一个静态的div,然后把它旋转动起来。效果请看右上角的音乐播放按键一样。

代码如下：

<html>

<head>

<meta charset="UTF-8">

<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>

<style>

#xuanzhun{

 -webkit-transition-property: -webkit-transform;

    -webkit-transition-duration: 1s;

    -moz-transition-property: -moz-transform;

    -moz-transition-duration: 1s;

    -webkit-animation: rotate 3s linear infinite;

    -moz-animation: rotate 3s linear infinite;

    -o-animation: rotate 3s linear infinite;

    animation: rotate 3s linear infinite;

}

@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}

    to{-webkit-transform: rotate(360deg)}

}

@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}

    to{-moz-transform: rotate(359deg)}

}

@-o-keyframes rotate{from{-o-transform: rotate(0deg)}

    to{-o-transform: rotate(359deg)}

}

@keyframes rotate{from{transform: rotate(0deg)}

    to{transform: rotate(359deg)}

}

</style>

</head>

<body>

<div id="xuanzhun" style="width: 30px; height: 30px; background-color: aquamarine;">

</div>

</body>

</html>

最重要的是style中的css部分。

css实现div一直旋转的更多相关文章

  1. 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HT ...

  2. No.5 - 纯 CSS 制作绕中轴旋转的立方体

    body{ background-color: #000; margin:; padding:; } main{ perspective: 800px; } .cube{ transform-styl ...

  3. 简单说 用CSS做一个魔方旋转的效果

    说明 魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释 我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...

  4. css控制div的各种形状

    css控制div的各种形状 CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形,从而可以减少图片的使用. 以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可 ...

  5. CSS之div和span标签

    div和span是非常重要的标签,div的语义是division"分割": span的语义就是span"范围.跨度". 这两个东西,都是最最重要的"盒 ...

  6. css实现div的高度填满剩余空间

    css实现div的高度填满剩余空间 .top{ width: 100%; height: 70px;} .bottom{background-color: #cc85d9;width: 100%;po ...

  7. html中css、div命名规范

    html中css.div命名规范 1.类class的命名规范示例 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column ...

  8. CSS实现Div透明，而显示在上面的文字不透明，但也可看到显示在下面的图片内容

    CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明 ...

  9. CSS实现div居中

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

  1. BZOJ2754: [SCOI2012]喵星球上的点名(AC自动机)

    Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 2816  Solved: 1246[Submit][Status][Discuss] Descript ...

  2. Mac上从gitlab上拉项目实战总结

    建立公钥,私钥 https://blog.csdn.net/jigongdajiang/article/details/65441923 2019-01-03 比较喜欢使用图形化界面

  3. 字符编码 ASCII unicode UTF-8

    字符串也是一种数据类型,但是,字符串比较特殊的是还有一个编码问题. 因为计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.最早的计算机在设计时采用8个比特(bit)作为一个字节(b ...

  4. ELK 分布式日志实战

    一.  ELK 分布式日志实战介绍 此实战方案以 Elk 5.5.2 版本为准,分布式日志将以下图分布进行安装部署以及配置. 当Elk需监控应用日志时,需在应用部署所在的服务器中,安装Filebeat ...

  5. 使用Jcrop-canvas画布-制作前端图像裁剪

    写在前面 –公司有这个需求,安排调查 –目前各大网站都是采用的-前端做裁剪返回坐标-由后端来做到裁剪 –而使用html-canvas画布可以直接前端裁剪并返回base64流-ajax可以直接下载保存 ...

  6. jenkins+maven+docker集成java发布(一)自动发布

    JAVA项目持续集成发布 标签(空格分隔): java jenkins 微服务中持续集成自动发布是很重要的一个环节,将不同的模块应用自动部署到一台或者N台服务器中如果采用人工部署的方式不太现实 git ...

  7. Python学习：运算符

    简单运算符: +(加) 两个对象相加 -(减) 从一个数中减去另一个数,如果第一个操作数不存在,则假定为零 *(乘) 给出两个数的乘积,或返回字符串重复指定次数后的结果   Eg.'haha' * 3 ...

  8. C语言结构体的学习，以及gdb的调式

    #include <stdio.h> #include <string.h> #define format "%d\n%s\n%f\n%f\n%f\n" t ...

  9. R语言学习笔记（八）：零碎知识点(16-20)

    16--complete.cases( ) complete.case()可以判断对象中是否数据完全,然后返回TRUE, FALSE 这一函数在去除数据框中缺失值时很有用. > d kids a ...

  10. ES6--Set之再理解

    Set 其实2016年就看过阮大神的ECMAScript 6 入门,当时看了Set之后,大致看懂了,但事实上根本没有理解Set到底是什么,所以更记不住,平时做项目大多用到的还是ES5的传统写法,以至于 ...