时钟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" /> &.........完整代码请登录后点击上方下载按钮下载查看
网友评论0