CSS动画 旋转 位移效果 字体颜色变化
<
这是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);
}
}
这是可以变大变小的代码,你可以改成你自己喜欢的倍数。
虽然不是很完美但是在我这个新手的眼中是很好的了,不过我
会努力学习的。
**这是可以改变字体颜色的代码,虽然不是很成功但是也是很好的了,
特别对于我这一种新手来说了。**
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);
}
这是源代码
**
陈饭店附近看到南非进口
低功耗太阳花土同一天
**