0 0 8 2 - 另一种SVG的交互方式

不二如是 · 发表于 2017-3-16 13:55:43

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2021-8-11 11:11 编辑

在81的基础上，利用svg内置属性进行动画的添加。

SVG的交互方式是通过其自带的事件属性实现响应和交互。

给你个81的包

81.zip (338.94 KB, 下载次数: 23, 售价: 3 鱼币)

去除所有的hover样式，在svg的polygon标签内添加属性，‘animate’。

       
<body>
<div id="intro">
    <div id="web_intro">
        <h1>鱼C工作室 - 童叟无欺</h1>
        <p>Change the world by Program</p>
    </div>
    <svg width="500" height="668">
        <polygon points="0,0,500,0,500,433,0,333" fill="white" stroke="#000" id="polygon">
            <animate attributeName="points" dur="666ms" to="0,0,500,0,500,333,0,333" begin="polygon.mouseover" fill="freeze">
            </animate>
        </polygon>
    </svg>
</div>
</body>
</html>

效果图：

动画属性attributeName，为各个顶点。

dur，代表动画持续时间。

设置鼠标滑过为polygon为滚动动画begin="polygon.mouseover" 。

to，指定动画后位置。

fill，freeze表示动画停止在to指定的位置。

还有一个remove，动画运行到to指定位置后，立刻还原。

由于上面那个横线，位置比较尴尬，挡住了后面的标志，在上移些

<polygon points="0,0,500,0,500,433,0,333" fill="white" stroke="#000" id="polygon">
            <animate attributeName="points" dur="666ms" to="0,0,500,0,500,333,0,333" begin="polygon.mouseover" fill="freeze">
            </animate>

            <animate attributeName="points" dur="999ms" to="0,0,500,0,500,222,0,222" begin="polygon.mouseover" fill="remove">
            </animate>
        </polygon>

效果图：

由于之前的fill为freeze，所以最后动画会停止在这里指定的to位置。

新添加的remove，虽然会完成，但立刻就还原到初始位置，然后很快停留在上面的平齐位置。

这位鱼油，如果喜欢本帖子，请订阅专辑-->（传送门）（不喜欢更要订阅

）

官方 Web 课程：

aswyamato1989 · 发表于 2017-8-24 02:57:45

交作业！

likesunshine · 发表于 2018-5-10 16:33:31

顶起，很久没来了，再来学习

睁眼睡大觉 · 发表于 2019-3-30 20:23:26

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="utf-8">
                <title>0081</title>
                <style type="text/css">
                        body{
                                margin: 66px;
                        }
                        #intro{
                                background: url(81.png);
                                width: 500px;
                                height: 668px;
                                position: relative;
                                overflow: hidden;
                        }
                        #web_intro{
                                position: absolute;
                                color: #FFF;
                                box-sizing: border-box;

                                padding: 0 33px;
                                z-index: 22;
                        }
                        h1{
                                font-size: 35px;
                                font-family: "Helvetica";
                        }
                        p{
                                font-size: 33px;
                                font-family: "Academy Engraved LET";
                        }
                        #polygon{
                                fill: #06F;
                                stroke-width: 0;
                        }
/*                      #intro:hover svg{
                                opacity: .66;
                                transform: translateY(-99px);
                        }*/
                        #intro svg{
                                transition: all .9s ease-in-out;
                        }
                </style>
        </head>
        <body>
                <div id="intro">
                        <div id="web_intro">
                                <h1>鱼C工作室-众神所在</h1>
                                <p>代码改变人生</p>
                        </div>
                        <svg height="668" width="500">
                                <polygon points="0,0,500,0,500,433,0,333" fill="white" stroke="#000" id="polygon">
                                        <animate attributeName="points" dur="666ms" to="0,0,500,0,500,333,0,333" begin="polygon.mouseover" fill="freeze">
                                        </animate>
                                        <animate attributeName="points" dur="999ms" to="0,0,500,0,500,222,0,222" begin="polygon.mouseover" fill="remove">
                                </polygon>
                        </svg>
                </div>
        </body>
</html>

suweixuan1998 · 发表于 2020-1-14 01:26:41

在polygon标签下创建的animate标签实现动画效果，但感觉没有Hover在视觉和交互上来得舒服，期待更多用法。
get:动画属性attributeName，为各个顶点。

dur，代表动画持续时间。

设置鼠标滑过为polygon为滚动动画begin="polygon.mouseover" 。

to，指定动画后位置。

fill，freeze表示动画停止在to指定的位置。

还有一个remove，动画运行到to指定位置后，立刻还原。

小脑斧 · 发表于 2020-4-13 19:27:03

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 8 2 - 另一种SVG的交互方式

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐: