0 0 8 2 - 另一种SVG的交互方式
本帖最后由 不二如是 于 2021-8-11 11:11 编辑在81的基础上，利用svg内置属性进行动画的添加。
SVG的交互方式是通过其自带的事件属性实现响应和交互。
给你个81的包
去除所有的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，虽然会完成，但立刻就还原到初始位置，然后很快停留在上面的平齐位置。
这位鱼油，如果喜欢本帖子，请订阅 专辑-->（传送门）（不喜欢更要订阅{:10_278:} ）
官方 Web 课程：
https://www.bilibili.com/video/BV1QW411N762 交作业！
顶起，很久没来了，再来学习{:10_256:} <!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>
在polygon标签下创建的animate标签实现动画效果，但感觉没有Hover在视觉和交互上来得舒服，期待更多用法。
get:动画属性attributeName，为各个顶点。
dur，代表动画持续时间。
设置鼠标滑过为polygon为滚动动画begin="polygon.mouseover" 。
to，指定动画后位置。
fill，freeze表示动画停止在to指定的位置。
还有一个remove，动画运行到to指定位置后，立刻还原。
页:
[1]