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. CentOS 8 都发布了，你还不会用 nftables？

    原文链接:CentOS 8 都发布了,你还不会用 nftables? 如果你没有生活在上个世纪,并且是云计算或相关领域的一名搬砖者,那你应该听说最近 CentOS 8 官方正式版已经发布了,CentO ...

  2. SpringCloudEureka入门

    说明 SpringBoot版本 2.1.7.RELEASE SpringCloud版本 Greenwich.SR2 创建eureka server工程 加入pom依赖 <dependencies ...

  3. python爬虫——爬取B站用户在线人数

    国庆期间想要统计一下bilibili网站的在线人数变化,写了一个简单的爬虫程序.主要是对https://api.bilibili.com/x/web-interface/online返回的参数进行分析 ...

  4. scalikejdbc 学习笔记(4)

    Batch 操作 import scalikejdbc._ import scalikejdbc.config._ object BatchOperation { def main(args: Arr ...

  5. Docker下配置nacos

    前言 近段时间在学dubbo,dubbo-admin死活装不上,无论是本地还是docker,所以把目光投向了其他配置中心,我选定的是阿里新开源的nacos. 正文 拉取镜像到本地docker dock ...

  6. 【CV现状-3.3】特征提取与描述

    #磨染的初心--计算机视觉的现状 [这一系列文章是关于计算机视觉的反思,希望能引起一些人的共鸣.可以随意传播,随意喷.所涉及的内容过多,将按如下内容划分章节.已经完成的会逐渐加上链接.] 缘起 三维感 ...

  7. 05-04 scikit-learn库之主成分分析

    目录 scikit-learn库之主成分分析 一.PCA 1.1 使用场景 1.2 代码 1.3 参数 1.4 属性 1.5 方法 二.KernelPCA 三.IncrementalPCA 四.Spa ...

  8. html5新媒体播放器标签video、audio 与embed、object

    html5里的一些新的标签,看到里面object.embed.video.audio都可以添加视频或音频文件 embed是针对非IE的浏览器的媒体播放器 video是html5出的一种新标准,但并不是 ...

  9. .net cookie跨域请求指定请求域名

    HttpCookie cookie = new HttpCookie("OrderApiCookie"); //初使化并设置Cookie的名称 cookie.HttpOnly = ...

  10. 局部敏感哈希LSH（Locality-Sensitive Hashing）——海量数据相似性查找技术

    一. 前言     最近在工作中需要对海量数据进行相似性查找,即对微博全量用户进行关注相似度计算,计算得到每个用户关注相似度最高的TOP-N个用户,首先想到的是利用简单的协同过滤,先定义相似性度量(c ...