作者：手机用户2502911617_428 | 来源：互联网 | 2023-05-19 05:13
之前做转盘的时候，用的就是animation，然后加@keyframes。当时时间挺紧张的，就在网上搜了下怎么用，就直接用了。现在有时间了，好好看了一下具体的用法。—《图解CSS3》
之前做转盘的时候，用的就是animation，然后加@keyframes。当时时间挺紧张的，就在网上搜了下怎么用，就直接用了。现在有时间了，好好看了一下具体的用法。
—《图解CSS3》
CSS3的animation属性可以像Flash制作动画一样，通过关键帧控制动画的每一步，实现复杂的动画效果。
属性：
animation-name:指定@keyframes关键帧的名字
animation-duration:设置动画播放所需时间，一般以秒为单位
animation-timing-function:设置动画的播放方式
ease|linear|ease-in|ease-out|ease-in-out
animation-delay:动画开始播放的时间，即开始动画前等待的时间
ainimation-iteration-count:动画播放次数，默认为1，如果取值为infinite，则无限循环
animation-direction:动画播放方向 animation-play-state:控制播放状态，running|paused
animation-fill-mode:动画开始前和结束后发生的操作。none|forwards(应用最后关键帧的样式)|backwards（初始帧）|both
今天用到了一个效果，就是页面上要有一个转动的元素，单击这个元素元素停止转动，再次单击，元素重新旋转。
我之前写的代码如下：
<html>
<head>
<title>动画切换title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css">
head>
<body>
<div class="container">
<div id="top">
div>
div>
<script type="text/Javascript">
var getCss = function(o,key){
return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
};
var musicIcon = document.getElementById("top");
musicIcon.addEventListener("click",function(){
var rotate = getCss(musicIcon,"animation");
if (rotate) {
musicIcon.style.animation = " ";
}else{
musicIcon.style.animation = "200s one infinite linear";
}
,false);
script>
body>
html>
CSS代码：
#top{
width: 86px;
height: 86px;
border-radius: 43px;
border: 1px solid red;
background: url(../images/icon.png) no-repeat;
animation: 200s one infinite linear;
}
@keyframes one {
100% {transform: rotate(36000deg);}
}
但是这样写不管用，原因 “”空字符串可能是不识别。更好的方法是，重新设置一个样式，让它转就给它加上这个样式，否则就去掉这个样式
js代码如下：
<script type="text/Javascript">
var getCss = function(o,key){
return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
};
var musicIcon = document.getElementById("top");
musicIcon.addEventListener("click",function(){
if (musicIcon.className.indexOf("rotate") >= 0) {
musicIcon.className = "";
}
else {
musicIcon.className = "rotate";
}
},false);
script>
京公网安备 11010802041100号