本文主要是介绍html字体大小动态变化,会呼吸的字体,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
目标:
使用css3实现字体大小动态的改变,顺便实现字体的渐变效果。代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>会呼吸的字体</title></head><style>#bigbox{text-align: center;}.font1{animation:bian 5s infinite;-webkit-animation:bian 0.3s infinite; /*Safari and Chrome*/animation-direction:alternate;/* 反向执行动画 */font-weight: 600;background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}@keyframes bian{from {font-size:40px;}to {font-size:42px;}}@-webkit-keyframes bian /*Safari and Chrome*/{from {font-size:40px;}to {font-size:42px;}}</style><body><div id="bigbox"><span class="font1">糟了,这是心动的感觉</span></div></body>
</html>
效果图:
这篇关于html字体大小动态变化,会呼吸的字体的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!