css实现气泡文字排序漂浮动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现气泡文字排序漂浮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Quicksand"); body,.item,.bubble,.bubble::before,.bubble::after { display:flex; align-items:center; justify-content:center; } body,.bubble,.bubble::before,.bubble::after { width:100%; height:100%; } /* RESET */*,*::before,*::after { outline:0; margin:0; border:0; padding:0; box-sizing:border-box; font-family:'Quicksand',sans-serif; } html { width:100vw; height:100vh; } body { background:#1c0c2a; overflow:hidden; } .list { list-style:none; display:flex; align-items:center; } .item { width:10.29vw; height:10.29vw; animation:var(--time-sort) ease-in-out forwards 1s; position:absolute; --time-sort:10s; } .item:nth-of-type(1) { animation-name:sorting-1; --t-y:-20; --degrees:302; --time-bubble:10s; left:3.5vw; } @keyframes sorting-1 { 0%,9.09% { left:3.5vw; } 13.635%,18.18% { left:17.29vw; } 22.725%,27.27% { left:31.08vw; } 31.815%,36.36% { left:44.87vw; } 40.905%,45.45% { left:58.66vw; } 49.995%,100% { left:72.45vw; } }@keyframes radius-1 { 20% { border-radius:50% 40% 50% 50%; } 40% { border-radius:50% 50% 50% 40%; } 60% { border-radius:50% 50% 40% 50%; } 80% { border-radius:40% 50% 50% 50%; } }@keyframes scale-1 { 20% { transform:scale3d(0.91,1,1); } 40% { transform:scale3d(1,0.922,1); } 60% { transform:scale3d(0.88,1,1); } 80% { transform:scale3d(1,0.924,1); } }.item:nth-of-type(1) .bubble::before { animation-name:radius-1,scale-1; } .item:nth-of-type(1) .bubble::after { content:"88"; } .item:nth-of-type(2) { animation-name:sorting-2; --t-y:25; --degrees:106; --time-bubble:6s; left:17.29vw; } @keyframes sorting-2 { 0%,9.09% { left:17.29vw; } 13.635%,81.81% { left:3.5vw; } 86.355%,100% { left:17.29vw; } }@keyframes radius-2 { 20% { border-radius:50% 40% 50% 50%; } 40% { border-radius:50% 50% 50% 40%; } 60% { border-radius:50% 50% 40% 50%; } 80% { border-radius:40% 50% 50% 50%; } }@keyframes scale-2 { 20% { transform:scale3d(0.882,1,1); } 40% { transform:scale3d(1,0.87,1); } 60% { transform:scale3d(0.916,1,1); } 80% { transform:scale3d(1,0.898,1); } }.item:nth-of-type(2) .bubble::before { animation-name:radius-2,scale-2; } .item:nth-of-type(2) .bubble::after { content:"15"; } .item:nth-of-type(3) { animation-name:sorting-3; --t-y:11; --degrees:192; --time-bubble:8s; left:31.08vw; } @keyframes sorting-3 { 0%,18.18% { left:31.08vw; } 22.725%,54.54% { left:17.29vw; } 59.085%,63.63% { left:31.08vw; } 68.175%,72.72% { left:44.87vw; } 77.265%,100% { left:58.66vw; } }@keyframes radius-3 { 20% { border-radius:40% 50% 50% 50%; } 40% { border-radius:50% 40% 50% 50%; } 60% { border-radius:50% 50% 40% 50%; } 80% { border-radius:50% 50% 50% 40%; } }@keyframes scale-3 { 20% { transform:scale3d(1,0.862,1); } 40% { transform:scale3d(0.921,1,1); } 60% { transform:scale3d(1,0.94,1); } 80% { transform:scale3d(0.95,1,1); } }.item:nth-of-type(3) .bubble::before { animation-name:radius-3,scale-3; } .item:nth-of-type(3) .bubble::after { content:"86"; } .item:nth-of-type(4) { animation-name:sorting-4; --t-y:26; --degrees:97; --time-bubble:10s; left:44.87vw; } @keyframes sorting-4 { 0%,27.27% { left:44.87vw; } 31.815%,54.54% { left:31.08vw; } 59.085%,81.81% { left:17.29vw; } 86.355%,100% { left:3.5vw; } }@keyframes radius-4 { 20% { border-radius:50% 40% 50% 50%; } 40% { border-radius:50% 50% 40% 50%; } 60% { border-radius:40% 50% 50% 50%; } 80% { border-radius:50% 50% 50% 40%; } }@keyframes scale-4 { 20% { transform:scale3d(0.905,1,1); } 40% { transform:scale3d(1,0.878,1); } 60% { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0