js+css实现文字渐变滚动效果代码
代码语言:html
所属分类:动画
代码描述:js+css实现文字渐变滚动效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style>#page { align-items: center; background: linear-gradient(to top right, #fc737a 10%, #ff7c9d 65%, #ffc01a 125%); bottom: 0; display: flex; justify-content: center; left: 0; position: absolute; right: 0; top: 0; transition: opacity 1s; } #phrase_box { display: flex; flex-flow: column; height: 150px; overflow: hidden; width: 260px; } #phrases { -webkit-animation: slide-phrases-upward 20s; animation: slide-phrases-upward 20s; } #footer { bottom: 30px; color: white; display: flex; justify-content: center; left: 0; position: fixed; right: 0; } @-webkit-keyframes slide-phrases-upward { 0% { transform: translateY(0px); } 5% { transform: translateY(-50px); } 10% { transform: translateY(-100px); } 15% { transform: translateY(-150px); } 20% { transform: translateY(-200px); } 25% { transform: translateY(-250px); } 30% { transform: translateY(-300px); } 35% { transform: translateY(-350px); } 40% { transform: translateY(-400px); } 45% { transform: translateY(-450px); } 50% { transform: translateY(-500px); } 55% { transform: translateY(-550px); } 60% { transform: translateY(-600px); } 65% { transform: translateY(-650px); } 70% { transform: translateY(-700px); } 75% { transform: translateY(-750px); } 80% { transform: translateY(-800px); } 85% { transform: translateY(-850px); } 90% { transform: translateY(-900px); } 95% { transform: translateY(-950px); } 100% { transform: translateY(-1000px); } } @keyframes slide-phrases-upward { 0% { transform: translateY(0px); } 5% { transform: translateY(-50px); } 10% { transform: translateY(-100px); } 15% { transform: translateY(-150px); } 20% { transform: translateY(-200px); } 25% { transform: translateY(-250px); } 30% { transform: translateY(-300px); } 35% { transform: translateY(-350px); } 40% { transform: translateY(-400px); } 45% { transform: translateY(-450px); } 50% { transform: translateY(-500px); } 55% { transform: translateY(-550px); } 60% { transform: translateY(-600px); } 65% { transform: translateY(-650px); } 70% { transform: translateY(-700px); } 75% { transform: translateY(-750px); } 80% { transform: translateY(-800px); } 85% { transform: translateY(-850px); } 90% { transform: translateY(-900px); } 95% { transform: translateY(-950px); } 100% { transform: translateY(-1000px); } } #loadingCheckCircleSVG-0 { -webkit-animation: fill-to-white 5000ms; animation: fill-to-white 5000ms; -webkit-animation-delay: -1.5s; animation-delay: -1.5s; fill: white; opacity: 0; } #load.........完整代码请登录后点击上方下载按钮下载查看
网友评论0