大家好我是在石家莊做網(wǎng)站開發(fā)的一名網(wǎng)站開發(fā)工程師
最近在進行網(wǎng)站開發(fā)時發(fā)現(xiàn)了遇到了 一個問題。如何讓文字從上到下變色
感興趣的小伙伴往下看
直接上代碼
// 一個原先顯示文字,一個上加顏色的文字
<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)站開發(fā)工程師為大家分享的根據(jù)不同的屏幕大小引入不同的的css文件的方法希望對各位小伙伴有所幫助。
如果大家對技術方面有什么的問題,可以關注石家莊尚武科技官方公眾號“尚武科技π”,其中會有大量關于”互聯(lián)網(wǎng)+”的相關的內(nèi)容供大家互相學習了解,同時歡迎大家一起討論技術問題。