纯css实现海面漂浮文字动画效果
代码语言:html
所属分类:动画
代码描述:纯css实现海面漂浮文字动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --animation-time: 2s; } @keyframes spin1 { 0% { transform: rotate(2deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-15px); } 100% { transform: rotate(2deg) translateY(0); } } .lt1 { animation: spin1 var(--animation-time) infinite alternate; } @keyframes spin2 { 0% { transform: rotate(4deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-15px); } 100% { transform: rotate(4deg) translateY(0); } } .lt2 { animation: spin2 var(--animation-time) infinite alternate; } @keyframes spin3 { 0% { transform: rotate(6deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-15px); } 100% { transform: rotate(6deg) translateY(0); } } .lt3 { animation: spin3 var(--animation-time) infinite alternate; } @keyframes spin4 { 0% { transform: rotate(8deg) translateY(0); } 50% { transform: rotate(-8deg) translateY(-15px); } 100% { transform: rotate(8deg) translateY(0); } } .lt4 { animation: spin4 var(--animation-time) infinite alternate; } @keyframes spin5 { 0% { transform: rotate(10deg) translateY(0); } 50% { transform: rotate(-10deg) translateY(-15px); } 100% { transform: rotate(10deg) translateY(0); } } .lt5 { animation: spin5 var(--animation-time) infinite alternate; } @keyframes spin6 { 0% { transform: rotate(12deg) translateY(0); } 50% { transform: rotate(-12deg) translateY(-15px); } 100% { transform: rotate(12deg) translateY(0); } } .lt6 { animation: spin6 var(--animation-time) infinite alternate; } @keyframes spin7 { 0% { transform: rotate(14deg) translateY(0); } 50% { transform: rotate(-14deg) translateY(-15px); } 100% { transform: rotate(14deg) translateY(0); } } .lt7 { animation: spin7 var(--animation-time) infinite alternate; } @keyframes spin8 { 0% { transform: rotate(16deg) translateY(0); } 50% { transform: rotate(-16deg) translateY(-15px); } 100% { transform: rotate(16deg) translateY(0); } } .lt8 { animation: spin8 var(--animation-time) infinite alternate; } @keyframes throb { 0% { font-variation-settings: "yest" 0, "gvty" 0; font-size: 100px; } 80% { font-variation-settings: "yest" 700, "gvty" 1000; font-size: 160px; } 100% { font-variation-settings: "yest" 700, "gvty" 1000; font-size: 160px; } } @keyframes moveSlideshow { 100% { -webkit-transform: translateX(-50%); } } .container { position: relative; overflow: hidden; height: 850px; } header { position: relative; height: 250px; width: 300%; z-index: 100; background: url("http://repo.bfw.wiki/bfwrepo/image/5ebb41ef827fd.png") repeat-x bottom; transform: translate3d(0, 0, 0); animation: moveSlideshow 20s linear infinite; } .backwaves { position: absolute; height: 50px; top: 200px; width: 300%; z-index: -20; background: url("http://repo.bfw.wiki/bfwrepo/image/5ebb41ef827fd.png") repeat-x bottom; animation: moveSlideshow 18s linear infinite; } .sea { height: 650px; background-image: url("http://repo.bfw.wiki/bfwrepo/image/5ebb41db5e07e.png"); background-size: cover; } .sea::after { content: ""; position: absolute; z-index: 10; top: 250px; left: 10; width: 100%; height: 600px; background-color: rgba(152, 213, 244, 0.85); } span { font-variation-settings: "yest" 0, "gvty" 0; width: 100%; animation: throb 10s forwards; margin: 0 -18px; } .letter-container { margin: -5px; padding: 20px; margin-top: 70px; background-color: #98d5f4; font-family: "Cheee"; text-align: center; font-size: 160px; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMTEhUTExMVFRUXFxgYGBgYGBgaGhgXFxcXFxcXHRgaHyggGholHRcVITEhJSkrLi4uFx8zODMtNygtLisBCgoKDg0OGhAQGi0lHyUtLS0tLS0tLS0tLS0tLS0tLS0tLS8tLS0tLS0tLS0tLS0vLS0tLy0tLS0tLzUtLS0tLf/AABEIALcBEwMBIgACEQEDEQH/xAAYAAEBAQEBAAAAAAAAAAAAAAABAAIDB//EACoQAAIAAgkFAQEAAwAAAAAAAAABEfACITFBUWGBkfEScaGx4dHBAxNS/8QAGAEBAQEBAQAAAAAAAAAAAAAAAQACBwX/xAAYEQEBAQEBAAAAAAAAAAAAAAAAEQEhQf/aAAwDAQACEQMRAD8A9NWRTkHnL9Hz6RzV6w6eX/B6eX+G0U1jBURmYImrvH7OgiGE3IYc3GoCMFE5DNZhbe2LlXsaokuP0Upu+moE6ygpJmJmdinMqodNP0kjYU7CgpBmWymA1RQm4oHSBlqoIqiZmHAFTDCfgJTUbCkUVUZuMsPPokBENPZWZGwbCKiJ.........完整代码请登录后点击上方下载按钮下载查看
网友评论0