css文字漂浮景深动画效果
代码语言:html
所属分类:视觉差异
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin: 0; font-size: 20px; } * { box-sizing: border-box; } .container { position: relative; display: flex; align-items: center; justify-content: center; height: 100vh; background: white; color: black; font-family: arial, sans-serif; overflow: hidden; } .content { position: relative; width: 600px; max-width: 100%; margin: 20px; background: white; padding: 60px 40px; text-align: center; box-shadow: -10px 10px 67px -12px rgba(0, 0, 0, 0.2); opacity: 0; animation: apparition 0.8s 1.2s cubic-bezier(0.39, 0.575, 0.28, 0.995) forwards; } .content p { font-size: 1.3rem; margin-top: 0; margin-bottom: 0.6rem; letter-spacing: 0.1rem; color: #595959; } .content p:last-child { margin-bottom: 0; } .content button { display: inline-block; margin-top: 2rem; padding: 0.5rem 1rem; border: 3px solid #595959; background: transparent; font-size: 1rem; color: #595959; text-decoration: none; cursor: pointer; font-weight: bold; } .particle { position: absolute; display: block; pointer-events: none; } .particle:nth-child(1) { top: 34.9939246659%; left: 47.8983382209%; font-size: 23px; filter: blur(0.02px); animation: 22s float2 infinite; } .particle:nth-child(2) { top: 59.0799031477%; left: 24.3664717349%; font-size: 26px; filter: blur(0.04px); animation: 40s floatReverse2 infinite; } .particle:nth-child(3) { top: 9.7442143727%; left: 9.7943192948%; font-size: 21px; filter: blur(0.06px); animation: 35s float2 infinite; } .particle:nth-child(4) { top: 92.4574209246%; left: 96.8688845401%; font-size: 22px; filter: blur(0.08px); animation: 40s float infinite; } .particle:nth-child(5) { top: 38.0487804878%; left: 29.4117647059%; font-size: 20px; filter: blur(0.1px); animation: 22s float2 infinite; } .particle:nth-child(6) { top: 34.3558282209%; left: 31.5270935961%; font-size: 15px; filter: blur(0.12px); animation: 29s floatReverse2 infinite; } .particle:nth-child(7) { top: 64.3902439024%; left: 31.3725490196%; font-size: 20px; filter: blur(0.14px); animation: 28s float infinite; } .particle:nth-child(8) { top: 16.7076167076%; left: 93.6883629191%; font-size: 14px; filter: blur(0.16px); animation: 30s floatReverse infinite; } .particle:nth-child(9) { top: 50.2463054187%; left: 58.3003952569%; font-size: 12px; filter: blur(0.18px); animation: 40s float2 infinite; } .particle:nth-child(10) { top: 34.3137254902%; left: 88.5826771654%; font-size: 16px; filter: blur(0.2px); animation: 22s float2 infinite; } .particle:nth-child(11) { top: 93.7114673243%; left: 25.7171117705%; font-size: 11px; filter: blur(0.22px); animation: 23s float2 infinite; } .particle:nth-child(12) { top: 53.5931790499%; left: 95.0048971596%; font-size: 21px; filter: blur(0.24px); animation: 26s float infinite; } .particle:nth-child(13) { top: 3.9312039312%; left: 66.0749506903%; font-size: 14px; filter: blur(0.26px); animation: 24s floatReverse2 infinite; } .particle:nth-child(14) { top: 70.5314009662%; left: 86.5758754864%; font-size: 28px; filter: blur(0.28px); animation: 21s floatReverse2 infinite; } .particle:nth-child(15) { top: 64.7058823529%; left: 40.3543307087%; font-size: 16px; filter: blur(0.3px); animation: 23s floatReverse infinite; } .particle:nth-child(16) { top: 69.5226438188%; left: 87.5122910521%; font-size: 17px; filter: blur(0.32px); animation: 21s floatReverse2 infinite; } .particle:nth-child(17) { top: 6.862745098%; left: 68.8976377953%; font-size: 16px; filter: blur(0.34px); animation: 26s floatReverse2 infinite; } .particle:nth-child(18) { top: 47.7466504263%; left: 9.7943192948%; font-size: 21px; filter: blur(0.36px); animation: 32s float2 infinite; } .particle:nth-child(19) { top: 28.9156626506%; left: 1.9417475728%; font-size: 30px; filter: blur(0.38px); animation: 40s floatReverse infinite; } .particle:nth-child(20) { top: 43.425814234%; left: 13.6054421769%; font-size: 29px; filter: blur(0.4px); animation: 36s floatReverse2 infinite; } .particle:nth-child(21) { top: 56.0885608856%; left: 86.8706811451%; font-size: 13px; filter: blur(0.42px); animation: 34s floatReverse2 infinite; } .particle:nth-child(22) { top: 67.6328502415%; left: 38.9105058366%; font-size: 28px; filter: blur(0.44px); animation: 30s float2 infinite; } .particle:nth-child(23) { top: 32.2738386308%; left: 21.6110019646%; font-size: 18px; filter: blur(0.46px); animation: 28s floatReverse2 infinite; } .particle:nth-child(24) { top: 34.2717258262%; left: 29.4985250737%; font-size: 17px; filter: blur(0.48px); animation: 34s floatReverse2 infinite; } .particle:nth-child(25) { top: 14.7239263804%; left: 74.8768472906%; font-size: 15px; filter: blur(0.5px); animation: 40s float2 infinite; } .particle:nth-child(26) { top: 23.3576642336%; left: 28.3757338552%; font-size: 22px; filter: blur(0.52px); animation: 25s float2 infinite; } .particle:nth-child(27) { top: 10.7579462103%; left: 40.2750491159%; font-size: 18px; filter: blur(0.54px); animation: 39s floatReverse infinite; } .particle:nth-child(28) { top: 89.6385542169%; left: 6.7961165049%; font-size: 30px; filter: blur(0.56px); animation: 32s float infinite; } .particle:nth-child(29) { top: 72.0194647202%; left: 57.7299412916%; font-size: 22px; filter: blur(0.58px); animation: 22s floatReverse infinite; } .particle:nth-child(30) { top: 45.4106280193%; left: 44.7470817121%; font-size: 28px; filter: blur(0.6px); animation: 33s float2 infinite; } .particle:nth-child(31) { top: 49.9388004896%; left: 51.1307767945%; font-size: 17px; filter: blur(0.62px); animation: 26s float infinite; } .particle:nth-child(32) { top: 61.9164619165%; left: 25.641025641%; font-size: 14px; filter: blur(0.64px); animation: 38s floatReverse infinite; } .particle:nth-child(33) { top: 17.3913043478%; left: 3.8910505837%; font-size: 28px; filter: blur(0.66px); animation: 29s float2 infinite; } .particle:nth-child(34) { top: 32.5123152709%; left: 46.442687747%; font-size: 12px; filter: blur(0.68px); animation: 25s float2 infinite; } .particle:nth-child(35) { top: 65.1048088779%; left: 24.727992087%; font-size: 11px; filter: blur(0.7px); animation: 34s floatReverse2 infinite; } .particle:nth-child(36) { top: 52.9411764706%; left: 28.5433070866%; font-size: 16px; filter: blur(0.72px); animation: 40s floatReverse infinite; } .particle:nth-child(37) { top: 24.0963855422%; left: 20.3883495146%; font-size: 30px; filter: blur(0.74px); animation: 21s float infinite; } .particle:nth-child(38) { top: 2.9268292683%; left: 18.6274509804%; font-size: 20px; filter: blur(0.76px); animation: 29s float infinite; } .particle:nth-child(39) { top: 7.8914919852%; left: 30.6627101879%; font-size: 11px; filter: blur(0.78px); animation: 32s floatReverse2 infinite; } .particle:nth-child(40) { top: 45.6310679612%; left: 45.8984375%; font-size: 24px; filter: blur(0.8px); animation: 33s floatReverse2 infinite; } .particle:nth-child(41) { top: 23.5006119951%; left: 59.9803343166%; font-size: 17px; filter: blur(0.82px); animation: 36s floatReverse2 infinite; } .particle:nth-child(42) { top: 68.0437424058%; left: 64.5161290323%; font-size: 23px; filter: blur(0.84px); animation: 29s floatReverse2 infinite; } .particle:nth-child(43) { top: 31.8072289157%; left: 97.0873786408%; font-size: 30px; filter: blur(0.86px); animation: 34s floatReverse2 infinite; } .particle:nth-child(44) { top: 86.5928659287%; left: 97.7295162883%; font-size: 13px; filter: blur(0.88px); animation: 31s floatReverse2 infinite; } .particle:nth-child(45) { top: 40.39408867%; left: 42.4901185771%; font-size: 12px; filter: blur(0.9px); animation: 28s float infinite; } .particle:nth-child(46) { top: 60.3406326034%; left: 52.8375733855%; font-size: 22px; filter: blur(0.92px); animation: 24s floatReverse2 infinite; } .particle:nth-child(47) { top: 17.3913043478%; left: 68.093385214%; font-size: 28px; filter: blur(0.94px); animation: 36s float2 infinite; } .particle:nth-child(48) { top: 86.851628468%; left: 60.2526724976%; font-size: 29px; filter: blur(0.96px); animation: 21s floatReverse infinite; } .particle:nth-child(49) { top: 11.7791411043%; left: 4.9261083744%; font-size: 15px; filter: blur(0.98px); animation: 33s floatReverse infinite; } .particle:nth-child(50) { top: 28.2582216809%; left: 26.444662096%; font-size: 21px; filter: blur(1px); animation: 29s float2 infinite; } .particle:nth-child(51) { top: 14.4927536232%; left: 47.6653696498%; font-size: 28px; filter: blur(1.02px); animation: 35s floatReverse2 infinite; } .particle:nth-child(52) { top: 85.7490864799%; left: 50.930460333%; font-size: 21px; filter: blur(1.04px); animation: 40s float2 infinite; } .particle:nth-child(53) { top: 55.1390568319%; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0