js旋转

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

<style>

        div{

        background: repeating-linear-gradient(45deg,red,yellow 20%);

        width: 200px;

        height: 200px;

        border-radius: 50%;

        text-align: center;

        line-height: 200px;

        animation-name: MX;

        animation-duration:6s;

        animation-timing-function:linear;

        /*动画速度曲线*/

        animation-iteration-count:infinite;

        /*动画无限次播放*/

        transition-property: height;

        /*2b转换需要属性的名称*/

        transition-duration: 6s;

        /*2d转换时间*/

        transition-timing-function: linear;

         /*转换速度曲线*/}

        @keyframes MX

        {

        from{font-size: 0px;color:black;}

        to{font-size: 80px;color:white;}

        }

        /*#ym:hover{

            animation-play-state:paused;

            停止2d转换

            }*/

</style>

</head>

<body>

<script>

    var x=0;

    var timerid;

    var fx;

    function start(){

        clearInterval(timerid)

        timerid=setInterval(function(){

        if(x==0)

          fx=true

        if(fx==true)

          x=x+1;

        if(x==360)

          fx=false

        if(fx==false)

           x=x-1

        document.getElementById("ym").style.transform='rotate(' + x + 'deg)';

    },30)

}

// clearInterval() 方法可取消由 setInterval()函数佘定德定时执行操作。

// clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

// setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

</script>

<!--onmouseover="clearInterval(timerid)" onmouseout="start()"-->

<div id="ym" >明</div>

<button onclick="start()">开始</button>

<button onclick="clearInterval(timerid)">停止</button>

</body>

</html>

css旋转

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        *{padding: 0;

        margin: 0;}

        #a{

            width:500px;

            height:500px;

            margin: 300px auto;

            transform: translate(-50%,-50%);

            background: repeating-linear-gradient(60deg,#0ff,#00f,#0f0 10%);

            border-radius:50%;

            /*animation:run 6s linear 5s infinite alternate;*/

            animation-name: run;

            animation-duration:6s;

            animation-timing-function: linear;

            animation-delay:0s;

            animation-iteration-count:infinite;

            animation-direction: /*normal|*/alternate;

        }

        #a:hover{

            animation-play-state:paused;

        }

         p{

             position: absolute;

             top: 50%;

             left: 50%;

             transform: translate(-50%,-50%);

             /*利用绝对定位和2d转换进行水平垂直居中*/

         }

        @keyframes run{

            from{

                transform:rotate(0deg);font-size: 0px;color:black;

            }

            to{

                transform:rotate(360deg);font-size: 80px;color:white;

            }

        }

    </style>

</head>

<body>

    <div id="a"><p>我</P></div>

</body>

Document

JS旋转和css旋转的更多相关文章

  1. canvas星空背景特效+CSS旋转相册学习

    今天在看帖子的时候,看到了个有趣的css旋转相册,刚好之前做了一个星空背景dome,这里给大家分享下代码: 旋转相册参考:https://blog.csdn.net/gitchatxiaomi/art ...

  2. IOS6屏幕旋转详解（自动旋转、手动旋转、兼容IOS6之前系统）

    转自 http://blog.csdn.net/zzfsuiye/article/details/8251060 概述: 在iOS6之前的版本中,通常使用 shouldAutorotateToInte ...

  3. js中获取css属性

    直接获取 window.onload = function() { var but = document.getElementById('button'); var div = document.ge ...

  4. 区域及分离、Js压缩、css、jquery扩展

    后台管理区域及分离.Js压缩.css.jquery扩展 本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做 ...

  5. vue脚手架使用swiper /引入js文件/引入css文件

    1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...

  6. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  7. 平衡树及笛卡尔树讲解(旋转treap,非旋转treap,splay,替罪羊树及可持久化)

    在刷了许多道平衡树的题之后,对平衡树有了较为深入的理解,在这里和大家分享一下,希望对大家学习平衡树能有帮助. 平衡树有好多种,比如treap,splay,红黑树,STL中的set.在这里只介绍几种常用 ...

  8. Comparing Code Playgrounds Codepen, JSFiddle, JS Bin, Dabblet, CSS Deck, and Liveweave

    What is a code playground? Codepen, JSFiddle, JS Bin, Dabblet, CSS Deck, and Liveweave are HTML, CSS ...

  9. APP---发布动态、朋友圈类似，多张图片动响应式正方形展示布局 vue.js，aui.css，apiclouv

    环境:vue.js,aui.css,apicloud 1.没做控制之前.图片真实长度宽度. 2.下面用js控制高度 js部分 //js 部分 //先动态的获取属性宽度 var box4_col3 = ...

随机推荐

  1. MariaDB简单操作

    RHEL7之后操作系统带的数据库都是mariadb,跟mysql一样用 1.安装客户端和服务端 [root@localhost ~]# yum install mariadb mariadb-serv ...

  2. VR中的“寻路（wayfinding）”

    虚拟现实(VR)中很重要的一个问题就是Locomotion(用户在VR中的移动).这个Locomotion分为两种,一种是点对点的,如传送门的方式,一种是包含了可以操控的中间过程的,这种被称为“导航( ...

  3. git 查看日志记录

    1.git log 如果日志特别多的话,在git bash中,按向下键来查看更多,按q键退出查看日志. 2.git show 查看最近一次commit内容,也可以后面加commit号,单独查看此次版本 ...

  4. 【集群监控】JMX exporter+Prometheus+Grafana监控Hadoop集群

    下载jmx_exporter的jar包 https://repo1.maven.org/maven2/io/prometheus/jmx/jmx_prometheus_javaagent/0.3.1/ ...

  5. Scala 异常处理

    Scala 异常处理: parseURL("www.baidu.com") 会返回一个 Success[URL] ,包含了解析后的网址, 反之 parseULR("www ...

  6. Scala Try Catch Finally

    Scala Try Catch Finally: 在Java中返回值优先级顺序:finally最高, try,catch 选其一,try中抛异常,返回catch,不抛异常,返回try,. public ...

  7. Newtonsoft.Json.Linq 常用方法总结

    目录 1.Entity to Json 1.1.准备工作 1.2.Entity to Json 1.3.Json to Entity 2.Linq To Json 2.1.创建对象 2.2.从 Jso ...

  8. 294 div2 C. A and B and Team Training

    C. A and B and Team Training 题目:A and B are preparing themselves for programming contests. An import ...

  9. springmvc中重定向该如何处理？

    如果登录成功,会重定向到系统首页 response.sendRedirect("jsp/frame.jsp"); 在springmvc中,应该如何处理?是否可以直接使用 retur ...

  10. ORM查询2

    目录 十三式 2式(针对外键查询优化) select_related和prefetch_related prefetch_related 查询返回值类型 不等式查询 关键字查询 时间查询 跨表查询 组 ...