时钟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