之前做一些設(shè)計(jì)給的特效數(shù)字時(shí)都是讓ui切圖給我，然后存到數(shù)組葵诈，根據(jù)實(shí)際數(shù)字去取，感覺又麻煩又low
剛好瀏覽別人的網(wǎng)站的時(shí)候看到了另外一種炫酷的方式
看一下效果圖
image.png
仔細(xì)研究了一下稚铣，使用到了一種字體 ---'digifacewide', serif;
于是我自己測試了一下寫了一個(gè)demo是整，發(fā)現(xiàn)用這種字體后并沒有出現(xiàn)想象的效果，后來查閱了一下網(wǎng)站發(fā)現(xiàn)這種字體時(shí)需要下載的 digifacewide.ttf拭嫁，于是在網(wǎng)上找到這個(gè)文件下載下來
然后用scss引入
@font-face {
font-family: 'digifacewide';
src: url('./digifacewide.ttf');
}
.specialFont{
font-family: 'digifacewide', serif;
font-size: 44px;
}
顏色什么的其實(shí)時(shí)可以自己控制的看一個(gè)比較完善的例子
<template>
<ul class="net-main__people">
<li :value="onlineNumber[0]">{{onlineNumber[0]}}</li>
<li :value="onlineNumber[1]">{{onlineNumber[1]}}</li>
<li :value="onlineNumber[2]">{{onlineNumber[2]}}</li>
<li :value="onlineNumber[3]">{{onlineNumber[3]}}</li>
<li :value="onlineNumber[4]">{{onlineNumber[4]}}</li>
<li :value="onlineNumber[5]">{{onlineNumber[5]}}</li>
</ul>
</template>
<script>
export default{
data(){
return{
onlineNumber: [0,0,8,7,8,5]
}
}
}
</script>
<style lang="scss">
@font-face {
font-family: 'digifacewide';
src: url('./digifacewide.ttf');
}
.net-main__people {
overflow: hidden;
width: 420px;
height: 86px;
margin: 0 auto;
li {
position: relative;
float: left;
margin: 0 5px;
padding: 0 10px;
width: 33px;
height: 86px;
line-height: 86px;
font-size: 44px;
color: blue;
font-family: 'digifacewide', serif;
background: rgba(67, 142, 255, 0.2);
}
li::before {
content: attr(value);
z-index: 10;
position: absolute;
color: #00f8FF;
mask: linear-gradient(to top, blue, transparent);
}
}
</style>
