ホームページ > 記事 > ウェブフロントエンド > 豪華な CSS3 アニメーション効果を実現するにはどうすればよいでしょうか? (コード例)
豪華な CSS3 アニメーション効果を実現するにはどうすればよいでしょうか? (コード例)
- 云罗郡主転載
- 2018-10-22 17:01:011615ブラウズ
この記事の内容は、豪華な CSS3 アニメーション効果を実現する方法についてです。 (コード例) は参考になると思います。
次は、フロントエンドの専門家から引用したコード例です。この例を使用して、CSS3 の素晴らしい効果を示します。
例:
<!DOCTYPE HTML>
<html>
<head>
<title>一个绚丽的CSS3动画效果</title>
<style type="text/css">
body{background:#000;}
h1
{
text-align:center;
color:#fff;
font-size:48px;
text-shadow: 1px 1px 1px #ccc,
0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #ff00de,
0 0 70px #ff00de,
0 0 80px #ff00de,
0 0 100px #ff00de,
0 0 150px #ff00de;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
animation: run ease-in-out 9s infinite;
-moz-animation: run ease-in-out 9s infinite ;
-webkit-animation: run ease-in-out 9s infinite;
-ms-animation: run ease-in-out 9s infinite;
-o-animation: run ease-in-out 9s infinite;
}
@keyframes run
{
0% {transform:rotateX(-5deg) rotateY(0);}
50%
{
transform:rotateX(0) rotateY(180deg);
text-shadow: 1px 1px 1px #ccc,
0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #3EFF3E,
0 0 70px #3EFFff,
0 0 80px #3EFFff,
0 0 100px #3EFFee,
0 0 150px #3EFFee;
}
100% {transform:rotateX(5deg) rotateY(360deg);}
}
@-webkit-keyframes run
{
0% {transform:rotateX(-5deg) rotateY(0);}
50%
{
transform:rotateX(0) rotateY(180deg);
text-shadow: 1px 1px 1px #ccc,
0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #3EFF3E,
0 0 70px #3EFFff,
0 0 80px #3EFFff,
0 0 100px #3EFFee,
0 0 150px #3EFFee;
}
100% {transform:rotateX(5deg) rotateY(360deg);}
}
@-moz-keyframes run
{
0% {transform:rotateX(-5deg) rotateY(0);}
50%
{
transform:rotateX(0) rotateY(180deg);
text-shadow: 1px 1px 1px #ccc,
0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #3EFF3E,
0 0 70px #3EFFff,
0 0 80px #3EFFff,
0 0 100px #3EFFee,
0 0 150px #3EFFee;
}
100% {transform:rotateX(5deg) rotateY(360deg);}
}
@-ms-keyframes run
{
0% {transform:rotateX(-5deg) rotateY(0);}
50%
{
transform:rotateX(0) rotateY(180deg);
text-shadow: 1px 1px 1px #ccc,
0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #3EFF3E,
0 0 70px #3EFFff,
0 0 80px #3EFFff,
0 0 100px #3EFFee,
0 0 150px #3EFFee;
}
100% {transform:rotateX(5deg) rotateY(360deg);}
}
</style>
</head>
<body>
<h1>php中文网</h1>
</body>
</html>その効果。画像:
分析:
このような素晴らしい効果を目にしたら、友達全員がショックを受けると思います。
この例では、CSS3 の多くのテクノロジを組み合わせて、CSS3 のテキストシャドウ、変形効果の変換、トランジション効果のトランジション、およびアニメーション効果のアニメーションを使用します。
上記は、豪華な CSS3 アニメーション効果を実現する方法です。 (コード例) 完全な紹介。CSS3 ビデオ チュートリアル について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。
以上が豪華な CSS3 アニメーション効果を実現するにはどうすればよいでしょうか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事は绿叶学习网で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。