html文字简单动画效果,纯css文本动画效果

最新推荐文章于 2022-08-16 11:52:36 发布

那你干哈

最新推荐文章于 2022-08-16 11:52:36 发布

阅读量473

点赞数

文章标签： html文字简单动画效果

这段CSS代码定义了一个按钮的样式，包括宽度、内边距、字体、颜色和过渡效果。当鼠标悬停在按钮上时，按钮会产生文本阴影的动画效果，通过@keyframes规则实现了颜色和阴影的交替变化，增加了交互的视觉吸引力。

摘要由CSDN通过智能技术生成

.container {

width:600px;

margin:100px auto 0;

}

button {

font-family:'Audiowide';

text-align:center;

color:#00a67c;

font-size:7em;

-webkit-transition:all 1.5s ease;

transition:all 1.5s ease;

}

button:hover {

color:#fff;

-webkit-animation:Glow 1.5s ease infinite alternate;

animation:Glow 1.5s ease infinite alternate;

}

@-webkit-keyframes Glow {

from {

text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #00a67c,0 0 70px #00a67c,0 0 80px #00a67c,0 0 100px #00a67c,0 0 150px #00a67c;

}

to {

text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #00a67c,0 0 35px #00a67c,0 0 40px #00a67c,0 0 50px #00a67c,0 0 75px #00a67c;

}

}@keyframes Glow {

from {

text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #00a67c,0 0 70px #00a67c,0 0 80px #00a67c,0 0 100px #00a67c,0 0 150px #00a67c;

}

to {

text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #00a67c,0 0 35px #00a67c,0 0 40px #00a67c,0 0 50px #00a67c,0 0 75px #00a67c;

}

关注