按下右側的「點擊預覽」按鈕在當前頁面預覽,點擊連接全屏預覽。css
https://codepen.io/zhang-ou/pen/GdrrZqhtml
此視頻是能夠交互的,你能夠隨時暫停視頻,編輯視頻中的代碼。git
請用 chrome, safari, edge 打開觀看。github
https://scrimba.com/c/cWknNURchrome
請從 github 下載。dom
https://github.com/comehope/front-end-daily-challenges/tree/master/007-3d-text-marquee-effectsflex
定義 dom,包含2組重複的文字:動畫
<div class="box"> <div class="inner"> <span>Hello World</span> </div> <div class="inner"> <span>Hello World</span> </div> </div>
居中顯示:spa
html, body { height: 100%; display: flex; align-items: center; justify-content: center; }
設置容器的尺寸和文字樣式:3d
.box { display: flex; } .box .inner { width: 200px; height: 100px; line-height: 100px; font-size: 32px; font-family: sans-serif; font-weight: bold; white-space: nowrap; }
配色:
.box .inner:first-child { background-color: indianred; color: darkred; } .box .inner:last-child { background-color: lightcoral; color: antiquewhite; }
設置 3d 效果:
.box .inner:first-child { transform-origin: left; transform: perspective(300px) rotateY(-67.3deg); } .box .inner:last-child { transform-origin: right; transform: perspective(300px) rotateY(67.3deg); }
定義動畫效果:
@keyframes marquee { from { left: 100%; } to { left: -100%; } }
把動畫效果應用到文字上,並隱藏容器外的內容:
.box .inner span { position: absolute; animation: marquee 5s linear infinite; } .box .inner { overflow: hidden; }
讓左側的文字延遲運動,模擬出2組文字連貫運動的效果:
.box .inner:first-child span { animation-delay: 2.5s; left: -100%; }
大功告成!