一、文字颜色渐变效果
方式一:
.headClass{
background-image: -webkit-linear-gradient(left, #0ee5ff, #f4ab20 50%, #0ee5ff 50%, #f4ab20 100%, #0ee5ff);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
-webkit-animation: masked-animation 3s infinite linear;
}
@-webkit-keyframes masked-animation {
0% { background-position: 0 0;}
100% { background-position: -100% 0;}
}
二、上下缓慢移动效果
//动效样式
@keyframes move{
from{transform:translate(0,0)}
to{transform:translate(0,5px)}
}
样式中添加动效:
animation: move 0.8s ease-in-out 1s infinite alternate;
三、旋转效果
@keyframes rotate {
0% {
transform: translate(-50%,-50%) rotate(0deg);
}
100% {
transform: translate(-50%,-50%) rotate(360deg);
}
}
animation: rotate 3s linear infinite;
四、动画延迟效果
animation-delay: 1s;
-webkit-animation-delay: 1s; /* Safari 和 Chrome */