1.鼠标悬浮文字跳动动画效果
<p class="dajianshi ">应用名称:</p>
.dajianshi {font-size: 14px;color: black;
}.dajianshi:hover {animation: animate 0.5s linear infinite;
}@keyframes animate {0%,25% {text-shadow: 2px 5px 2px rgb(255, 151, 151);}50% {text-shadow: 2px -5px 2px rgb(36, 110, 36);}75% {text-shadow: -2px 5px 2px rgb(138, 138, 226);}100% {text-shadow: -2px -5px 2px rgb(216, 128, 216);}
}
2.文字颜色渐变的流光效果
.dajianshi {margin-top: 100px;font-size: 14px;background: -webkit-linear-gradient(75deg, #2eaf8d, #2f6ae6 25%, #347ba6 50%, #16d225 55%, #4cc410 60%, #bb2c10 80%, #2f63a4 95%, #28dfd4);-webkit-text-fill-color: transparent;-webkit-background-clip: text;-webkit-background-size: 200% 100%;-webkit-animation: flowCss 5s infinite linear;
}@-webkit-keyframes dajianshiFlow {0% {/* 移动背景位置 */background-position: 0 0;}100% {background-position: -400% 0;}
}
.dajianshi:hover {-webkit-animation: dajianshiFlow 3s infinite linear;
}