大家好我是在成都做網(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;

}

}

以上就是成都創(chuàng)新互聯(lián)的網(wǎng)站開(kāi)發(fā)工程師為大家分享的根據(jù)不同的屏幕大小引入不同的的css文件的方法希望對(duì)各位小伙伴有所幫助。

如果大家對(duì)技術(shù)方面有什么的問(wèn)題，可以關(guān)注成都創(chuàng)新互聯(lián)官方公眾號(hào)“創(chuàng)新互聯(lián)π”，其中會(huì)有大量關(guān)于”互聯(lián)網(wǎng)+”的相關(guān)的內(nèi)容供大家互相學(xué)習(xí)了解，同時(shí)歡迎大家一起討論技術(shù)問(wèn)題。

當(dāng)前文章：HTML中的文字如何從上到下變色？
網(wǎng)頁(yè)路徑：http://chinadenli.net/news11/313211.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、域名注冊(cè)、虛擬主機(jī)、品牌網(wǎng)站制作、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)