html css制作特效,5分钟学会制作 CSS 波浪文本动画特效

源码

index.html

CSS 波浪文本动画特效

内

容

加

载

中

.

.

.

style.css

*{

margin: 0;

padding: 0;

font-family: "微软雅黑"

}

body{

display: flex;

align-items: center;

justify-content: center;

min-height: 100vh;

background: #000;

}

.wavy{

position: relative;

-webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0, 0, 0, 0.2))

}

.wavy span{

position: relative;

display: inline-block;

color: #fff;

font-size: 2em;

animation: animate 1s ease-in-out infinite;

animation-delay: calc(.1s*var(--i))

}

@keyframes animate{

0%{

transform: translateY(0px)

}

20%{

transform: translateY(-24px)

}

40%, 100%{

transform: translateY(0px)

}

}

文章每周持续更新，可以微信搜索「 CSS特效世界 」第一时间阅读和催更(比博客早一到两篇哟)