一个新人对CSS动画的编辑

                 CSS动画 旋转 位移效果 字体颜色变化

这是源代码

陈饭店附近看到南非进口

低功耗太阳花土同一天

var gr =false;
window.function(){
vn();
vhn();
};
function vn(){
if(gr){
return;
}
setInterval(function(){
var nml=document.getElementById(“nml”);
nml.style.color="#C79899";
},1000);
setInterval(function(){
var nml=document.getElementById(“nml”);
nml.style.color=“orange”;
},1600);
setInterval(function(){
var nml=document.getElementById(“nml”);
btn.style.color=“blue”;
},2100);
setInterval(function(){
var nml=document.getElementById(“nml”);
nml.style.color=“yellow”;
},2500);
setInterval(function(){
var nml=document.getElementById(“nml”);
nml.style.color=“red”;
},2900);
setInterval(function(){
var nml=document.getElementById(“nml”);
nml.style.color="#B733F1";
},3200);
setInterval(function(){
var nml=document.getElementById(“nml”);
nml.style.color="#D8168F";这个是可以按照自己喜欢的颜色变化设置的。
},3800);
}
这是css的设置
@charset “utf-8”;
/* CSS Document */
body{
background: #9900FF;
}

/.mk:hover{
transform:translate3d(300deg);
animation: niuqu 0.2s ease-in-out infinite;
}/
.hy{
height: 900px;
}
.jkju p{
font-size: 250px;
text-align: center;
color: #000000;
transform: rotate(360deg);
animation: hkh 4s ease-in-out infinite alternate;
}
.ghio{
font-size: 250px;
text-align: center;
color: #000000;
float: right;
transform: rotate(360deg);
animation: hkh 4s ease-in-out infinite alternate;
}
.jku{
transform: scale(2);
animation: hkjh 5s ease-in-out infinite alternate;
}
.ng{
width: 300px;
height: 300px;
border-radius: 50%;
transform: scale(2);
animation: hkjh 5s ease-in-out infinite alternate;
}

.klo{
width: 300px;
height: 300px;
background: url(…/01/231403-106.jpg);
border-radius: 50%;
transform: rotate(360deg);
animation: jkh 5s ease-in-out 3s infinite alternate;
}

这个是位移的代码
.mk img{
margin-left: 50% auto;
width: 300px;
height: 300px;
border-radius: 50%;
transform: rotate(360deg);
animation: gh 5s ease-in-out 3s infinite;
}

@keyframes gh{
0%{
transform: translateY();
}
25%{
transform: translate(-1000px,1000px);

}	
50%{
	transform: translate(-900px, -800px);
}	
75%{
	transform: translate(900px, 800px);
}	
100%{
	transform: translate(1000px,1000px);
}

}

}
位移的方向是通过X轴Y轴来改变的。
这是旋转的代码
.mk{
width: 300px;
height: 300px;
background: url(…/01/248914-106.jpg);
border-radius: 50%;
transform: rotate(360deg);
animation: hjh 3s ease-in-out 3s infinite alternate;
}

@keyframes hjh{
0%{
transform:rotateY(0deg);
}
25%{
transform: rotateY(90deg);
}
50%{
transform: rotateY(180deg);
}
75%{
transform: rotateY(270deg);
}
100%{
transform: rotateY(360deg);
}
}
旋转的方向是可以通过X轴Y轴来改变的。
注意：如果你把0.9S改的话 改小的会变得越来越快，反之就越来越慢。
这就是

这是变大变小的代码

@keyframes hkjh{
0%{
transform: scale(0.1);
}
25%{
transform: scale(0.5);
}
50%{
transform: scale(1);
}
70%{
transform: scale(1.5);
}
100%{
transform: scale(2);
}
}
这是可以变大变小的代码，你可以改成你自己喜欢的倍数。
虽然不是很完美但是在我这个新手的眼中是很好的了，不过我
会努力学习的。