大家好我是在石家庄做网站开发的一名网站开发工程师

    最近在进行网站开发时发现了遇到了 一个问题。如何让文字从上到下变色

    感兴趣的小伙伴往下看

直接上代码

// 一个原先显示文字，一个上加颜色的文字

<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;

}

}

以上就是石家庄尚武科技的网站开发工程师为大家分享的根据不同的屏幕大小引入不同的的css文件的方法希望对各位小伙伴有所帮助。

如果大家对技术方面有什么的问题，可以关注石家庄尚武科技官方公众号“尚武科技π”，其中会有大量关于”互联网+”的相关的内容供大家互相学习了解，同时欢迎大家一起讨论技术问题。