乡下人产国偷v产偷v自拍,国产午夜片在线观看,婷婷成人亚洲综合国产麻豆,久久综合给合久久狠狠狠9

    • <output id="e9wm2"></output>
    <s id="e9wm2"><nobr id="e9wm2"><ins id="e9wm2"></ins></nobr></s> 
    

    • 
    
    
      



    
      
        
      
            
        
      
        
      
    
      
    
      
        
      
        
      
            
            
      
                
      
                    
                
      
                搜索
            
      

            分享
                
            

            
            
            
            
            
            
            
            

            
        
      
    
      
    
      

    
      

    
      
        
      
        
      
        
      
        
      
            
      
                
      
                    
      CSS動(dòng)畫實(shí)例：升空的氣球
      
                    
                    
                    
                    
      
                         悅光陰
                        
                        
                        2021-09-25
                        
                            
                        
                    
      
                    
      
                        
                        
      
                    
      
                    
                    
      
                        
      
                            
                        
      
                        
      
                            
                                
      
                                    
                                        
      

                                        
                                        

                                        
      1．制作一個(gè)氣球
      

            設(shè)頁(yè)面中有<div class="balloon"></div>，為. balloon設(shè)置樣式規(guī)則如下：
      

        .balloon
      

        {
      

          height: 96px;
      

          width: 80px;
      

          background: hsla(0, 100%, 50%, 0.8);
      

          border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%;
      

          position: absolute;
      

          top: 30%;
      

          left:50%;
      

        }
      

        .balloon:before
      

        {
      

          content: '';
      

          position: absolute;
      

          width: 20%;
      

          height: 30%;
      

          top: 8%;
      

          left: 16%;
      

          border-radius: 50%;
      

          transform: rotate(40deg);
      

          background: hsla(0, 0%, 100%, 0.75);
      

        }
      

      可在頁(yè)面中顯示如圖1所示的圖形。
      

       
      

      圖1  氣球
      

            這個(gè)圖形像一個(gè)氣球，其中，樣式.balloon繪制大的紅色填充圓形，.balloon:before繪制里面的小圓形。再為這個(gè)氣球加上一個(gè)手把。在生成氣球形狀的div中加入一個(gè)子層，定義如下：
      

      <div class="balloon">
      

        <div class=" handle"></div>
      

      </div> 
      

      為. handle定義樣式規(guī)則如下：
      

        .handle
      

        {
      

          width: 2%;
      

          height: 60%;
      

          background:hsl(45, 100%, 40%);
      

          top: 100%;
      

          left: 50%;
      

          transform: translate(-50%, 0);
      

          position: absolute;
      

        }
      

        .handle:before,.handle:after
      

        {
      

          content: '';
      

          position: absolute;
      

          height: 5%;
      

          transform: translate(-50%, 0);
      

          border-radius: 25% / 50%;
      

          left: 50%;
      

        }
      

        .handle:before
      

        {
      

          top: 0;
      

          background:hsl(45, 100%, 40%);
      

          width: 500%;
      

        }
      

        .handle:after
      

        {
      

          top: 5%;
      

          background: hsla(0, 100%, 50%, 0.8);
      

          width: 700%;
      

        }
      

      此時(shí)可在頁(yè)面中顯示如圖2所示的圖形。
      

       
      

      圖2  帶手把的氣球
      

            為這個(gè)氣球定義關(guān)鍵幀，使得它進(jìn)行升空。編寫的完整的HTML文件如下。
      

      

      

      <!DOCTYPE html>
