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

这是一个静态的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. Javascript中的this对象

    对于this的使用,我们最常遇到的主要有,在全局函数中,在对象方法中,call和apply时,闭包中,箭头函数中以及class中: 我们知道this对象是在运行时基于函数的执行环境绑定的,在调用函数之 ...

  2. 使用第三方工具连接docker数据库

    一.背景 ​ 为了把测试环境迁移至docker上,我在centos7上安装了docker,具体安装方法可参考<CentOS7下安装docker>本文不再论述.有些同学可能会有疑问,为什么要 ...

  3. 快速玩转linux(4)

    websever安装配置 Nginx & Apache 并发量. Apache基本操作 解释 命令 安装 yum install httpd 启动 service httpd start 停止 ...

  4. 老刘的Linux小课堂开课了

    经过几个月的等待,刘遄老师的LINUX课堂终于开课了,从现在开始,我会在博客里将每一堂课的笔记记录下来,记录自己的每一步成长. 由于是第一次开课,老刘只是简单的介绍了LINUX相关的一些概念,比如开源 ...

  5. JavaScript实现图片切换

    页面内容:一个按钮标签  一个Img标签 实现原理:通过修改Img标签的src属性,实现图片的切换 备注:代码中flag变量仅仅用作标记,也可以直接用Img标签的src属性进行判断,不过在判断时候不能 ...

  6. Python核心框架tornado的异步协程的2种方式

    什么是异步? 含义 :双方不需要共同的时钟,也就是接收方不知道发送方什么时候发送,所以在发送的信息中就要有提示接收方开始接收的信息,如开始位,同时在结束时有停止位 现象:没有共同的时钟,不考虑顺序来了 ...

  7. flutter开发之配置环境以及一些问题的处理方案~

        今天flutter1.0已经发布了,有没有一点小小的兴奋,为了纪念这个令人激动的日子,我决定发一篇flutter的基本环境搭建的教程送给大家:) 由于这是一篇关于flutter配置环境的教程, ...

  8. Apache Maven（四）：依赖

    依赖管理是Maven的特性之一,它是用户最为熟悉的特性之一,也是Maven擅长的领域之一.管理单个项目的依赖并没有太大困难,但是当您开始处理由数十或数百个模块组成的多模块项目和应用程序时,Maven可 ...

  9. keil5 mdk使用ST-Link II下载出现cannot halt the core解决办法

    在正常的程序里面,我添加了MB85RS16(spi flash)这个外设驱动代码后,使用ST-Link II下载就出现cannot halt the core. 这个现象之前出现过1次,但是解决办法忘 ...

  10. ts包、表、子表、section的关系

    我们经常接触到创建 DEMUX,注册 Filter 过滤数据, 通过回调过滤出 section 数据,然后我们对 section 数据做具体的解析或者其他操作. 我们这里说的 section 就是段的 ...