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