<html>
<head>
<title>氣球升空</title>
<style>
  .container
  {
    margin: 0 auto;
    width: 300px;
    height:300px;
    position: relative;
    display:flex;
    justify-content:center;
    align-items:center;
    background: #fff;
    overflow: hidden;
    border: 4px solid rgba(255, 0, 0, 0.9);
    border-radius: 2%;
  }
  .balloon 
  {
    height: 96px;
    width: 80px;
    background: hsla(0, 100%, 50%, 0.8);
    border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%;
    position: absolute;
    top: 30%;
    left:50%;
     animation: float 5s infinite linear both;
  }
  .balloon:before 
  {
    content: '';
    position: absolute;
    width: 20%;
    height: 30%;
    top: 8%;
    left: 16%;
    border-radius: 50%;
    transform: rotate(40deg);
    background: hsla(0, 0%, 100%, 0.75);
  }
  .handle 
  {
    width: 2%;
    height: 60%;
    background:hsl(45, 100%, 40%);
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    position: absolute;
  }
  .handle:before,.handle:after 
  {
    content: '';
    position: absolute;
    height: 5%;
    transform: translate(-50%, 0);
    border-radius: 25% / 50%;
    left: 50%;
  }
  .handle:before 
  {
    top: 0;
    background:hsl(45, 100%, 40%);
    width: 500%;
  }
  .handle:after 
  {
    top: 5%;
    background: hsla(0, 100%, 50%, 0.8);
    width: 700%;
  }
  @keyframes float 
  {
     from  {  transform:  translate(0, 300px); }
     to      {  transform: translate(0, -300px); }
  }
</style>
</head>
<body>
<div  class="container">
<div class="balloon">
  <div class="handle"></div>
</div>  
</div>    
</body>
</html>
      

      
View Code
      

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

       
      

      圖1  一個(gè)升空的氣球
      

      2．紅綠藍(lán)3個(gè)升空的氣球
      

            一個(gè)紅色氣球升空太孤單了，加兩個(gè)氣球（一個(gè)綠色、一個(gè)藍(lán)色）陪著升空。
      

            由生成氣球圖形的CSS定義可知，要生成不同顏色（用hsl函數(shù)表示顏色時(shí)的色相）、不同水平位置（升空總是從底部向上，垂直位置忽略好了）和不同大小的氣球，可以在<div class="balloon"></div>定義中加上style來描述反應(yīng)這三個(gè)特征的自定義變量—hue、--left和—size。然后適當(dāng)修改CSS樣式中與之相關(guān)的定義。
      

            直接給出完整的HTML文件內(nèi)容如下，讀者自己體會(huì)與1個(gè)氣球升空代碼的差別。
      

      

      

      <!DOCTYPE html>
<html>
<head>
<title>氣球升空</title>
<style>
  .container
  {
    margin: 0 auto;
    width: 300px;
    height:300px;
    position: relative;
    display:flex;
    justify-content:center;
    align-items:center;
    background: #fff;
    overflow: hidden;
    border: 4px solid rgba(255, 0, 0, 0.9);
    border-radius: 2%;
  }
  .balloon 
  {
    height: calc(1.2 * var(--size));
    width: var(--size);
    background: hsla(var(--hue), 100%, 50%, 0.8);
    border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%;
    position: absolute;
    top: 30%;
    left:var(--left, 50%);
     animation: float 5s infinite linear both;
  }
  .balloon:before 
  {
    content: '';
    position: absolute;
    width: 20%;
    height: 30%;
    top: 8%;
    left: 16%;
    border-radius: 50%;
    transform: rotate(40deg);
    background: hsla(0, 0%, 100%, 0.75);
  }
  .handle 
  {
    width: 2%;
    height: 60%;
    background:hsl(45, 100%, 40%);
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    position: absolute;
  }
  .handle:before,.handle:after 
  {
    content: '';
    position: absolute;
    height: 5%;
    transform: translate(-50%, 0);
    border-radius: 25% / 50%;
    left: 50%;
  }
  .handle:before 
  {
    top: 0;
    background:hsl(45, 100%, 40%);
    width: 500%;
  }
  .handle:after 
  {
    top: 5%;
    background: hsla(var(--hue), 100%, 50%, 0.8)
    width: 700%;
  }
  @keyframes float 
  {
     from  {  transform: translate(-50%, -50%) translate(0, 300px); }
     to    {  transform: translate(-50%, -50%) translate(0, -300px); }
  }
</style>
</head>
<body>
<div  class="container">
<div class="balloon" style="--left: 20%; --hue: 0; --size: 80px;">
  <div class="handle"></div>
</div> 
<div class="balloon" style="--left: 50%; --hue: 120; --size: 60px;">
  <div class="handle"></div>
