时钟icon走动图标效果
代码语言:html
所属分类:动画
代码描述:时钟icon走动图标效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .container { text-align: center; width: 100%; margin-top: 20px; padding: 20px; } body { background-color: #63d7a5; } </style> </head> <body translate="no"> <div class="container"> <svg width="600" height="600" class='svg-element'> <filter id="f4" x="-50%" y="-20%" width="200%" height="140%"> <feOffset result="offOut" in="SourceAlpha" dx="0" dy="25" /> <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" /> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> <filter id="blurred-source" x="-50%" y="-20%" width="200%" height="140%"> <feGaussianBlur in="color" stdDeviation="5" result="blurOut" /> </filter> <filter id="inset-shadow"> <feOffset dx="0" dy="10" /> <feGaussianBlur stdDeviation="15" result="offset-blur" /> <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse" /> <feFlood flood-color="#07594f" flood-opacity="1" result="color" /> <feComposite operator="in" in="color" in2="inverse" result="shadow" /> <feComponentTransfer in="shadow" result="shadow"> <feFuncA type="linear" slope="1" /> </feComponentTransfer> <feComposite operator="over" in="shadow" in2="SourceGraphic" /> </filter> <filter id="inset-shadow-big"> <feOffset dx="0" dy="3" /> <feGaussianBlur stdDeviation="2" result="offset-blur" /> <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse" /> <feFlood flood-color="white" flood-opacity="1" result="color" /> <feComposite operator="in" in="color" in2="inverse" result="shadow" /> <feComponentTransfer in="shadow" result="shadow"> <feFuncA type="linear" slope="0.5" /> </feComponentTransfer> <feComposite operator="over" in="shadow" in2="SourceGraphic" /> </filter> <filter id="inset-shadow-big-bottom" x="-50%" y="-30%" width="200%" height="160%"> <feOffset dx="0" dy="8" /> <feGaussianBlur stdDeviation="2" result="offset-blur" /> <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse" /> <feFlood flood-color="#FFF" flood-opacity="1" result="color" /> <feComposite operator="in" in="color" in2="inverse" result="shadow" /> <feComponentTransfer in="shadow" result="shadow"> <feFuncA type="linear" slope="0.5" /> </feComponentTransfer> <feComposite operator="over" in="shadow" in2="SourceGraphic" result='final-shadow-1' /> <feOffset dx="0" dy="-12" /> <feGaussianBlur stdDeviation="2" result="offset-blur" /> <feComposite operator="out" in="final-shadow-1" in2="offset-blur" result="inverse" /> <feFlood flood-color="#69c39b" flood-opacity="1" result="color" /> <feComposite operator="in" in="color" in2="inverse" result="shadow" /> <feComponentTransfer in="shadow" result="shadow"> <feFuncA type="linear" slope="0.5" /> </feComponentTransfer> <feComposite operator="over" in="shadow" in2="final-shadow-1" result='final-shadow-2' /> <feGaussianBlur in="SourceAlpha" stdDeviation="20" result="blur" /> <feOffset dx="0" dy="20" result="offsetblur" /> <feComponentTransfer result="shadow1" in="offsetblur"> <feFuncA type="linear" slope="0.5" /> </feComponentTransfer> <feMerge> <feMergeNode in="shadow1" /> <feMergeNode in="final-shadow-2" /> </feMerge> </filter> <linearGradient id="LG" gradientTransform="rotate(90 .5 .5)"> <stop id="s0" offset="0" stop-color="#d6f8e9" /> <stop id="s2" offset="1" stop-color="#9ee1c4" /> </linearGradient> <linearGradient id="LG2" gradientTransform="rotate(-90 .5 .5)"> <stop id="s0" offset="0.07" stop-color="#fdfefe" /> <stop id="s1" offset="0.5" stop-color="#98e2c2" /> <stop id="s2" offset="0.8" stop-color="#79c9a7" /> <stop id="s3" offset="1" stop-color="#5fbc95" /> </linearGradient> <linearGradient id="arrow1" gradientTransform="rotate(-90 .5 .5)"> <stop id="s0" offset="0" stop-color="#07594f" /> <stop id="s2" offset="1" stop-color="#01443c" /> </linearGradient> <linearGradient id="arrowRed" gradientTransform="rotate(-90 .5 .5)"> <stop id="s0" offset="0" stop-color="#fd5959" /> <stop id="s2" offset="1" stop-color="#fe7c7c" /> </linearGradient> <linearGradient id="center-knob-outter" gradientTransform="rotate(90 .5 .5)"> <stop id="s0" offset="0" stop-color="#fffefe" /> <stop id="s2" offset="1" stop-color="#86ecdb" /> </linearGradient> <linearGradient id="center-knob-inner" gradientTransform="rotate(90 .5 .5)"> <stop id="s0" offset="0" stop-color="#a0dcd2" /> <stop id="s2" offset="1" stop-color="#dff9ef" /> </linearGradient> <linearGradient id="half-white" gradientTransform="rotate(-90 .5 .5)"> <stop id="s0" offset="0" stop-color="#FFF" stop-opacity="0" /> <stop id="s2" offset="1" stop-color="#FFF" stop-opacity="0.6" /> </linearGradient> <linearGradient id="half-green" gradientTransform="rotate(90 .5 .5)"> <stop id="s0" offset="0" stop-color="#5ebc94" stop-opacity="0" /> <stop id="s2" offset="1" stop-color="#5ebc94" stop-opacity="0.3" /> </linearGradient> <filter id="slight-blur"> <feGaussianBlur stdDeviation="1.5" in="SourceGraphics" /> </filter> <g transform="translate(50, 50)"> <rect x="0" y="0" width="382" height="382" fill="url(#LG)" filter="url(#inset-shadow-big-bottom)" rx="75" ry="105" /> <circle cx="191" cy="191" r="176" fill="url(#half-white)" filter="url(#slight-blur)" /> <circle cx="191" cy="191" r="176" fill="url(#half-green)" filter="url(#slight-blur)" /> <circle cx="191" cy="191.........完整代码请登录后点击上方下载按钮下载查看
网友评论0