js旋转

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5. <style>
  6.         div{
  7.         background: repeating-linear-gradient(45deg,red,yellow 20%);
  8.         width: 200px;
  9.         height: 200px;
  10.         border-radius: 50%;
  11.         text-align: center;
  12.         line-height: 200px;
  13.         animation-name: MX;
  14.         animation-duration:6s;
  15.         animation-timing-function:linear;
  16.         /*动画速度曲线*/
  17.         animation-iteration-count:infinite;
  18.         /*动画无限次播放*/
  19.         transition-property: height;
  20.         /*2b转换需要属性的名称*/
  21.         transition-duration: 6s;
  22.         /*2d转换时间*/
  23.         transition-timing-function: linear;
  24.          /*转换速度曲线*/}
  25.         @keyframes MX
  26.         {
  27.         from{font-size: 0px;color:black;}
  28.         to{font-size: 80px;color:white;}
  29.         }
  30.         /*#ym:hover{
  31.             animation-play-state:paused;
  32.             停止2d转换
  33.             }*/
  34. </style>
  35. </head>
  36. <body>
  37. <script>
  38.     var x=0;
  39.     var timerid;
  40.     var fx;
  41.     function start(){
  42.         clearInterval(timerid)
  43.         timerid=setInterval(function(){
  44.         if(x==0)
  45.           fx=true
  46.         if(fx==true)
  47.           x=x+1;
  48.         if(x==360)
  49.           fx=false
  50.         if(fx==false)
  51.            x=x-1
  52.         document.getElementById("ym").style.transform='rotate(' + x + 'deg)';
  53.     },30)
  54. }
  55. // clearInterval() 方法可取消由 setInterval()函数佘定德定时执行操作。
  56. // clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
  57. // setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
  58. </script>
  59. <!--onmouseover="clearInterval(timerid)" onmouseout="start()"-->
  60. <div id="ym" >明</div>
  61. <button onclick="start()">开始</button>
  62. <button onclick="clearInterval(timerid)">停止</button>
  63. </body>
  64. </html>

css旋转

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         *{padding: 0;
  8.         margin: 0;}
  9.         #a{
  10.             width:500px;
  11.             height:500px;
  12.             margin: 300px auto;
  13.             transform: translate(-50%,-50%);
  14.             background: repeating-linear-gradient(60deg,#0ff,#00f,#0f0 10%);
  15.             border-radius:50%;
  16.             /*animation:run 6s linear 5s infinite alternate;*/
  17.             animation-name: run;
  18.             animation-duration:6s;
  19.             animation-timing-function: linear;
  20.             animation-delay:0s;
  21.             animation-iteration-count:infinite;
  22.             animation-direction: /*normal|*/alternate;
  23.  
  24.         }
  25.         #a:hover{
  26.             animation-play-state:paused;
  27.         }
  28.          p{
  29.  
  30.              position: absolute;
  31.              top: 50%;
  32.              left: 50%;
  33.              transform: translate(-50%,-50%);
  34.              /*利用绝对定位和2d转换进行水平垂直居中*/
  35.          }
  36.  
  37.         @keyframes run{
  38.             from{
  39.  
  40.                 transform:rotate(0deg);font-size: 0px;color:black;
  41.             }
  42.             to{
  43.                 transform:rotate(360deg);font-size: 80px;color:white;
  44.             }
  45.         }
  46.  
  47.     </style>
  48. </head>
  49. <body>
  50.     <div id="a"><p>我</P></div>
  51. </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. OpenGl 实现鼠标分别移动多个物体 ----------移动一个物体另外一个物体不动--读取多个3d模型操作的前期踏脚石

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11620088.html 前言: 因为接下来的项目需求是要读取多个3D模型,并且移动拼接,那么我 ...

  2. 使用Java元注解和反射实现简单MVC框架

    Springmvc的核心是DispatcherServlet来进行各种请求的拦截,进而进行后续的各种转发处理.流程图如下: 说明:客户端发出一个http请求给web服务器,web服务器对http请求进 ...

  3. 如何让谷歌浏览器支持小于12px的字体

    CSS3有个新的属性transform,而我们用到的就是transform:scale() 书写一段代码 <body> <p>我是一个小于12PX的字体</p> & ...

  4. vertical-align之见

    ertical-align   英文翻译为垂直对齐 ,常用来应用于table 表格中文字的垂直居中:脱离表格后不常用: 有朋友问起:故总结记之: 开局一张图,下来全靠编 这是一个简单的四线表格,小学时 ...

  5. ng执行css3动画

    在组件html中 <div> <aside id="aside">侧边栏</aside> <div class="content ...

  6. Spark 学习笔记之 Spark history Server 搭建

    在hdfs上建立文件夹/directory hadoop fs -mkdir /directory 进入conf目录  spark-env.sh 增加以下配置 export SPARK_HISTORY ...

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

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

  8. redis主从配置 从而实现数据备份和读写分离

    首先打开cmd,用cd找到你的redis文件夹,我的操作是 在你的第一个redis客户端文件夹配置文件中,搜索port,找到如下位置 端口号设置为6379(默认的.后面一个,两个或者多个客户端分别修改 ...

  9. 初探内核之《Linux内核设计与实现》笔记上

    内核简介  本篇简单介绍内核相关的基本概念. 主要内容: 单内核和微内核 内核版本号 1. 单内核和微内核   原理 优势 劣势 单内核 整个内核都在一个大内核地址空间上运行. 1. 简单.2. 高效 ...

  10. Ubuntu安装Chrome浏览器及解决启动no-sandbox问题

    1.安装浏览器 # apt-get install gonme # apt-get update # apt-get install google-chrome-stable 2.启动Chrome浏览 ...