css实现文字沿着边框滚动显示动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现文字沿着边框滚动显示动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --color: #F1DF40; --color-b: #625AEE; } html { height: 100%; } body { margin: 0; background-color: #384052; height: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; -ms-flex-pack: center; font-family: 'Helvetica Neue', Arial; font-size: 18px; letter-spacing: 3.3px; font-weight: bold; } .container { position: relative; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 30px; box-sizing: border-box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; } .box { position: relative; display: inline-block; box-sizing: border-box; width: 20%; padding-bottom: 20%; margin: 0 2.5%; background-color: var(--color-b); } .box--1 span { font-size: 1em; display: inline-block; text-align: center; width: 100%; -moz-animation: marquee 4s linear infinite; -webkit-animation: marquee 4s linear infinite; animation: marquee 4s linear infinite; } .box--1 span:nth-child(1) { position: absolute; left: -100%; -moz-animation: marquee 4s 2s linear infinite; -webkit-animation: marquee 4s 2s linear infinite; animation: marquee 4s 2s linear infinite; } .box--1 .line { position: absolute; bottom: 0; left: 0; right: 0; height: 34px; overflow: hidden; white-space: nowrap; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; -ms-flex-pack: center; background-color: var(--color); } @keyframes marquee { 0% { left: 0; -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { left: 0; -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); } } .box--2 { overflow: hidden; } .box--2 .text { position: absolute; bottom: 30px; left: 30px; right: 30px; height: 34px; font-size: 1em; background-color: var(--color); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; -ms-flex-pack: center; } .box--2 .border { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; outline: 30px solid #000; outline-offset: -30px; } .box--2 span { position: absolute; bottom: -100%; width: 30px; height: 30px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; -ms-flex-pack: center; font-size: 0.8em; letter-spacing: 2px; color: var(--color); -moz-animation: border 8s linear infinite; -webkit-animation: border 8s linear infinite; animation: border 8s linear infinite; } .border span:nth-child(1) { animation-delay: 1s; } .border span:nth-child(2) { animation-delay: 2s; } .border span:nth-child(3) { animation-delay: 3s; } .border span:nth-child(4) { animation-delay: 4s; } .border span:nth-child(5) { animation-delay: 5s; } .border span:nth-child(6) { animation-delay: 6s; } .border span:nth-child(7) { animation-delay: 7s; } .border span:nth-child(8) { animation-delay: 8s; } @keyframes border { 0% { left: 0px; bottom: 0px; right: auto; top: auto; -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 0.001% { left: auto; bottom: 0px; right: 80%; top: auto; } 25% { left: auto; bottom: 0px; right: 0; top: auto; -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 25.001% { left: auto; bottom: auto; right: 0; top: 80%; -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } 50% { left: auto; bottom: auto; right: 0; top: 0; -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } 50.001% { left: 80%; bottom: auto; right: auto; top: 0; -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 75% { left: 0px; bottom: auto; right: auto; top: auto; -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 75.001% { left: 0px; bottom: 80%; right: auto; top: auto; -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } 99.881% { left: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0