ホームページ > 記事 > ウェブフロントエンド > css3でsequence_css3_CSS_Webページ制作で複数要素を表示する効果を実現
css3でsequence_css3_CSS_Webページ制作で複数要素を表示する効果を実現
- 韦小宝オリジナル
- 2017-12-16 10:25:433751ブラウズ
CSS3 では、キーフレームと組み合わせたアニメーションを使用して、要素にさまざまなアニメーション効果を追加します。この記事では、複数の要素の連続表示を実現するための CSS3 の効果を主に紹介します。CSS3 に興味がある友人や、CSS3 が必要な方は参考にしてください
上の図に示すように、CSS3 は多くの場所でよく使用されます。イベントは、HTML5 をこのようなアニメーション効果に宣伝します。特に年末が近づいているので、企業のイベントページの作成に忙しい学生もいるかもしれません。このような小さなスキルを身につけると役立つかもしれません。
CSS3 では、キーフレームと組み合わせたアニメーションを使用して、要素にさまざまなアニメーション効果を追加します。特定のアニメーションはキーフレームで定義され、アニメーションで使用されます。たとえば、上から飛んでくるアニメーション効果を定義できます。
@keyframes topIn {
from { transform: translateY(-50px) }
to { transform: translateY(0px) }
}そして、ターゲット要素のアニメーションを通じてアニメーションを使用します。
<p class="target topIn"></p>
.topIn {
animation: topIn 1s ease;
}このようにして、要素が最初に DOM にレンダリングされるときに、上から下への変位アニメーション効果が発生します。もちろん、この効果は私たちが望むものではありません。多くの場合、アニメーションに 0 から 1 の透明度のグラデーションも追加します。
@keyframes topIn {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}要素の表示タイミングも制御できるようにしたい場合はどうすればよいでしょうか?より簡単な方法は、アニメーション効果が必要な場合にのみ、アニメーションを制御するクラス スタイルをターゲット要素に追加することです。
btn.addEventListener('click', function() {
document.querySelector('.target').classList.add('topIn');
}, !1);しかし、これには問題があります。これを実践した友人はすでに気づいていると思います。要素はシーンに入る前には非表示の状態であることが期待されます。しかし、上記を実行するだけで、アニメーションが開始される前に要素が表示されます。それで、何をすべきでしょうか？
display: none または visibility: hidden を要素に追加することは簡単に考えられます。ただし、display: none の後は、要素はスペースを占有しません。この場合、ページ レイアウトで混乱が生じる可能性があります。したがって、開始する前に、要素に新しいクラスを追加します。
.aninode {
visibility: hidden;
}要素を表示する新しいクラスを追加します。
.animated .aninode {
visibility: visible;
}アニメーション効果を制御するクラスも CSS でいくつかの調整が必要です。
.animated .topIn {
animation: topIn 1s ease;
}この利点は、アニメーションをクラスに追加するだけで効果を実現できることです。 インスタンスデモ完全なコードは次のとおりです:
<p class="container">
<p class="target aninode leftIn"></p>
<button class="btn show">show</button>
<button class="btn hide">hide</button>
</p>
.container {
width: 100px;
margin: 0 auto;
}
.aninode {
visibility: hidden;
}
.animated .aninode {
visibility: visible;
}
.target {
width: 100px;
height: 100px;
background: orange;
border-radius: 4px;
margin: 20px 0;
}
.animated .topIn {
animation: topIn 1s ease;
}
.animated .leftIn {
animation: leftIn 1s ease;
}
.btn {
width: 100px;
height: 30px;
border: 1px solid #ccc;
outline: none;
transition: 0.1s;
}
.btn:active {
border: none;
background: orange;
color: #fff;
}
@keyframes topIn {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
@keyframes leftIn {
from {
transform: translateX(-50px);
opacity: 0;
}
to {
transform: translateX(0px);
opacity: 1;
}
}
var show = document.querySelector('.show');
var hide = document.querySelector('.hide');
var container = document.querySelector('.container');
show.addEventListener('click', function() {
container.classList.add('animated');
}, !1);
hide.addEventListener('click', function() {
container.classList.remove('animated');
}, !1);デモは次のように表示されます:
See the Pen <a href='https://codepen.io/yangbo5207/pen/NXKrPg/'>NXKrPg</a> by Ormie (<a href='https://codepen.io/yangbo5207'>@yangbo5207</a>) on <a href='https://codepen.io'>CodePen</a>.
codepenデモアドレス
しかし、これは少し足りないようです私たちが望む効果。考え続ける。まず、次の要素を前の要素よりも遅く表示したい場合は、遅延時間を制御する必要があります。遅延時間を設定するクラスを多数用意する必要があります。
.delay200 {
animation-delay: 200ms;
animation-fill-mode: backwards!important;
}
.delay400 {
animation-delay: 400ms;
animation-fill-mode: backwards!important;
}
.delay600 {
animation-delay: 600ms;
animation-fill-mode: backwards!important;
}
.delay800 {
animation-delay: 800ms;
animation-fill-mode: backwards!important;
}animation-fill-mode:backwards! important; 目的は、要素が表示される前に透明度を 0 に保つことです。アニメーションを追加した直後に要素が表示されないようにします。
新しいクラスでアニメーションの省略形を使用するときに、animation-fill-mode プロパティが上書きされないように ! important を追加しました。ここに! important が書かれていない場合、topIn などのアニメーションクラスでは省略形を使用できません。
この後、必要な効果を実現するには、上記のコードを CSS に追加し、HTML にいくつかの変更を加えるだけです。
See the Pen <a href='https://codepen.io/yangbo5207/pen/mpbEEE/'>mpbEEE</a> by Ormie (<a href='https://codepen.io/yangbo5207'>@yangbo5207</a>) on <a href='https://codepen.io'>CodePen</a>.
codepenデモアドレス
完全なコードは次のとおりです:
<p class="container">
<p class="targets aninode">
<p class="item leftIn">春晓</p>
<p class="item leftIn delay200">春眠不觉晓</p>
<p class="item leftIn delay400">处处蚊子咬</p>
<p class="item leftIn delay600">夜来风雨声</p>
<p class="item leftIn delay800"><此处请留下你们的才华></p>
</p>
<button class="btn show">show</button>
<button class="btn hide">hide</button>
</p>
.container {
width: 200px;
margin: 0 auto;
}
.aninode {
visibility: hidden;
}
.animated .aninode {
visibility: visible;
}
.targets {
margin: 20px 0;
}
.targets .item {
border: 1px solid #ccc;
margin: 10px 0;
line-height: 2;
padding: 2px 6px;
border-radius: 4px;
}
.animated .topIn {
animation: topIn 1s ease;
}
.animated .leftIn {
animation-name: leftIn;
animation-duration: 1s;
}
.btn {
width: 100px;
height: 30px;
border: 1px solid #ccc;
outline: none;
transition: 0.1s;
}
.btn:active {
border: none;
background: orange;
color: #fff;
}
@keyframes topIn {
from { transform: translateY(-50px) }
to { transform: translateY(0px) }
}
@keyframes leftIn {
from {
transform: translateX(-50px);
opacity: 0;
}
to {
transform: translateX(0px);
opacity: 1;
}
}
.delay200 {
animation-delay: 200ms;
animation-fill-mode: backwards!important;
}
.delay400 {
animation-delay: 400ms;
animation-fill-mode: backwards!important;
}
.delay600 {
animation-delay: 600ms;
animation-fill-mode: backwards!important;
}
.delay800 {
animation-delay: 800ms;
animation-fill-mode: backwards!important;
}
var show = document.querySelector('.show');
var hide = document.querySelector('.hide');
var container = document.querySelector('.container');
show.addEventListener('click', function() {
container.classList.add('animated');
}, !1);
hide.addEventListener('click', function() {
container.classList.remove('animated');
}, !1);jsのロジックはまったく変更されていないことがわかりました。必要に応じてアニメーションを追加/削除するだけです。
イースターエッグ:
実際には、さらに厄介なことに遭遇することもあります。それはクラスの作成を遅らせるためです。どのくらいの時間差でどれだけの要素を使うか分からないのですが、すべて手書きだと二度手間になってしまいます。したがって、jsを使用して動的に挿入できます。コードは次のとおりです:
const styleSheet = getSheet();
var delay = 100;
while (delay < 10000) {
styleSheet.insertRule(`.animated .delay${delay}{ animation-delay: ${delay}ms; animation-fill-mode: backwards; }`, styleSheet.cssRules.length);
delay += delay < 3000 ? 100 : 1000;
}
function getSheet() {
var sheets = document.styleSheets;
var len = sheets.length;
for(var i = 0; i <= len; i++) {
var sheet = sheets.item(i);
try {
if (sheet.cssRules) {
return sheet;
}
} catch(e) {}
}
var style = document.createElement('style');
style.type = "text/css";
document.getElementsByTagName('head')[0].appendChild(style);
return style.sheet;
}概要
上記は、複数の要素を順番に表示する効果を実現するためにエディターによって導入されたcss3です。皆様の参考になれば幸いです。 ！ ！
関連する推奨事項:
以上がcss3でsequence_css3_CSS_Webページ制作で複数要素を表示する効果を実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。