美女视频在线观看网址大全,解开杨幂的胸罩视频

1．翻轉(zhuǎn)的字符

在頁(yè)面中放置一個(gè)類名為container的層作為容器，在該層中放置5個(gè)字符區(qū)域，HTML代碼描述如下：

</div>

為container和span定義CSS樣式規(guī)則，并定義實(shí)現(xiàn)5個(gè)字符翻轉(zhuǎn)的動(dòng)畫(huà)關(guān)鍵幀。完整的HTML文件內(nèi)容如下。

<!DOCTYPE html>
<html>
<head>
<title>字符翻轉(zhuǎn)</title>
<style>
   .container
   {
      margin: 0 auto;
      width: 500px;
      height: 300px;
      position: relative;
      overflow: hidden;
      display:flex;
      align-items: center;
      justify-content: center;
      border: 4px solid rgba(255, 0, 0, 0.9);
      background:#d8d8d8;
      border-radius: 10%;
    }
   .container>span
   {
font-size: 130px;
    font-family: "Impact",sans-serif;
    display: inline-block;
    animation:flip 2s infinite linear;
    transform-origin:0 70%;
    transform-style:preserve-3d;
   }
   @keyframes flip
   {
    50%   { transform: rotateX(360deg); }
    100%  { transform: rotateX(360deg); }
   }
   .container>span:nth-child(1n+0) 
   {
        color:var(--color);
        animation-delay: var(--delay);
   }
</style>
</head>
<body>
<div class="container">
    <span style="--delay:0s;--color:#f00">H</span>
    <span style="--delay:0.4s;--color:#f0f">E</span>
    <span style="--delay:0.8s;--color:#ff0">L</span>
    <span style="--delay:1.2s;--color:#0ff">L</span>
    <span style="--delay:1.6s;--color:#800080">O</span>
</div>
</body>
</html>

View Code

在瀏覽器中打開(kāi)包含這段HTML代碼的html文件，可以呈現(xiàn)出如圖1所示的動(dòng)畫(huà)效果。

圖1 字符繞X軸翻轉(zhuǎn)

若將上面的關(guān)鍵幀設(shè)置中的兩個(gè)屬性值“rotateX”均改成“rotateY”，則呈現(xiàn)如圖2所示的動(dòng)畫(huà)效果。

圖2 字符繞Y軸翻轉(zhuǎn)

若將上面的關(guān)鍵幀設(shè)置中的兩個(gè)屬性值“rotateX”均改成“rotateZ”，則呈現(xiàn)如圖3所示的動(dòng)畫(huà)效果。

圖3 字符繞Y軸翻轉(zhuǎn)

2．跳躍的字符

我們可以通過(guò)修改字符區(qū)span的top屬性的屬性值讓字符上下移動(dòng)，同時(shí)設(shè)置文本的陰影，形成字符的跳躍動(dòng)畫(huà)效果。

編寫(xiě)的完整HTML文件如下。

<!DOCTYPE HTML> 
<html> 
<head>
<title>跳躍的字符</title>
<style>
   .container
   {
      margin: 0 auto;
      width: 600px;
      height: 200px;
      position: relative;
      overflow: hidden;
      display:flex;
      align-items: center;
      justify-content: center;
      border: 4px solid rgba(255, 0, 0, 0.9);
      background:#f5f5f5;
      border-radius: 10%;
    }
   .container>span 
   {
      position: relative;
      top: 20px;
      display: inline-block;
      animation: bounce .3s ease infinite alternate;
      font-family: "Impact",sans-serif;
      font-size: 80px;
      text-shadow: 0 1px 0 #CCC,
                   0 2px 0 #CCC,
                   0 3px 0 #CCC,
                   0 4px 0 #CCC,
                   0 5px 0 #CCC,
                   0 6px 0 transparent,
                   0 7px 0 transparent,
                   0 8px 0 transparent,
                   0 9px 0 transparent,
                   0 10px 10px rgba(0, 0, 0, .4);
   }
   .container>span:nth-child(1n+0) 
   {
      color:var(--color);
      animation-delay: var(--delay);
   }
   @keyframes bounce 
   {
      100% 
      {
         top: -20px;
         text-shadow: 0 1px 0 #CCC,
                      0 2px 0 #CCC,
                      0 3px 0 #CCC,
                      0 4px 0 #CCC,
                      0 5px 0 #CCC,
                      0 6px 0 #CCC,
                      0 7px 0 #CCC,
                      0 8px 0 #CCC,
                      0 9px 0 #CCC,
                      0 50px 25px rgba(0, 0, 0, .2);
      }
   }
