今天分享一个用 css3 的 animation 实现的一个文字入场动画，先来看成品图
实现思路很简单，就是首先将文字的标签元素居中，然后再通过 @keyframes 来设置其每个位置的样式
标签元素部分
<body> <span class="txt">欢迎来到Lpyexplore的编程小屋！</span></body>
@keyframes部分
@keyframes enter { /* 此时文字位于页面的最底部 文字被缩放为原本的0.1倍 文字为全透明状态 */ 0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1500px, 0); animation-timing-function: linear; } /* 此时文字位于页面居中位置上方60px的位置 文字被缩放为原本的0.75倍 文字为半透明状态 */ 50% { opacity: .5; transform: scale3d(0.75, 0.75, 0.75) translate3d(0, -60px, 0); animation-timing-function: linear; } /* 此时文字回归到正常位置 文字未被缩放 文字完全可见 */ 100% { opacity: 1; transform: scale3d(1, 1, 1) translate3d(0, 0, 0); animation-timing-function: linear; } }
具体样式
body{ width: 100vw; height: 100vh; background: rgb(13,197,193); /* 将文字居中 */ display: flex; justify-content: center; align-items: center;}.txt{ color: white; font-weight: bold; font-size: 18px; animation: 2s linear 0s normal enter;}
完整代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文字入场动画</title> <style> @keyframes enter { 0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1500px, 0); animation-timing-function: linear; } 50% { opacity: .5; transform: scale3d(0.75, 0.75, 0.75) translate3d(0, -60px, 0); animation-timing-function: linear; } 100% { opacity: 1; transform: scale3d(1, 1, 1) translate3d(0, 0, 0); animation-timing-function: linear; } } body{ width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background: rgb(13,197,193); } .txt{ color: white; font-weight: bold; font-size: 18px; animation: 2s linear 0s normal enter; }</style></head><body> <span class="txt">欢迎来到Lpyexplore的编程小屋！</span></body></html>
关注我，带你每天了解一个 css3 炫酷小动画
