(1)旋转效果
@keyframes rotate {
0% {
transform: translate(-50%,-50%) rotate(0deg);
}
100% {
transform: translate(-50%,-50%) rotate(360deg);
}
}
animation: rotate 3s linear infinite;
(2)上下移动效果
@keyframes move{
from{transform:translate(0,0)}
to{transform:translate(0,5px)}
}
animation: move 0.8s ease-in-out 1s infinite alternate;
(3)文字渐变颜色
<h1 class="home-title">
<span>运维监管系统大数据展示</span>
</h1>
.home-title{
text-align: center;
padding: 10px 0 0;
span{
font-size: 28px;
background-image: linear-gradient(0deg, #5EC6DA, #F4FCFB);
/*linear-gradient(to bottom, rgba(79,255,215,1), rgba(79,255,215,0));*/
-webkit-background-clip:text;
color: transparent;
}
}
(4)动画延迟
animation-delay: 1s;
-webkit-animation-delay: 1s; /* Safari 和 Chrome */
未完待续。。。