欧美十八禁网站,777色色,激情乱伦视频,cao逼网址,精品777777,aa大香蕉aa,欧美日本美女网18,三级电影在线播放

在今天的文章里，我們采用HTML和CSS來實現(xiàn)一個波浪形的動畫文本。它是最簡單的CSS動畫效果之一。對于初學(xué)者來講，這是學(xué)習(xí)CSS偽元素概念的最佳示例之一。

實現(xiàn)方法，通過結(jié)合使用一些CSS屬性來執(zhí)行獲取波浪文本的基本思想。主要的“主體”部分是通過使用標(biāo)記內(nèi)的標(biāo)記創(chuàng)建的。CSS代碼用于創(chuàng)建HTML結(jié)構(gòu)的“主體”部分的波浪形文本。

HTML代碼如下：

<div class="wavy"> ????????<span?style="--i:1">Wspan>?????????<span?style="--i:2">Espan>?????????<span?style="--i:3">Bspan>?        <span style="--i:4">前span>         <span style="--i:5">端span>         <span style="--i:6">開 span>         <span style="--i:7">發(fā)span>         <span style="--i:8">公span>         <span style="--i:9">眾span>         <span style="--i:10">號span> 
    div>

我們通過HTML代碼里的HTML標(biāo)簽，先設(shè)計一個用于演示的波浪效果的文本。

接著再通過CSS代碼，為HTML標(biāo)簽里的文本添加動畫效果，CSS代碼如下：

 <style type="text/css">         body {             display: flex;             justify-content: center;             align-items: center;             min-height: 100vh;             background-color: #1ab1cc;         }           .wavy {             position: relative;         }           .wavy span {             position: relative;             display: inline-block;             color: #fff;             font-size: 2em;             text-transform: uppercase;             animation: animate 2s ease-in-out infinite;             animation-delay: calc(0.1s * var(--i));         }           @keyframes animate {             0% {                 transform: translateY(0px);             }               40% {                 transform: translateY(-40px);             }  
              80% transform: translateY(-80px);             }             
            100% {                 transform: translateY(0px);             }         } style>

最后，將兩部分代碼進(jìn)行結(jié)合，我們得到了以下完整的代碼:

 <html> 
<head>     <meta charset="utf-8">     <style type="text/css">         body {             display: flex;             justify-content: center;             align-items: center;             min-height: 100vh;             background-color: #1ab1cc;         } 
        .wavy {             position: relative;         } 
        .wavy span {             position: relative;             display: inline-block;             color: #fff;             font-size: 2em;             text-transform: uppercase;             animation: animate 2s ease-in-out infinite;             animation-delay: calc(0.1s * var(--i));         } 
        @keyframes animate {             0% {                 transform: translateY(0px);             } 
            40% {                 transform: translateY(-40px);             }  
              80% transform: translateY(-80px);             } 

            100% {                 transform: translateY(0px);             }         } style> head> 
<body>     <div class="wavy"> ????????<span?style="--i:1">Wspan>?????????<span?style="--i:2">Espan>?????????<span?style="--i:3">Bspan>?        <span style="--i:4">前span>         <span style="--i:5">端span>         <span style="--i:6">開 span>         <span style="--i:7">發(fā)span>         <span style="--i:8">公span>         <span style="--i:9">眾span>         <span style="--i:10">號span> 
    div> body> 
html>

通過運行此代碼，我們看到最終效果：

本文完~

【開發(fā)小技巧】029—用CSS如何制作一個波浪形文本動畫效果