數字滾動效果實現
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
搭建基本結構 <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; } 此時，出來的效果為
若是想要滾動效果的話，就需要將數字變成豎向排布，這樣才能加上下移動效果。這時需要加兩個css屬性 writing-mode: vertical-lr; text-orientation: upright;
此時已經有點接近目標了，而后需要做的就是要改變字符串的位置，讓相應的數字出現在框中。改變位置我們可以讓span變成絕對定位，然后通過transform來操作 .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); }
此時設置translate(-50%, 0)時，正好0在框中，若設置translate(-50%, -50%)時，應該是5在框中
后續只需要我們改變transform中translate設置，就可以實現框中出現不同的數字，我們要封裝成通用的組件，就是接收外部傳入的數字，然后設置translate來達到通用的效果，此時我們可以將transform放置在我們的style中。再增加一個動畫，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>
這時候差不多達成了文字滾動的效果了，此時只需要在box類下增加一個overflow: hidden，將超出部分隱藏那么數字滾動效果就達成了。效果就如同
這就是簡單的一個封裝，以下是完整代碼。借此做簡單的做一個記錄，也希望大家可以來探討分享一下其它的實現方案。 <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 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
