大屏设计常用到的效果

目录

一、旋转效果

二、上下移动效果

三、文字渐变效果

四、动画延迟

五、淡入效果

六、DIV边框边角颜色加深

---

一、旋转效果

 
@keyframes rotate {
  0% {
    transform: translate(-50%,-50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%,-50%) rotate(360deg);
  }
}
 
animation: rotate 3s linear infinite;

二、上下移动效果

@keyframes move{
  from{transform:translate(0,0)}
  to{transform:translate(0,5px)}
}

animation: move 0.8s ease-in-out 1s infinite alternate;

三、文字渐变效果

<h1 class="home-title">
  <span>运维监管系统大数据展示</span>
</h1>

.home-title{
  text-align: center;
  padding: 10px 0 0;
  span{
    font-size: 28px;
    background-image: linear-gradient(0de