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

这是一个静态的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. SpringBoot学习15：springboot异常处理方式5(通过实现HandlerExceptionResolver类)

    修改异常处理方式4中的全局异常处理controller package com.bjsxt.exception; import org.springframework.context.annotati ...

  2. php+高德地图webapi 高德jsapi 实现 当前位置与目标位置距离 并按照距离排序（坐标逆转换）

    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak='自己 ...

  3. Python接受流式输入

    随笔记录——Python接受终端入若干行输入 Python接受终端的若干行输入时,比较常用的input()不再好用. 1. 导入sys模块: import sys 2. for循环接受输入: for ...

  4. hadoop生态搭建（3节点）-05.mysql配置_单节点

    # ==================================================================node1 # ======================== ...

  5. django的模型和基本的脚本命令

    python manage.py startproject project_name  创建一个django项目 python manage.py startapp app_name  创建一个app ...

  6. python3爬虫之开篇

    写在前面的话: 折腾爬虫也有一段时间了,从一开始的懵懵懂懂,到现在的有一定基础,对于这一路的跌跌撞撞,个人觉得应该留下一些文字性的东西,毕竟好记性不如烂笔头,而且毕竟这是吃饭的家伙,必须用心对待才可以 ...

  7. Scrapy核心组件

    • 引擎(Scrapy)用来处理整个系统的数据流处理, 触发事务(框架核心) • 调度器(Scheduler)用来接受引擎发过来的请求, 压入队列中, 并在引擎再次请求的时候返回. 可以想像成一个UR ...

  8. vue---day02

    1. 全局组件的注册 - 创建根实例的时候,data可以是object,也可以是函数 - 创建组件的时候,data必须是函数 1.1 创建 Vue.component('global-componen ...

  9. R语言学习笔记（四）：apply，sapply，lapply，tapply，vapply以及mapply的用法

    apply() apply(m,dimcode,f,fargs) m 是一个矩阵. dimcode是维度编号,取1则为对行应用函数,取2则为对列运用函数. f是函数 fargs是f的可选参数集 > ...

  10. (原创)用Verilog实现一个参数化的呼吸灯(Verilog，CPLD/FPGA)

    1.Abstract     观察到一个有趣的现象,每当把Apple笔记本合上的时候,那个白色的呼吸灯就会反复地由暗渐明,然后又由明渐暗,乍一看就像Apple笔记本在打盹休息一样,十分可爱!于是突发奇 ...