數(shù)字滾動(dòng)效果實(shí)現(xiàn)
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
搭建基本結(jié)構(gòu) <div class="box"> <span class="num">0123456789</span> </div> .box { height: 82px; width: 54px; line-height: 82px; text-align: center; background-color: #149373; border-radius: 10px; margin-right: 5px; } .num { font-size: 62px; } 此時(shí)，出來(lái)的效果為
若是想要滾動(dòng)效果的話，就需要將數(shù)字變成豎向排布，這樣才能加上下移動(dòng)效果。這時(shí)需要加兩個(gè)css屬性 writing-mode: vertical-lr; text-orientation: upright;
此時(shí)已經(jīng)有點(diǎn)接近目標(biāo)了，而后需要做的就是要改變字符串的位置，讓相應(yīng)的數(shù)字出現(xiàn)在框中。改變位置我們可以讓span變成絕對(duì)定位，然后通過(guò)transform來(lái)操作 .box { height: 82px; width: 54px; line-height: 82px; text-align: center; background-color: #149373; border-radius: 10px; margin-right: 5px; position: relative; writing-mode: vertical-lr; text-orientation: upright; } .num { position: absolute; left: 50%; top: 10px; font-size: 62px; transform: translate(-50%, 0); }
此時(shí)設(shè)置translate(-50%, 0)時(shí)，正好0在框中，若設(shè)置translate(-50%, -50%)時(shí)，應(yīng)該是5在框中
后續(xù)只需要我們改變transform中translate設(shè)置，就可以實(shí)現(xiàn)框中出現(xiàn)不同的數(shù)字，我們要封裝成通用的組件，就是接收外部傳入的數(shù)字，然后設(shè)置translate來(lái)達(dá)到通用的效果，此時(shí)我們可以將transform放置在我們的style中。再增加一個(gè)動(dòng)畫(huà)，transition: all 0.5s; <template> <div> <span :style="`transform: translate(-50%, -${number * 10}%)`">0123456789</span> </div> </template> <script setup> defineProps({ number: { type: Number, default: 5, required: true, }, }); </script>
這時(shí)候差不多達(dá)成了文字滾動(dòng)的效果了，此時(shí)只需要在box類下增加一個(gè)overflow: hidden，將超出部分隱藏那么數(shù)字滾動(dòng)效果就達(dá)成了。效果就如同
這就是簡(jiǎn)單的一個(gè)封裝，以下是完整代碼。借此做簡(jiǎn)單的做一個(gè)記錄，也希望大家可以來(lái)探討分享一下其它的實(shí)現(xiàn)方案。 <template> <div> <span :style="`transform: translate(-50%, -${number * 10}%)`">0123456789</span> </div> </template> <script setup> defineProps({ number: { type: Number, default: 5, required: true, }, }); </script> <style scoped> .box { height: 82px; width: 54px; line-height: 82px; text-align: center; background-color: #149373; border-radius: 10px; overflow: hidden; margin-right: 5px; position: relative; writing-mode: vertical-lr; text-orientation: upright; } .num { position: absolute; left: 50%; top: 10px; font-size: 62px; color: #ffffff; transition: all 1.5s; } </style> 該文章在 2023/8/18 10:09:02 編輯過(guò) |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
