JS旋转和css旋转
2024-09-01 10:46:08
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
最新文章
- java中文乱码解决之道(四)-----java编码转换过程
- [Java]Hessian客户端和服务端代码例子
- win平台检查内存泄露
- 20145325张梓靖 实验三 ";敏捷开发与XP实践";
- 那么都数据库表,那么多不同记录。是怎样都存储在一个key-value数据库的?
- 【BZOJ】【1027】【JSOI2007】合金
- R2的版本由来
- 【转载】git/github初级运用自如
- JMS - Message
- SQLite数据类型详解
- uva 10655 - Contemplation! Algebra
- jQuery动画使用总结
- SQL数据库连接语句
- 北京大学Cousera学习笔记--7-计算导论与C语言基础--基本数据类型&;变量&;常量
- atom使用技巧
- C++的重载操作符(operator)介绍(转)
- [转]nodejs之cordova 跨平台开发
- The stacking context
- STM32建立基本项目
- elasticsearch更新doc文档
热门文章
- nginx的ngx_http_geoip2模块以精准禁止特定地区IP访问
- Docker系列(五):.Net Core实现k8s健康探测机制
- 执行Django数据迁移,报错 1091
- mac下安装jmeter
- slf4j输出变量
- django的url分发封装
- 02-35 scikit-learn库之支持向量机
- HTML块元素与内联元素嵌套规则
- synchronized块中的wait()、nofity()、nofityAll()方法
- Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 10.x