</div>  
<div class="balloon" style="--left: 70%; --hue: 240; --size: 100px;">
  <div class="handle"></div>
</div>    
</div>    
</body>
</html>
      

      
View Code
      

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

       
      

      圖2  三個(gè)升空的氣球
      

      3．滿屏都是氣球在升空
      

            由圖2看出，三個(gè)升空的氣球速度相同，垂直方向位置也相同，能否讓它們有所不同呢？可以通過為氣球定義動(dòng)畫完成時(shí)間和延遲時(shí)間來實(shí)現(xiàn)，再加上兩個(gè)自定義變量—rate和—delay。
      

            適當(dāng)修改.container的定義，使得呈現(xiàn)動(dòng)畫效果的容器大小與瀏覽器窗口大小相同。并定義多個(gè)氣球，編寫的HTML文件如下。
      

      

      

      <!DOCTYPE html>
<html>
<head>
<title>氣球升空</title>
<style>
  .container
  {
    margin: 0 auto;
    min-height:100vh;
    position: relative;
    display:flex;
    justify-content:center;
    align-items:center;
    background: hsl(180, 100%, 95%);
    overflow: hidden;
    border: 4px solid rgba(255, 0, 0, 0.9);
    border-radius: 2%;
  }
  .balloon 
  {
    --width: calc(var(--size, 10) * 1vmin);
    height: calc(1.2 * var(--width));
    width: var(--width);
    background: hsla(var(--hue), 100%, 50%, 0.8);
    border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%;
    position: absolute;
    top: 30%;
    left:var(--left, 50%);
    animation: float calc(var(--rate, 1) * 1s) calc(var(--delay, 0) * -1s)  infinite linear both;
  }
  .balloon:before 
  {
    content: '';
    position: absolute;
    width: 20%;
    height: 30%;
    top: 8%;
    left: 16%;
    border-radius: 50%;
    transform: rotate(40deg);
    background: hsla(0, 0%, 100%, 0.75);
  }
  .handle 
  {
    width: 2%;
    height: 60%;
    background:hsl(45, 100%, 40%);
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    position: absolute;
  }
  .handle:before,.handle:after 
  {
    content: '';
    position: absolute;
    height: 5%;
    transform: translate(-50%, 0);
    border-radius: 25% / 50%;
    left: 50%;
  }
  .handle:before 
  {
    top: 0;
    background:hsl(45, 100%, 40%);
    width: 500%;
  }
  .handle:after 
  {
    top: 5%;
    background: hsla(var(--hue), 100%, 50%, 0.8)
    width: 700%;
  }
  @keyframes float 
  {
     from  {  transform: translate(-50%, -50%) translate(0, 100vh); }
     to    {  transform: translate(-50%, -50%) translate(0, -100vh); }
  }
</style>
</head>
<body>
<div  class="container">
<div class="balloon" style="--left: 20%; --hue: 0; --size: 20;--rate: 1; --delay: 1;">
  <div class="handle"></div>
</div> 
<div class="balloon" style="--left: 50%; --hue: 120; --size: 15;--rate: 3; --delay: 3;">
  <div class="handle"></div>
</div>  
<div class="balloon" style="--left: 70%; --hue: 240; --size: 12;--rate: 5; --delay: 5;">
  <div class="handle"></div>
</div>  
<div class="balloon" style="--left: 35%; --hue: 0; --size: 18;--rate: 1; --delay: 1;">
  <div class="handle"></div>
</div> 
<div class="balloon" style="--left: 50%; --hue: 120; --size: 21;--rate: 3; --delay: 3;">
  <div class="handle"></div>
</div>  
<div class="balloon" style="--left: 89%; --hue: 240; --size: 22;--rate: 5; --delay: 5;">
  <div class="handle"></div>
