摘要:效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕在當(dāng)前頁面預(yù)覽,點(diǎn)擊鏈接全屏預(yù)覽。可交互視頻教程此視頻是可以交互的,你可以隨時(shí)暫停視頻,編輯視頻中的代碼。
效果預(yù)覽
按下右側(cè)的“點(diǎn)擊預(yù)覽”按鈕在當(dāng)前頁面預(yù)覽,點(diǎn)擊鏈接全屏預(yù)覽。
https://codepen.io/zhang-ou/pen/GdrrZq
可交互視頻教程此視頻是可以交互的,你可以隨時(shí)暫停視頻,編輯視頻中的代碼。
請(qǐng)用 chrome, safari, edge 打開觀看。
https://scrimba.com/c/cWknNUR
源代碼下載請(qǐng)從 github 下載。
https://github.com/comehope/front-end-daily-challenges/tree/master/007-3d-text-marquee-effects
代碼解讀定義 dom,包含2組重復(fù)的文字:
Hello WorldHello World
居中顯示:
html, body { height: 100%; display: flex; align-items: center; justify-content: center; }
設(shè)置容器的尺寸和文字樣式:
.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; }
設(shè)置 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); }
定義動(dòng)畫效果:
@keyframes marquee { from { left: 100%; } to { left: -100%; } }
把動(dòng)畫效果應(yīng)用到文字上,并隱藏容器外的內(nèi)容:
.box .inner span { position: absolute; animation: marquee 5s linear infinite; } .box .inner { overflow: hidden; }
讓左側(cè)的文字延遲運(yùn)動(dòng),模擬出2組文字連貫運(yùn)動(dòng)的效果:
.box .inner:first-child span { animation-delay: 2.5s; left: -100%; }
大功告成!
知識(shí)點(diǎn)transform-origin https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
perspective https://developer.mozilla.org/en-US/docs/Web/CSS/perspective
rotateY() https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateY
animation-delay https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/52275.html
摘要:效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕在當(dāng)前頁面預(yù)覽,點(diǎn)擊鏈接全屏預(yù)覽。可交互視頻教程此視頻是可以交互的,你可以隨時(shí)暫停視頻,編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbfmGm?w=400&h=303); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕在當(dāng)前頁面預(yù)覽,點(diǎn)擊鏈接全屏預(yù)覽。 https://codepen.io/zhang-ou/pen/...
摘要:前端每日實(shí)戰(zhàn)專欄每天分解一個(gè)前端項(xiàng)目,用視頻記錄編碼過程,再配合詳細(xì)的代碼解讀,是學(xué)習(xí)前端開發(fā)的活的參考書以下是年月份發(fā)布的項(xiàng)目視頻演示如何用純創(chuàng)作一個(gè)按鈕文字滑動(dòng)特效視頻演示如何用純創(chuàng)作一個(gè)矩形旋轉(zhuǎn)特效視頻演示如何用純創(chuàng)作一個(gè)容器厚條紋邊 《前端每日實(shí)戰(zhàn)》專欄每天分解一個(gè)前端項(xiàng)目,用視頻記錄編碼過程,再配合詳細(xì)的代碼解讀,是學(xué)習(xí)前端開發(fā)的活的參考書! 以下是 2018 年 4 月份發(fā)...
摘要:前端每日實(shí)戰(zhàn)專欄每天分解一個(gè)前端項(xiàng)目,用視頻記錄編碼過程,再配合詳細(xì)的代碼解讀,是學(xué)習(xí)前端開發(fā)的活的參考書以下是年月份發(fā)布的項(xiàng)目視頻演示如何用純創(chuàng)作一個(gè)按鈕文字滑動(dòng)特效視頻演示如何用純創(chuàng)作一個(gè)矩形旋轉(zhuǎn)特效視頻演示如何用純創(chuàng)作一個(gè)容器厚條紋邊 《前端每日實(shí)戰(zhàn)》專欄每天分解一個(gè)前端項(xiàng)目,用視頻記錄編碼過程,再配合詳細(xì)的代碼解讀,是學(xué)習(xí)前端開發(fā)的活的參考書! 以下是 2018 年 4 月份發(fā)...
閱讀 1598·2023-04-26 02:43
閱讀 2994·2021-11-11 16:54
閱讀 1344·2021-09-23 11:54
閱讀 1165·2021-09-23 11:22
閱讀 2359·2021-08-23 09:45
閱讀 845·2019-08-30 15:54
閱讀 3094·2019-08-30 15:53
閱讀 3184·2019-08-30 15:53