</style>
</head>
<body> 
<div class="container">
    <span style="--delay:0s;--color:#f00">H</span>
    <span style="--delay:0.1s;--color:#f0f">a</span>
    <span style="--delay:0.2s;--color:#ff0">p</span>
    <span style="--delay:0.3s;--color:#0f0">p</span>
    <span style="--delay:0.4s;--color:#0ff">y</span>
    <span style="--delay:0.5s;--color:#00f">N</span>
    <span style="--delay:0.6s;--color:#800080">e</span>
    <span style="--delay:0.7s;--color:#008080">w</span>
    <span style="--delay:0.8s;--color:#ff6347">Y</span>
    <span style="--delay:0.9s;--color:#ee82ee">e</span>    
    <span style="--delay:1.0s;--color:#8b4513">a</span>
    <span style="--delay:1.1s;--color:#fa8072">r</span>
</div>
</body> 
</html>

View Code

在瀏覽器中打開(kāi)包含這段HTML代碼的html文件，可以呈現(xiàn)出如圖4所示的動(dòng)畫(huà)效果。

圖4 跳躍的字符

3．霓虹字符

通過(guò)濾鏡的方式讓文字發(fā)光，形成霓虹文字效果。編寫(xiě)HTML文件內(nèi)容如下。

<!DOCTYPE html>
<html>
<head>
<title>霓虹字符</title>
<style>
   .container
   {
      margin: 0 auto;
      width: 500px;
      height: 300px;
      position: relative;
      overflow: hidden;
      display:flex;
      align-items: center;
      justify-content: center;
      border: 4px solid rgba(255, 0, 0, 0.9);
      background:#000000;
      border-radius: 10%;
    }
    .container>span 
    {
      margin-right: 10px;  
      display: inline-block;
      font-size: 100px; 
      font-family: "Impact",sans-serif;  
      color: white;
      text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
      animation-name: anim;
      animation-timing-function: linear;
      animation-direction: alternate-reverse;
      animation-iteration-count: infinite;
   }
   .container>span:nth-child(1) 
   {
      animation-delay: 0.2s;
      animation-duration: 0.5s;
   }
   .container>span:nth-child(2) 
   {
      animation-delay: 0.4s;
      animation-duration: 1s;
   }
   .container>span:nth-child(3) 
   {
      animation-delay: 0.6s;
      animation-duration: 1.5s;
   }
   .container>span:nth-child(4) 
   {
      animation-delay: 0.8s;
      animation-duration: 2s;
   }
  .container>span:nth-child(5) 
   {
      animation-delay: 1s;
      animation-duration: 2.5s;
   }
   @keyframes anim 
   {
      0% 
      {
         opacity: .1;
         background-position: 0 0;
            filter: hue-rotate(0deg);
      }
      10% { background-position: 5px 0; }
      20% { background-position: -5px 0; }
      30% { background-position: 15px 0; }
      40% { background-position: -5px 0; }
      50% { background-position: -25px 0; }
      60% { background-position: -50px 0; }
      70% { background-position: 0 -20px; }
      80% { background-position: -60px -20px;}
      81% { background-position: 0 0; }
      100% 
      {
         opacity: 1;
         background-position: 0 0;
         filter: hue-rotate(360deg);
      }
   }
</style>
</head>
<body>
<div class="container">
   <span>W</span>
   <span>U</span>
   <span>H</span>
   <span>A</span>
   <span>N</span>
</div>
</body>
</html>

View Code

在瀏覽器中打開(kāi)包含這段HTML代碼的html文件，可以呈現(xiàn)出如圖5所示的動(dòng)畫(huà)效果。

圖5 霓虹文字

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

中文字幕理论片,69视频免费在线观看,亚洲成人app,国产1级毛片,刘涛最大尺度戏视频,欧美亚洲美女视频,2021韩国美女仙女屋vip视频

1．翻轉(zhuǎn)的字符

2．跳躍的字符

3．霓虹字符