js+svg实现爱心糖果散开动画效果代码
代码语言:html
所属分类:表白
代码描述:js+svg实现爱心糖果散开动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> BODY { background: #000; padding:0; margin:0; } .svg-fulscreen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: translateZ(200px); transform: translateZ(200px); } .heart__fill-circle { -webkit-transform-origin: 400px 300px; transform-origin: 400px 300px; -webkit-animation: rotation 17s infinite alternate; animation: rotation 17s infinite alternate; } .heart__fill-circle:nth-child(6n + 1) { -webkit-animation-delay: -2s; animation-delay: -2s; } .heart__fill-circle:nth-child(6n + 2) { -webkit-animation-delay: -1s; animation-delay: -1s; } .heart__fill-circle:nth-child(6n + 3) { -webkit-animation-delay: -2.5s; animation-delay: -2.5s; } .heart__fill-circle:nth-child(6n + 4) { -webkit-animation-delay: -.5s; animation-delay: -.5s; } .heart__fill-circle:nth-child(6n + 5) { -webkit-animation-delay: -1.5s; animation-delay: -1.5s; } @-webkit-keyframes rotation { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotation { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } </style> </head> <body> <svg class="svg-fulscreen heart" viewBox="0 0 800 600"> <filter id="filter-gooey" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feGaussianBlur stdDeviation="10" x="0%" y="0%" width="100%" height="100%" edgeMode="none" in="SourceGraphic" result="blur"/> <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -10" x="0%" y="0%" width="100%" height="100%" in="blur" result="colormatrix"/> </filter> <filter id="filter-heart-blur" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feGaussianBlur stdDeviation="1" x="0%" y="0%" width="100%" height="100%" edgeMode="none" result="blur"/> <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="1" seed="1" stitchTiles="stitch" result="turbulence"/> <feDisplacementMap scale="50" xChannelSelector="R" yChannelSelector="A" class="distortion-waves__map" in="blur" in2="turbulence" result="displacementMap"/> </filter> <mask id="mask" maskUnits="objectBoundingBox"> <g filter="url(#filter-gooey)" fill="white"> <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/> <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/> <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/> <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/> <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/> <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/> <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/> <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/> <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/> <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/> <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/> <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/> <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/> <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/> <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/> <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/> <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/> <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/> <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/> <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/> <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/> <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/> <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/> <circle r="50" cx="50%" cy="50%" class="heart__mask-circle"/> <circle r="50" cx="50%&quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0