20 個のコンテンツには弾幕効果が必要で、3 つのレイヤーに分かれており、速度はランダムであることがわかっています。 まずは効果を見てみましょう。
したがって、生成されたものを埋めることはここでは考慮されません。ただのディスプレイ効果。入力した内容を確認したい場合は、時間を無駄にしないでください。
アイデアコード
htmlスケルトン構造
(長すぎます。例として 3 つを取り上げます。インターフェースが長すぎて分かりにくいと思われる場合は、js で動的に生成することもできます)
<div class=cute-barrage><div class=barrage-div><img src=http://kw1-1253445850.file.myqcloud.com/static/image/stimg_7656dc02eb1cd13adbacbdd2695dc3a8.jpg/><span>Momoda は<i>本日 1Q コインを引き出します</i></span></div> <divクラス=弾幕-div><img src=http://kw1-1253445850.file.myqcloud.com/static/image/stimg_632fecdcb52417cb8ab89fa283e07281.jpg/><span>大きな耳のオレンジ色の猫が<i>今日 5Q コインを引き出します</i></span>< /div><div class=barrage-div><img src=../../static/cutePresent/resource/avatar.png/><span>丶鹿のポットにはウーの牛乳袋が入っています。<i>今日 3Q コインを引き出しましょう</i></span></div>。 < /div>
CSSスタイル
.cute-barrage表示範囲と位置を決め、幅は100%、高さはカスタマイズ、水平方向を超える部分は非表示となります。
.barrage-divコンテンツ部分、長さはコンテンツによって決まり、親に対する相対的な位置が決まります
html,body{ width: 100%; }.cute-barrage{ width: 100%; height: 4rem; /*弾幕の長さを決定します*/ location:Absolute; /*弾幕の高さを決定しますbarrage*/ left : 0; overflow-x: hidden; /*水平方向の余分な部分を非表示にします*/ .barrage-div{ 位置: 絶対値; 右: -100%; /* 最初はインターフェイスの外側にあることを確認してください。右から左が右、左から右が左です*/ height: 0.6rem: rgba(255, 255, 255, 0.9); radius: 2rem;white-space:nowrap; /*コンテンツが 1 行で表示されていることを確認してください。そうしないと、最後に移動すると折り返されます*/ img{ width: 0.5rem; height: 0.5rem; vertical-align: middle; //インラインブロック要素、中央揃えpadding-left: 0.05rem; border-radius: 50%; } spadding: 0 0.1rem; //インライン ブロック要素、中央揃えの 4 つの要素が必須です。 height: 0.6rem; //インライン ブロック要素、中央揃えの 4 つの要素が必須です。 inline-block; //インライン ブロック要素、4 つのインライン配置が必須ですvertical-align: middle; //インライン ブロック要素、4 つのインライン配置が必須です i{ color: #fe5453; } }}js動的アニメーション実装（zepto.js）
//弾幕 var winWidth = $(window).width(); //画面の幅を取得 $(.barrage-div).each(function(index,value){ //各弾幕を走査します var width = $( value) .width(); //現在の弾幕の幅を取得します var topRandom = Math.floor(Math.random() * 3) + 'rem'; //0,1,2の乱数を取得し状況に応じて変更 $(value).css({right:-width,top:topRandom}) //弾幕を画面外に移動、 // スペル アニメーション フレーム関数の直後で、各アニを区別する必要があり、幅はそれ自体の負の幅から画面全体の距離だけ移動することに注意してください。 var keyframes = `/ @keyframes ani${index}{ form{ right:${-width}px } に{ right:${winWidth}px; } }/ @-webkit-keyframes ani${-width}px; から { right:${winWidth} }`;ページの head タグに追加 $(<style>).attr(type,text/css).html(keyframes).appendTo($(head)); //アニメーション速度リスト変数を定義します。 aniList = [3,5,7,9,11]; //配列 0,1,2,3,4 から乱数を取得します var aniTime =Math.floor(Math.random() * 5); Give 前線全面弾幕にアニメーション CSS を追加する場合 //遅延時間はそれぞれの *1.5 倍、この変数 $(value).css({animation:`ani${index} ${aniList[aniTime]}s Linear ${index * 1.5}s`,-webkit-animation:`ani${index} ${aniList[aniTime]}s 線形 ${index * 1.5}s`});})次に、ブラウザーの効果を見てみましょう。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。