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的交互方式

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

评分

本帖被以下淘专辑推荐: