CSS では、「@keyframes」ルールとアニメーション属性を使用して、div の点滅効果を実現できます。最初に「@keyframes」を使用して、点滅効果のあるアニメーションを作成するだけで済みます。その後、次のコマンドを使用します。アニメーションに必要な時間、速度、回数などを設定するアニメーション属性。
このチュートリアルの動作環境: Windows7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
レンダリングは次のとおりです
コードは次のとおりです
@keyframes fade { from { opacity: 1.0; } 50% { opacity: 0.4; } to { opacity: 1.0; } } @-webkit-keyframes fade { from { opacity: 1.0; } 50% { opacity: 0.4; } to { opacity: 1.0; } } .headerBox { color: #fff; padding: 10px; font-size: 15px; height: 60px; animation: fade 600ms infinite; -webkit-animation: fade 600ms infinite; }
headerBox スタイルを div# に設定するだけです
以上がCSSでdivのちらつきを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。