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