HTML中的文字如何从上到下变色？

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

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

感兴趣的小伙伴往下看

直接上代码

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

<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文件的方法希望对各位小伙伴有所帮助。

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

当前文章：HTML中的文字如何从上到下变色？
网页路径：/news11/313211.html

成都网站建设公司_创新互联，为您提供电子商务、域名注册、虚拟主机、品牌网站制作、关键词优化、品牌网站设计

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联