使用css3製作好看的動畫效果

阿新 • • 發佈：2020-12-31

今天給大家做兩個好看的css3好看的特效

字型浮雕

效果如下
在這裡插入圖片描述

我們來建一個div然後新增一段文字

   <div>
        這不是搖擺楊嘛？
    </div>

然後我們準備一些常用的css樣式

*{
            margin: 0;
            padding: 0;
        }
        :root,body{
            width: 100%;
            height: 100%;
        }
        body{
            background-color:blue ;
        }

好的基礎準備以經完成了我們給他樣式

     div{
            width: 800px;
            height: 100px;
            position: absolute;
            top: calc(50% - 50px);
            left:calc(50% - 400px);
            font-size: 6em;
            color: white;
            font-weight: blod;
            transition: all 1s;
        }
        div:hover{
            text-shadow: 0px 1px 0px #ccc,
            0px 1px 10px rgba(0,0,0,0.3),
            0px 2px 0px #ccc,
            0px 3px 0px #ccc,
            0px 4px 0px #ccc,
            0px 5px 0px #ccc,
            0px 6px 0px #ccc,
            0px 7px 0px #ccc,
            0px 8px 0px #ccc,
            0px 9px 0px #ccc,  
            0px 10px 10px rgba(0,0,0,0.5)
        }

設定這麼多的文字陰影主要是讓他有一個層疊的立體效果

光影載入效果

效果如下：
在這裡插入圖片描述

我們把每一個字母分別用一個li包裹起來，然後單獨給每一個設定動畫

<body>
    <ul>
        <li>l</li>
        <li>o</li>
        <li>a</li>
        <li>d</li>
        <li>i</li>
        <li>n</li>
        <li> 
g</li>
        <li>.</li>
        <li>.</li>
        <li>.</li>
    </ul>
</body>

css程式碼如下

  *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        :root,body{
            width: 100%;
            height: 100%;
        }
        body{
            background-color: black;
        }
        ul{
            width: 600px;
            height: 100px;
            /* color:white; */
            /* text-shadow: 0px 0px 10px 1px #037AB5; */
            font-size: 7em;
            position: absolute;
            top: calc(50% - 50px);
            left:calc(50% - 300px);
            font-weight: bold;
        }
        ul li{
            float: left;
        }
        @keyframes te { 
            0%,100%{text-shadow: 0px 0px 80px  #007EB6;
                color: white;
                
             }
            25%,75%{
                text-shadow: none;
                color:black;
             }
            
        }
        li:nth-child(1){
            animation: te 1s linear 0s infinite;
        }
        li:nth-child(2){
            animation: te 1s linear 0.1s infinite;
        }
        li:nth-child(3){
            animation: te 1s linear 0.2s infinite;
        }
        li:nth-child(4){
            animation: te 1s linear 0.3s infinite;
        }
        li:nth-child(5){
            animation: te 1s linear 0.4s infinite;
        }
        li:nth-child(6){
            animation: te 1s linear 0.5s infinite;
        }
        li:nth-child(7){
            animation: te 1s linear 0.6s infinite;
        }
        li:nth-child(8){
            animation: te 1s linear 0.7s infinite;
        }
        li:nth-child(9){
            animation: te 1s linear 0.8s infinite;
        }
        li:nth-child(10){
            animation: te 1s linear 0.9s infinite;
        }

讓每一個字母的動畫隔0.1秒顯示就可以做到光影載入的效果拉！