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. 什么是VR中的vection？

    Vection是VR领域的一个专有名词,其义指“在虚拟现实中给人带来‘移动’(self-motion)感觉的认知因素”1.也就是说,vection就是指那些给玩家带来“我正在这个虚拟环境中移动”这种感 ...

  2. ueditor的初始化赋值

    ue.ready(function () {ue.setContent('初始内容'); //赋值给UEditor });

  3. Python 爬虫入门实战

    1. 前言 首先自我介绍一下,我是一个做 Java 的开发人员,从今年下半年开始,一直在各大技术博客网站发表自己的一些技术文章,差不多有几个月了,之前在 cnblog 博客园加了网站统计代码,看到每天 ...

  4. python 3.7 使用MP3play 模块

    因工作需要,做了一个QQ机器人语音播报程序.主要思路 是通过 酷Q 获取QQ消息取出有效信息. 根据信息在百度AI上合成语音,然后本地播放. 在播放语音的时候用了好几个模块  pygame .pyme ...

  5. php获取文件的文件名（误区）

    文件路径:$path = '/home/files/1234.jpg'; php获取文件名,大家应该是轻车熟路了,写个小函数,分分钟 <?php //获取文件名 function get_fil ...

  6. Mint(Linux)系统设置优化及其常用软件安装笔记

    LInux /home下中文目录如何修改成英文? 打开终端,在终端中输入命令: export LANG=en_US xdg-user-dirs-gtk-update 跳出对话框询问是否将目录转化为英文 ...

  7. python编程基础之二十二

    字典:字典属于可变对象,但是不属于序列,内部是通过哈希方式存储的,内部保存的是一个个键值对key:value 字典的键是唯一的, 字典查找速度比较快 d1 = {}  #括号里面用键值对表示 d2 = ...

  8. python编程基础之十九

    字符串判断常用函数: str.isalpha()  # 判断是否是全字母 str.isdigit()   # 判断是否是全数字 str.isalnum()  # 判断是否是字母和数字组合 str.is ...

  9. e课表项目第二次冲刺周期第一天

    昨天干了什么? 昨天与我们小组的成员商量了一个重大的决定,由于我们第一次冲刺周期的成果,就是我们决定我们要转型发展. 今天干了什么? 查阅相关的资料,我们正式决定要做一款学习的课程表APP,把简易作为 ...

  10. 从零开始入门 K8s | Kubernetes 网络概念及策略控制

    作者 | 阿里巴巴高级技术专家  叶磊 一.Kubernetes 基本网络模型 本文来介绍一下 Kubernetes 对网络模型的一些想法.大家知道 Kubernetes 对于网络具体实现方案,没有什 ...