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

这是一个静态的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. http返回值含义

    1xx:信息响应类,表示接收到请求并且继续处理2xx:处理成功响应类,表示动作被成功接收.理解和接受 3xx:重定向响应类,为了完成指定的动作,必须接受进一步处理4xx:客户端错误,客户请求包含语法错 ...

  2. Webpack学习笔记九 webpack优化总结

    webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, ...

  3. Mongodb在window上启动

    MongoDB 是目前在IT行业非常流行的一种非关系型数据库(NoSql),其灵活的数据存储方式备受当前IT从业人员的青睐.这里主要讲如何在windows平台下安装MongoDB. 安装最新版本mon ...

  4. MySQL备份恢复之mysqldump

      Preface       The day before yesterday,there's a motif about the lock procedure when backing up My ...

  5. 使用Ansible实现nginx+keepalived高可用负载均衡自动化部署

    本篇文章记录通过Ansible自动化部署nginx的负载均衡高可用,前端代理使用nginx+keepalived,端web server使用3台nginx用于负载效果的体现,结构图如下: 部署前准备工 ...

  6. 快速解决Kali 更新失败问题

    Kali Linux 2018.4 初学者在安装完kali 系统后第一件事往往就是更新软件,但在更新过程中通常会出现各种各样的问题,比如更新提示不含有 'maincontrib' 组件,跳过配置文件 ...

  7. 解决WordPress设置错误的url网站不能访问的问题

    通过WordPress后台首选项更改了网站url地址之后,网站就会出现访问不了的情况,一般来说,网站后台也登陆不上去了,我从网上寻找到了四种方法,这四种方法前三种都是需要登陆到后台的,但实际上出错后, ...

  8. http协议中的状态码（status code），超文本传输协议状态码

    HTTP协议,又叫超文本传输协议. 在项目的开发过程中,前后端交互,这个用的是最多的,在后端给我的的接口调用时,我们往往先查看这个协议的状态码,状态码正常了,才进一步去看我们从后太拿的数据,是否为我们 ...

  9. mysql中tinyint、smallint、mediumint,int 和bigint 的区别

    1:字节的定义:字节(Byte):字节是通过网络传输信息(或在硬盘或内存中存储信息)的单位. 一个英文字母(不分大小写)占一个字节的空间,一个中文汉字占两个字节的空间 2.在mysql中一个汉字占三个 ...

  10. 20190105-打印字母C,H,N,口等图像和杨辉三角

    1. 打印字母C ****** * * * * ****** def print_c(n): print('*' * n) for i in range(n): print('* ') print(' ...