猫史档案馆

注:本帖子仅供萌新参考.

body {
    margin: 0;
    padding: 0;
    font-family: "montserrat";
    background: linear-gradient(125deg, #e6喵65, #9198e5, #ebf8e1, #96e);
    background-size: 400%;
    animation: bganimation 15s infinite;
}

注意:CSS: linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

More: CSS代码:background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);

-----所有参考均来自MDN[中文]文档------

提到渐变,我们可以玩点其他更多(

我们可以使用@keyframes 来制作一个小动画:

我默认你以知晓@keyframes 的用法

让我们接着来看看;

 

@keyframes bganimation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }   
}

像这样

或者说文字

H喵L代码:
<div class="text">
       Text.
</div>

JS:
 var texts = document.getElementsByClassName('text');//获取元素

.text {
    
    text-align: center;
    margin: 340px 0;
    font-size: 25px;
    animation-duration: 8s;
    animation-name: slidein;
    animation-iteration-count:infinite;

}
@keyframes slidein {
    from{
        left:30px
    }
    to{
        left:100px
    }
    0% {
        color: black;
    }
    30%{
        color:darkblue
    }
    50% {
        color: yellow;
    }

    70% {
        color:coral;
        
    }
    90%{
        color:#96e;
    }
    100%{
        color:lightcoral;
    }
}

 

 

 

结尾:这只是非常普通的用法,还有更多等你们发现!

借鉴资料:MDN文档