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

这是一个静态的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. Java研究

    Strap   箱线图  峰度  随机过程  马尔科夫  超几何分布  贝叶斯公式 随机变量    德摩根   功率谱   残差  吸收壁   平稳随机    chorst 深入JVM OSGI    ...

  2. js替换字符串中的空格，换行符\r\n或\n替换成<br>

    为了让回车换行符正确显示,需要将 \n 或 \r\n 替换成 <br>.同样地,将空格替换存  .这里我们通过正则表达式来替换. 一.替换所有的空格.回车换行符 //原始字符串 var s ...

  3. Java分享笔记：创建多线程 & 线程同步机制

    [1] 创建多线程的两种方式 1.1 通过继承Thread类创建多线程 1.定义Thread类的子类,重写run()方法,在run()方法体中编写子线程要执行的功能. 2.创建子线程的实例对象,相当于 ...

  4. 转：Zookeeper客户端Curator使用详解

    原文:https://www.jianshu.com/p/70151fc0ef5d Zookeeper客户端Curator使用详解 前提 最近刚好用到了zookeeper,做了一个基于SpringBo ...

  5. fullPage.js全屏滚动插件API

    API sectionsColor:['green','orange','red','lime']; //设置背景颜色 可以为每一个section设置background-color属性 contro ...

  6. vuex组件 vuex-persistedstate

    vuex用于管理项目中的全局状态,但是我们一刷新vuex中保存的全局状态就会被全部初始化,虽然我们也可以同事缓存到storage中做两步操作,但是vuex-persistedstate组件已经帮我们完 ...

  7. thinkphp验证码实现。

    作为我大天朝的程序员,如果不会点thinkphp框架确实有点说不过去了(虽然作为菜鸟的我才入坑没几个月).不过不会也没关系,很简单的一个php框架.今天为大家介绍的是thinkphp如何实现验证码的功 ...

  8. 20180803UnionPay银联支付

    LNMP环境下开发的银联支付(测试环境) 1.准备条件 a.银联支持API:https://open.unionpay.com/ajweb/help/api b.选择开发软件包 图示: c.我选择: ...

  9. python爬虫：爬取链家深圳全部二手房的详细信息

    1.问题描述: 爬取链家深圳全部二手房的详细信息,并将爬取的数据存储到CSV文件中 2.思路分析: (1)目标网址:https://sz.lianjia.com/ershoufang/ (2)代码结构 ...

  10. HDU暑假多校第四场J-Let Sudoku Rotate

    一.题意 Sudoku is a logic-based, combinatorial number-placement puzzle, which is popular around the wor ...