国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁
  2. >Toy博客

如何使用HTML和CSS創(chuàng)建動畫條形圖？

2年前作者：憂郁的蛋~分類：Toy博客閱讀(18)違法舉報

這篇具有很好參考價值的文章主要介紹了如何使用HTML和CSS創(chuàng)建動畫條形圖？。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報違法"按鈕提交疑問。

概述

動畫欄是使用 HTML 和 CSS 創(chuàng)建的圖形動畫欄。動畫欄的布局是使用 HTML 創(chuàng)建的，欄的樣式是使用 CSS 制作的。普通的條形圖可以正常創(chuàng)建，但我們必須創(chuàng)建帶有動畫的條形圖，因此我們將使用 CSS 過渡動畫屬性來使其具有動畫效果。我們將構(gòu)建一個與音樂動畫條同步器相同的動畫條。

算法

第 1 步 - 在文本編輯器中創(chuàng)建一個 HTML 文件并在其中添加 HTML 樣板。

第 2 步 ? 現(xiàn)在創(chuàng)建一個包含動畫線條的父 div 容器。

<div class="animatedLines"></div>

?第 3 步 ? 在父 div 內(nèi)創(chuàng)建一個 div 子容器。創(chuàng)建至少七個“div”來制作一個好的動畫欄，并將類名作為線條添加到其中。

<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>

?第 4 步 ? 現(xiàn)在創(chuàng)建一個 style.css 文件并將該文件鏈接到 HTML 文檔。

<link rel="stylesheet" href="style.css">

?第 5 步? 在 style.css 文件中設(shè)置 HTML 元素的樣式。

.animatedLines {
   display: flex;
   justify-content: center;
   padding-top: 2rem;
}
.animatedLines .lines:nth-child(1) {
   animation-delay: .1s;
   background-color: rgb(141, 255, 88);
}

.animatedLines .lines:nth-child(2) {
   animation-delay: .2s;
   background-color: rgb(127, 253, 69);
}

.animatedLines .lines:nth-child(3) {
   animation-delay: .3s;

   background-color: rgb(18, 49, 6);
}

.animatedLines .lines:nth-child(4) {
   animation-delay: .4s;
   background-color: rgb(18, 49, 6);
}

.animatedLines .lines:nth-child(5) {
   animation-delay: .3s;
   background-color: rgb(18, 49, 6);
}

.animatedLines .lines:nth-child(6) {
   animation-delay: .2s;
   background-color: rgb(127, 253, 69);
}

.animatedLines .lines:nth-child(7) {
   animation-delay: .1s;
   background-color: rgb(102, 228, 43);
}

?第 6 步 ? 通過定位子“div”容器的類名來制作這些線條的動畫。

.animatedLines .lines {
   list-style: none;
   width: 5px;
   height: 10px;
   margin: 0 4px;
   animation: animatedBars .5s infinite alternate;
}

@keyframes animatedBars {
   0% {
      transform: scaleY(1);
   }

   25% {
       transform: scaleY(1);
   }

   50% {
       transform: scaleY(1);
   }

   100% {
       transform: scaleY(6);
   }

}

?

第 7 步? 動畫條已成功創(chuàng)建。

示例

在此示例中，我們創(chuàng)建了一個動畫欄。為此，我們創(chuàng)建了兩個文件：index.html 和 style.css。索引文件包含頁面的布局，style.css 文件包含頁面的樣式部分。

<html>
<head>
   <title>animated bars</title>
   <link rel="stylesheet" href="style.css">
   <style>
      .animatedLines {
         display: flex;
         justify-content: center;
         padding-top: 2rem;
      }
      .animatedLines .lines:nth-child(1) {
         animation-delay: .1s;
         background-color: rgb(141, 255, 88);
      }
      
      .animatedLines .lines:nth-child(2) {
         animation-delay: .2s;
         background-color: rgb(127, 253, 69);
      }
      
      .animatedLines .lines:nth-child(3) {
         animation-delay: .3s;
      
         background-color: rgb(18, 49, 6);
      }
      
      .animatedLines .lines:nth-child(4) {
         animation-delay: .4s;
         background-color: rgb(18, 49, 6);
      }
      
      .animatedLines .lines:nth-child(5) {
         animation-delay: .3s;
         background-color: rgb(18, 49, 6);
      }
      
      .animatedLines .lines:nth-child(6) {
         animation-delay: .2s;
         background-color: rgb(127, 253, 69);
      }
      
      .animatedLines .lines:nth-child(7) {
         animation-delay: .1s;
         background-color: rgb(102, 228, 43);
      }
      .animatedLines .lines {
         list-style: none;
         width: 5px;
         height: 10px;
         margin: 0 4px;
         animation: animatedBars .5s infinite alternate;
      }
      
      @keyframes animatedBars {
         0% {
            transform: scaleY(1);
         }
      
         25% {
            transform: scaleY(1);
         }
      
         50% {
            transform: scaleY(1);
         }
      
         100% {
            transform: scaleY(6);
         }
      
      }
   </style>
</head>
<body>
   <h1 style="text-align: center;text-decoration: underline;color: green;">tutorialspoint.com</h1>
   <div class="animatedLines">
      <div class="lines"></div>
      <div class="lines"></div>
      <div class="lines"></div>
      <div class="lines"></div>
      <div class="lines"></div>
      <div class="lines"></div>
      <div class="lines"></div>
      <div class="lines"></div>
   </div>
</body>
</html>

?

下面給定的圖像顯示了上面示例的輸出，它顯示了一些您可以在瀏覽器上實(shí)時看到的動畫線。當(dāng)用戶將此功能加載到瀏覽器中時，它會顯示一條看起來更有吸引力的動畫線條。

結(jié)論

動畫欄的這一功能可以作為圖形界面在語音合成器中使用。您還可以在許多應(yīng)用程序中看到此組件，例如錄音機(jī)和 dj 節(jié)拍同步器。上面例子中的主要部分是計時，我們設(shè)置了隨著條形尺寸的增加而動畫的計時。文章來源地址http://www.zghlxwxcb.cn/news/detail-694030.html

到了這里，關(guān)于如何使用HTML和CSS創(chuàng)建動畫條形圖？的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請點(diǎn)擊違法舉報進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包