ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3トランジションエフェクトの使用例の紹介
CSS3トランジションエフェクトの使用例の紹介
- 高洛峰オリジナル
- 2017-03-13 17:47:001676ブラウズ
この記事では主に CSS3 トランジション効果の例を詳しく紹介します。興味のある方は参考にしてください。
この記事の例は、参考のために CSS3 トランジション効果を共有します。具体的な内容は次のとおりです
。 :
実装コード:
transition.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Transition</title>
<style>
#block {
width: 400px;
height: 300px;
background-color: #69C;
margin: 0 auto;
transition: background-color 1s, width 0.5s ease-out;
-webkit-transition: background-color 1s, width 0.5s ease-out;
}
#block:hover {
background-color: red;
width: 600px;
}
</style>
</head>
<body>
<p id="block">
</p>
</body>
</html>transitionDemo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TransitionDemo</title>
<style>
#wrapper {
width: 1024px;
margin: 0 auto;
}
.progress-bar-bg {
width: 960px;
/*background-color: aliceblue;*/
background-color: lightyellow;
}
.progress-bar {
height: 40px;
width: 40px;
background-color: #69C;
border: 1px solid lightyellow;
border-radius: 5px;
}
.progress-bar:hover {
width: 960px;
}
#bar1 {
-webkit-transition: width 5s linear;
/*-webkit-transition: width 5s steps(6, end);*/
/*-webkit-transition: width 5s step-start;*/
}
#bar2 {
-webkit-transition: width 5s ease;
}
#bar3 {
-webkit-transition: width 5s ease-in;
}
#bar4 {
-webkit-transition: width 5s ease-out;
}
#bar5 {
-webkit-transition: width 5s ease-in-out;
}
</style>
</head>
<body>
<p id="wrapper">
<p>linear</p>
<p class="progress-bar-bg">
<p class="progress-bar" id="bar1"></p>
</p>
<p>ease</p>
<p class="progress-bar" id="bar2"></p>
<p>ease-in</p>
<p class="progress-bar" id="bar3"></p>
<p>ease-out</p>
<p class="progress-bar" id="bar4"></p>
<p>ease-in-out</p>
<p class="progress-bar" id="bar5"></p>
</p>
</body>
</html> 結果分析: マウス 上に移動した後、トランジションアニメーションが発生します。
以上がこの記事の全内容です、皆様の学習のお役に立てれば幸いです。
以上がCSS3トランジションエフェクトの使用例の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。