css泳池倒影水纹波动动画效果代码
代码语言:html
所属分类:动画
代码描述:css泳池倒影水纹波动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { font-size: 12px; } body { font-size: 12px; height: 100%; display: grid; font-family: "Cooper"; height: 100vh; margin: 0; background: #efefef; } body svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: clamp(600px, 900px, 100vh); width: auto; box-shadow: 0 40px 60px -40px rgba(0, 0, 0, 0.25); } body svg foreignObject { position: absolute; width: 100%; height: 100%; background: radial-gradient(circle at bottom, rgba(82, 125, 18, 0.5) 50%, rgba(35, 54, 8, 0.75)); } body svg foreignObject:before { content: ""; position: absolute; width: 105%; height: 105%; z-index: 10; left: -2.5%; top: -2.5%; box-shadow: inset 0 0 0 50px #fff; box-sizing: border-box; } body svg foreignObject #wrap { position: absolute; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; flex-wrap: wrap; } @keyframes hifive { 20% { transform: translate(-300px, -60px) rotate(10deg); } 21.5% { transform: translate(0px, 0px) rotate(0deg); } 24% { transform: translate(0px, 0px) rotate(0deg); } 27.5% { transform: translate(-300px, -60px) rotate(10deg); } } body svg foreignObject #wrap .hand { width: 250px; height: 350px; position: absolute; -webkit-mask: linear-gradient(to bottom, #000 70%, rgba(0, 0, 0, 0.05)); z-index: 8; left: 190px; top: calc(50% - 175px); } body svg foreignObject #wrap .hand:after { content: ""; position: absolute; width: 200px; height: 200px; left: 25px; top: 50px; background: linear-gradient(to right, transparent calc(50% - 4px), #feb300 calc(50% - 4px), #feb300 calc(50% + 2px), transparent calc(50% + 2px)), linear-gradient(to bottom, transparent calc(50% - 4px), #feb300 calc(50% - 4px), #feb300 calc(50% + 2px), transparent calc(50% + 2px)), linear-gradient(45deg, transparent calc(50% - 4px), #feb300 calc(50% - 4px), #feb300 calc(50% + 2px), transparent calc(50% + 2px)), linear-gradient(-45deg, transparent calc(50% - 4px), #feb300 calc(50% - 4px), #feb300 calc(50% + 2px), transparent calc(50% + 2px)); border-radius: 100%; -webkit-mask: radial-gradient(circle at center, transparent 25%, #000 25%, #000 50%, transparent 50%) 50% 50%/0px 0px no-repeat; animation: resize 18s ease-in-out infinite; opacity: 0; } @keyframes resize { 21% { -webkit-mask-size: 0px 0px; opacity: 1; } 23.5% { -webkit-mask-size: 200px 200px; filter: hue-rotate(-30deg); opacity: 1; } 25% { -webkit-mask-size: 300px 300px; opacity: 0; } } @keyframes wiggle { to { transform: rotate(1.5deg); } } @keyframes hifive2 { 30% { top: 0; } 45% { top: 100%; } 90% { top: 100%; } } body svg foreignObject #wrap .signwrap { display: flex; justify-content: center; align-items: center; width: 100%; position: relative; height: 50%; transform-style: preserve-3d; perspective: 300px; } body svg foreignObject #wrap .signwrap .sign { --z: 20px; background: #fff; padding: 0; box-shadow: -3px 1px 0 #7c7c7c, inset 0 0 0 3px #000; border-radius: 10px; width: 225px; height: 280px; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: flex-start; transform-origin: 50% calc(100% + 125px); transform: translateY(-100px) rotate(-2.5deg); transform-style: preserve-3d; } body svg foreignObject #wrap .signwrap .sign:before { content: ""; position: absolute; width: 20px; height: 125px; top: calc(100% + 1px); background: #a58725; left: calc(50% - 10px); border-radius: 0 0 50px 50px; box-shadow: inset 0 0 0 3px #000, inset 10px 10px 0 #675417, 0 5px 5px #6b9532; z-index: -1; } body svg foreignObject #wrap .signwrap .sign h1, body svg foreignObject #wrap .signwrap .sign h2, body svg foreignObject #wrap .signwrap .sign h3, body svg foreignObject #wrap .signwrap .sign ol { padding: 0 20px; line-height: 1; } body svg foreignObject #wrap .signwrap .sign h1 { font-size: 2.25rem; margin: 0 0 5px; text-transform: uppercase; text-align: center; padding: 10px 20px; background: #da3743; color: #fff; border-radius: 10px 10px 0 0; box-shadow: inset 0 0 0 3px #000; } body svg foreignObject #wrap .signwrap .sign h2, body svg foreignObject #wrap .signwrap .sign h3 { margin: 0px 0; } body svg foreignObject #wrap .signwrap .sign h3 { color: #da3743; font-size: 2rem; } body svg foreignObject #wrap .signwrap .sign h2 { font-size: 1.25rem; color: #000; } body svg fo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0