大家好我是在石家莊做網(wǎng)站開(kāi)發(fā)的一名網(wǎng)站開(kāi)發(fā)工程師
最近在進(jìn)行網(wǎng)站開(kāi)發(fā)時(shí)發(fā)現(xiàn)了遇到了 一個(gè)問(wèn)題。如何讓文字從上到下變色
感興趣的小伙伴往下看
直接上代碼
// 一個(gè)原先顯示文字,一個(gè)上加顏色的文字
<div class="core">
<div class="core-text">
<div id="corea" class="cores">核心理念</div>
<div class="coreb">核心理念</div>
</div>
</div>
//這里上樣式
.core-text {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
font-size: 32px;
margin: 0.3rem 0;
width: 100%;
max-width: 100%;
position: relative;
}
#corea{
position: absolute;
pointer-events: none;
top:0;
overflow: hidden;
width:130px;
max-width: 100%;
height: 36px;
text-align: right;
overflow: hidden;
}
.cores{
display: none;
}
.core:hover .cores{
animation: tests;
animation-duration: 0.5s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:1;
animation-direction:normal;
color:#005ead;
overflow: hidden;
}
@keyframes tests{
0%{
height: 0px;
}
25%{
height: 15px;
}
50%{
height: 20px;
}
75%{
wheight: 25px;
}
100%{
height: 36px;
}
}
以上就是石家莊尚武科技的網(wǎng)站開(kāi)發(fā)工程師為大家分享的根據(jù)不同的屏幕大小引入不同的的css文件的方法希望對(duì)各位小伙伴有所幫助。
如果大家對(duì)技術(shù)方面有什么的問(wèn)題,可以關(guān)注石家莊尚武科技官方公眾號(hào)“尚武科技π”,其中會(huì)有大量關(guān)于”互聯(lián)網(wǎng)+”的相關(guān)的內(nèi)容供大家互相學(xué)習(xí)了解,同時(shí)歡迎大家一起討論技術(shù)問(wèn)題。