纯css实现flash过渡到css3动画的效果
代码语言:html
所属分类:动画
代码描述:纯css实现flash过渡到css3动画的效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Mountains+of+Christmas&display=swap" rel="stylesheet"> <style> *, *::before, *::after { box-sizing: border-box; } body { min-height: 100vh; background-color: #111; display: grid; place-content: center; grid-template-areas: "screen"; color: #fff; font-family: "Mountains of Christmas", cursive; font-weight: 300; } body > * { grid-area: screen; } .loader { text-align: center; font-size: 2.5rem; -webkit-animation: fadeOut 180ms 3.8s linear forwards; animation: fadeOut 180ms 3.8s linear forwards; place-self: center; font-style: italic; } .loader strong { font-weight: bold; color: #fe0000; } .loader strong::before { content: counter(count); -webkit-animation: loader 3.5s 0.75s linear forwards; animation: loader 3.5s 0.75s linear forwards; counter-reset: count 0; } .loader__bar { height: 30vh; width: 60vw; box-shadow: 0 0 0 3px #111, 0 0 0 6px #fe0000; border-radius: 1px; margin-bottom: 1rem; display: grid; grid-template-areas: "bar"; } .loader__bar::after { content: ""; grid-area: bar; -webkit-animation: bar 3s 0.75s linear forwards; animation: bar 3s 0.75s linear forwards; background-image: -webkit-gradient(linear, left top, right top, from(white), to(black)); background-image: linear-gradient(to right, white, black); -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); } .stage { width: 800px; height: 600px; display: grid; place-items: center; grid-template-areas: "stage"; overflow: hidden; } .stage > * { grid-area: stage; text-align: center; } .logo { font-family: "Verdana"; font-style: italic; align-self: center; font-size: 33rem; color: #fe0000; -webkit-transform: skew(-6deg) rotate3d(1, 0, 0, 25deg); transform: skew(-6deg) rotate3d(1, 0, 0, 25deg); } .logo::before, .logo::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; color: #890f0f; z-index: -1; opacity: 0; } .logo::before { content: "S"; -webkit-transform: translate(-13%, -12%); transform: translate(-13%, -12%); -webkit-animation: fadeInUpS 2s 5.25s linear forwards; animation: fadeInUpS 2s 5.25s linear forwards; } .logo::after { content: "C"; -webkit-transform: translate(1.5%, 6%); transform: translate(1.5%, 6%); -webkit-animation: fadeInUpC 2s 5.25s linear forwards; animation: fadeInUpC 2s 5.25s linear forwards; } .logo span { background: #fe0000; background-image: linear-gradient(-160deg, #fe0000 17.5%, yellow 18%, #fe0000 18.5%, #fe0000 100%); background-size: 600% 300%; display: inline-block; background-clip: text; -webkit-background-clip: text; color: transparent; } .logo span:first-child { -webkit-transform: translate(250%, -15%); transform: translate(250%, -15%); -webkit-animation: s 3.25s 4s ease-in forwards, shine 1.5s 5.5s linear forwards; animation: s 3.25s 4s ease-in forwards, shine 1.5s 5.5s linear forwards; } .logo span:last-child { -webkit-transform: translate(-250%, 3%); transform: translate(-250%, 3%); -webkit-animation: c 3.25s 4s ease-in forwards, shine 1.5s 5.5s linear forwards; animation: c 3.25s 4s ease-in forwards, shine 1.5s 5.5s linear forwards; } header { z-index: 1; } h1, p { text-shadow: -0.025em 0.025em #222; opacity: 0; } h1 { font-size: 6rem; font-weight: 300; line-height: 1.25; color: #fe0000; -webkit-animation: fadeIn 0.25s 7s linear forwards; animation: fadeIn 0.25s 7s linear forwards; } p { font-size: 3rem; -webkit-animation: fadeIn 0.25s 8s linear forwards; animation: fadeIn 0.25s 8s linear forwards; } @-webkit-keyframes loader { 0% { counter-increment: count 0; } 10% { counter-increment: count 10; } 20% { counter-increment: count 32; } 25% { counter-increment: count 55; } 35% { counter-increment: count 63; } 45% { counter-increment: count 95; } 100% { counter-increment: count 100; } } @keyframes loader { 0% { counter-increment: count 0; } 10% { counter-increment: count 10; } 20% { counter-increment: count 32; } 25% { counter-increment: count 55; } 35% { counter-increment: count 63; } 45% { counter-increment: count 95; } 100% { counter-increment: count 100; } } @-webkit-keyframes bar { 0% { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); } 10% { -webkit-clip-path: inset(0 90% 0 0); clip-path: inset(0 90% 0 0); } 20% { -webkit-clip-path: inset(0 68% 0 0); clip-path: inset(0 68% 0 0); } 25% { -webkit-clip-path: inset(0 45% 0 0); clip-path: inset(0 45% 0 0); } 35% { -webkit-clip-path: inset(0 37% 0 0); clip-path: inset(0 37% 0 0); } 45% { -webkit-clip-path: inset(0 5% 0 0); clip-path: inset(0 5% 0 0); } 100% { -webkit-clip-path: inset(0 0% 0 0); clip-path: inset(0 0% 0 0); } } @keyframes bar { 0% { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); } 10% { -webkit-clip-path: inset(0 90% 0 0); clip.........完整代码请登录后点击上方下载按钮下载查看
网友评论0