</div>  
<div class="balloon" style="--left: 94%; --hue: 57; --size: 38; --rate: 3; --delay: 5;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 90%; --hue: 124; --size: 36; --rate: 5; --delay: 7;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 46%; --hue: 228; --size: 24; --rate: 7; --delay: 10;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 59%; --hue: 196; --size: 20; --rate: 2; --delay: 8;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 62%; --hue: 225; --size: 24; --rate: 9; --delay: 9;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 16%; --hue: 190; --size: 18; --rate: 4; --delay: 5;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 67%; --hue: 105; --size: 28; --rate: 1; --delay: 10;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 23%; --hue: 64; --size: 16; --rate: 2; --delay: 4;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 84%; --hue: 287; --size: 30; --rate: 1; --delay: 10;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 87%; --hue: 191; --size: 34; --rate: 5; --delay: 0;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 77%; --hue: 313; --size: 24; --rate: 9; --delay: 7;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 6%; --hue: 178; --size: 38; --rate: 7; --delay: 2;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 20%; --hue: 184; --size: 30; --rate: 7; --delay: 6;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 24%; --hue: 79; --size: 18; --rate: 6; --delay: 2;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 78%; --hue: 167; --size: 20; --rate: 6; --delay: 7;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 2%; --hue: 321; --size: 25; --rate: 2; --delay: 4;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 83%; --hue: 9; --size: 39; --rate: 5; --delay: 1;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 10%; --hue: 257; --size: 49; --rate: 6; --delay: 1;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 96%; --hue: 346; --size: 38; --rate: 7; --delay: 0;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 60%; --hue: 117; --size:33; --rate: 4; --delay: 7;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 17%; --hue: 152; --size: 35; --rate: 9; --delay: 8;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 57%; --hue: 286; --size: 31; --rate: 5; --delay: 4;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 73%; --hue: 116; --size: 15; --rate: 5; --delay: 8;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 53%; --hue: 28; --size: 26; --rate: 1; --delay: 6;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 83%; --hue: 198; --size: 35; --rate: 9; --delay: 10;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 25%; --hue: 162; --size: 19; --rate: 6; --delay: 3;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 25%; --hue: 165; --size: 32; --rate: 1; --delay: 1;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 99%; --hue: 153; --size: 17; --rate: 3; --delay: 4;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 58%; --hue: 111; --size: 27; --rate: 2; --delay: 6;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 91%; --hue: 87; --size: 17; --rate: 9; --delay: 2;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 59%; --hue: 332; --size: 26; --rate: 9; --delay: 5;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 71%; --hue: 291; --size: 32; --rate: 2; --delay: 10;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 79%; --hue: 79; --size: 21; --rate: 9; --delay: 8;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 29%; --hue: 278; --size: 24; --rate: 2; --delay: 0;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 91%; --hue: 193; --size: 40; --rate: 3; --delay: 5;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 17%; --hue: 147; --size: 27; --rate: 6; --delay: 4;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 90%; --hue: 112; --size: 39; --rate: 4; --delay: 1;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 33%; --hue: 179; --size: 26; --rate: 9; --delay: 6;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 59%; --hue: 38; --size: 50; --rate: 6; --delay: 10;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 49%; --hue: 92; --size: 24; --rate: 3; --delay: 8;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 91%; --hue: 145; --size: 34; --rate: 1; --delay: 4;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 39%; --hue: 218; --size: 34; --rate: 3; --delay: 10;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 99%; --hue: 245; --size: 36; --rate: 8; --delay: 5;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 8%; --hue: 66; --size: 15; --rate: 6; --delay: 10;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 83%; --hue: 51; --size: 27; --rate: 7; --delay: 8;">
  <div class="handle"></div>
</div>

