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. helm部署Filebeat + ELK

    helm部署Filebeat + ELK 系统架构图: 1) 多个Filebeat在各个Node进行日志采集,然后上传至Logstash 2) 多个Logstash节点并行(负载均衡,不作为集群),对 ...

  2. 通过父级id获取到其下所有子级（无穷级）——Mysql函数实现

    [需求]某用户只能查看其自己信息及其下级信息,涉及通过该用户所在部门获取其下所有部门(多层)id集合. 步骤一:对数据库进行设置: set global log_bin_trust_function_ ...

  3. .NET Core 3.0 可卸载程序集原理简析

    因为最近在群里被问到如何理解 .NET Core 3.0 可卸载程序集,所以就写了这篇简单的分析. 因为时间实在很少,这篇文章只简单的罗列了相关的代码,请配合官方说明文档理解. 另外,书籍<.N ...

  4. Tomcat源码分析一：编译Tomcat源码

    Tomcat源码分析一:编译Tomcat源码 1 内容介绍 在之前的<Servlet与Tomcat运行示例>一文中,给大家带来如何在Tomcat中部署Servlet应用的相关步骤,本文将就 ...

  5. mysql 分页offset过大性能问题解决思路

    在公司干活一般使用sqlserver数据库.rownumber分页贼好用. 但是晚上下班搞自己的事情就不用sqlserver了.原因就是自己的渣渣1核2g的小服务器完全扛不住sqlserver那么大的 ...

  6. 利用procedure批量插入数据

    正文   要求在页面查询到5000条数据,为了方便插入,准备用shell脚本写curl命令调用自己写的代码接口,但是速度慢,而且写的时候遇到点儿小问题,故用sql语句写了这个功能   由于operat ...

  7. 使用Jmeter并发websocket协议项目

    1.安装Jmeter 网址:http://jmeter.apache.org/下载 2.启动Jmeter \apache-jmeter-5.1.1\bin\jmeter.bat 3.安装‘Plugin ...

  8. pycharm 安装第三方包步骤

    pycharm 安装第三方包步骤: 完成.

  9. python selenium下拉框定位

    一.前言 总结一下python+selenium select下拉选择框定位处理的两种方式,以备后续使用时查询: 二.直接定位(XPath) 使用Firebug找到需要定位到的元素,直接右键复制XPa ...

  10. 如何正确的在 Android 上使用协程 ？

    前言 你还记得是哪一年的 Google IO 正式宣布 Kotlin 成为 Android 一级开发语言吗?是 Google IO 2017 .如今两年时间过去了,站在一名 Android 开发者的角 ...