[css3]CSS3トランジションによる通知メッセージ回転バーの実装
2022-02-03 09:58:59
Vue版、ファイルにコピーして使えるようにしました
<template>
<! -- Rotating view -->
<div id="carousel-view">
<! -- Rotating list -->
<ul id="carousel-list-view" :class="{ 'carousel-animated':isAnimated }">
<li v-for="(item, index) in dataSource" :key="index">{ { item }}</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
// Turn on animation
isAnimated: false,
// Rotation data
dataSource: ['dzm', 'xyq', 'ahhh']
}
},
created () {
// Start the timer
setInterval(this.scroll, 1000)
},
methods: {
// Scrolling animation
scroll () {
// Enable animation
this.isAnimated = true
// Countdown animation time
setTimeout(() => {
// add the first element of the array to the end of the array
this.dataSource.push(this.dataSource[0])
// Remove the first element of the array
this.dataSource.shift()
// Turn off the animation
this.isAnimated = false
// The animation time needs to match the time set in .carousel-animated
}, 500)
}
}
}
</script>
<style scoped>
#carousel-view {
width: 100%;
height: 32px;
background-color: red;
overflow: hidden;
}
#carousel-list-view {
margin: 0;
padding: 0;
list-style: none;
}
#carousel-list-view li {
line-height: 32px;
height: 32px;
}
.carousel-animated {
transition: transform 0.5s;
transform: translateY(-32px);
}
</style>
この記事は、CSS3遷移に関する通知メッセージの回転バーを実現するために導入され、より関連するCSS3遷移回転バーの内容は、スクリプトの家の前の記事を検索するか、次の関連記事を閲覧を続けてください、私はあなたが将来的に多くのスクリプトホームをサポートすることを願っています!この記事では、このように紹介されています。
関連
-
[CSSチュートリアル】Pure CSSカスタム複数行抜け問題(原理から実装まで)
-
[CSSチュートリアル】 css border add four corners コード
-
[css3]CSS3タブアニメーションの背景切り替えの動的効果例
-
[CSSチュートリアル】CSS擬似要素::マーカー解説
-
[css3]css3は、3つの方法のサンプルコードのテキストの点滅効果を達成するために
-
[CSSチュートリアル]CSS気まぐれボーダーアニメーション効果
-
[CSSチュートリアル]モバイルにおけるviewportの具体的な使い方
-
[css3] 翻訳効果のあるcss3例(翻訳:translate)
-
[css3]CSS3の画像ボーダーを学ぶための記事
-
[CSSチュートリアル]CSSでimg画像を親コンテナdivと適応的なコンテナサイズに埋める
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[css3]ピュアCSS3によるネオンライト効果
-
[CSSチュートリアル】クールなネオン効果を実現するピュアCSS(デモあり)
-
[css3]CSS3のダイヤモンドパズルは、divの背景画像を回転させない機能だけを実現するために
-
[CSSチュートリアル】CSSで実現するTikTokのテキストジッター効果例
-
[CSSチュートリアル】インタビュー必見!聖杯レイアウトとダブルウィングレイアウトの違いとは?
-
[CSSチュートリアル】よく使われるnth-childセレクタをまとめる
-
[CSSチュートリアル】CSS複合セレクタの具体的な使用方法
-
[Web標準チュートリアル】html5+CSS3コーディング規約
-
[CSSチュートリアル]スクロールバーを非表示にし、サンプルコードの内容をスクロールすることができますするCSS
-
[CSSチュートリアル]フレックス内のボタンを縦に中央寄せにしない意外な解決法