<div class="balloon" style="--left: 71%; --hue: 81; --size: 27; --rate: 3; --delay: 1;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 54%; --hue: 274; --size: 28; --rate: 1; --delay: 8;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 25%; --hue: 70; --size: 15; --rate: 6; --delay: 2;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 99%; --hue: 282; --size: 27; --rate: 6; --delay: 4;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 17%; --hue: 312; --size: 27; --rate: 8; --delay: 3;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 30%; --hue: 157; --size: 27; --rate: 1; --delay: 8;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 90%; --hue: 299; --size: 38; --rate: 6; --delay: 0;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 91%; --hue: 162; --size: 35; --rate: 5; --delay: 7;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 50%; --hue: 213; --size: 19; --rate: 5; --delay: 5;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 37%; --hue: 227; --size: 24; --rate: 7; --delay: 6;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 61%; --hue: 182; --size: 31; --rate: 9; --delay: 7;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 97%; --hue: 161; --size: 37; --rate: 1; --delay: 7;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 5%; --hue: 113; --size: 21; --rate: 4; --delay: 4;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 48%; --hue: 17; --size: 37; --rate: 2; --delay: 1;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 79%; --hue: 31; --size: 47; --rate: 9; --delay: 6;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 53%; --hue: 54; --size: 22; --rate: 5; --delay: 5;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 24%; --hue: 311; --size: 38; --rate: 9; --delay: 8;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 89%; --hue: 48; --size: 17; --rate: 4; --delay: 10;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 65%; --hue: 97; --size: 31; --rate: 3; --delay: 8;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 57%; --hue: 9; --size: 17; --rate: 6; --delay: 0;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 9%; --hue: 14; --size: 36; --rate: 4; --delay: 1;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 96%; --hue: 100; --size: 24; --rate: 8; --delay: 5;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 14%; --hue: 228; --size: 25; --rate: 7; --delay: 1;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 90%; --hue: 216; --size: 32; --rate: 7; --delay: 5;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 92%; --hue: 220; --size: 24; --rate: 5; --delay: 3;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 72%; --hue: 276; --size: 18; --rate: 8; --delay: 1;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 43%; --hue: 26; --size: 28; --rate: 4; --delay: 6;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 68%; --hue: 97; --size: 37; --rate: 5; --delay: 0;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 40%; --hue: 119; --size: 20; --rate: 6; --delay: 5;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 20%; --hue: 338; --size: 37; --rate: 6; --delay: 6;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 55%; --hue: 336; --size: 36; --rate: 2; --delay: 5;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 81%; --hue: 10; --size: 17; --rate: 2; --delay: 5;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 69%; --hue: 314; --size: 20; --rate: 10; --delay: 1;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 59%; --hue: 169; --size: 22; --rate: 7; --delay: 10;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 93%; --hue: 165; --size: 38; --rate: 7; --delay: 2;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 7%; --hue: 271; --size: 33; --rate: 1; --delay: 3;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 21%; --hue: 349; --size: 36; --rate: 8; --delay: 7;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 13%; --hue: 38; --size: 35; --rate: 2; --delay: 9;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 55%; --hue: 164; --size: 27; --rate: 9; --delay: 7;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 70%; --hue: 66; --size: 37; --rate: 5; --delay: 0;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 5%; --hue: 264; --size: 15; --rate: 4; --delay: 9;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 24%; --hue: 265; --size: 40; --rate: 7; --delay: 6;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 11%; --hue: 101; --size: 26; --rate: 4; --delay: 5;">
  <div class="handle"></div>
</div>
<div class="balloon" style="--left: 25%; --hue: 207; --size: 40; --rate: 3; --delay: 0;">
  <div class="handle"></div>
</div>
</div>    
</body>
</html>
      

      
View Code
      

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

       
      

      圖3  滿屏升空的氣球
      
                                          		
                                
      
                                  
                        
      
                    
      



                
      
                
      
                    
                    
                        
      
                            
                                
        
                                    		
                        
        
                            
                
        
                
        
                
                
                
        
                
        


                

                
        本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。
        
                
                

                
        
                    轉(zhuǎn)藏
                    
                    
                    
                    
                    
                    
                        分享
                        
                        
                    
                    獻(xiàn)花（0）
                            
                
        
                
                
                
        
                    
        
                        
                        
                    
        
                
        

            
        

            
        

            
        
                
                
                
        
                
        
                    
        
                        
        0條評(píng)論
        
                        
                        
                        
        
                            
                            
        
                                發(fā)表
                            
        
                        
        
                        
                    
        
                    
                    
        請(qǐng)遵守用戶 評(píng)論公約
        
                    
                    
          
                    
        
                    
        
                    
        
                    
                
        
               
                
        
                    
        
                        類似文章
                        更多