ホームページ > 記事 > ウェブフロントエンド > css3を使用してプログレスバーを作成する方法

css3を使用してプログレスバーを作成する方法

php中世界最好的语言オリジナル: 2017-12-01 10:07:201915ブラウズ

今日は、CSS3 を使用して進行状況バーを作成する方法のコード例を紹介します。これは、JS の代わりに CSS3 テクノロジーを完全に使用して、進行状況バー効果を作成する方法を見てみましょう。

html：
<body>
<div id="box">
<div id="div1"></div>
</div>
</body>
css：
<style>
@keyframes test {
from{
left:0
}
to{
left:-100%;
}
}
#box{
width:400px;
height:50px;
margin: 50px auto;
position: relative;
border: 1px solid #000;
overflow: hidden;
}
#div1{
width:200%;
height:100%;
position: absolute;
left:0;
top:0;
background: -webkit-repeating-linear-gradient(-45deg, red 0px,red 10px,blue 10px,blue 20px);
animation:4s test linear infinite;
}
</style>

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。