<template>
<div class="title">路径动画</div>
<div class="icon-box2">
<div>CSS 路径动画</div>
<!-- 这个线是用来显示路径的,并没按照这个线进行运动 -->
<svg width="200" height="200">
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" />
</svg>
<div class="icon2"></div>
</div>
<div class="icon-box2">
<div>SVG 路径动画</div>
<svg width="200" height="200">
<path id="p1-line1" d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" />
<image x="-10px" y="-10px" xlink:href="@/assets/start.png" style="width: 20px; height:20px">
<!-- 设置动画持续时间为2.2,rotate自动调节旋转角度,循环次数为indefinite -->
<animateMotion dur="2.2s" rotate="auto" repeatCount="indefinite">
<!-- 引用外部的path路径作为图片的运动路径 -->
<mpath xlink:href="#p1-line1"></mpath>
</animateMotion>
</image>
</svg>
</div>
<div style="clear: both;"></div>
<br><br>
<div class="title">闪光线沿着曲线运动</div>
<div class="icon-box2">
<div>CSS 路径动画</div>
<!-- 这个线是用来显示路径的,并没按照这个线进行运动 -->
<svg width="200" height="200">
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" />
</svg>
<div class="icon3"></div>
<div class="icon3" style="animation-delay: 10ms;"></div>
<div class="icon3" style="animation-delay: 40ms; opacity: 0.9; transform: scale(0.9)"></div>
<div class="icon3" style="animation-delay: 60ms; opacity: 0.8; transform: scale(0.8)"></div>
<div class="icon3" style="animation-delay: 80ms; opacity: 0.7; transform: scale(0.7)"></div>
<div class="icon3" style="animation-delay: 100ms; opacity: 0.6; transform: scale(0.6)"></div>
<div class="icon3" style="animation-delay: 120ms; opacity: 0.5; transform: scale(0.5)"></div>
<div class="icon3" style="animation-delay: 140ms; opacity: 0.4; transform: scale(0.4)"></div>
<div class="icon3" style="animation-delay: 160ms; opacity: 0.3; transform: scale(0.3)"></div>
</div>
</template>
<script setup>
</script>
<style lang="less" scoped>
.title {
padding: 5px 10px;
margin-bottom: 10px;
font-size: 16px;
border-bottom: 1px solid #999;
}
svg {
path {
stroke: orange;
fill: none;
stroke-width: 2;
}
}
.icon-box2 {
position: relative;
float: left;
div {
position: absolute;
}
.icon2 {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
/* 开启定位,配合偏移路径 */
position: absolute;
top: 0;
left: 0;
/* 元素运动路径 */
offset-path: path("M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
/* 初始偏移位置百分比 */
offset-distance: 10%;
animation: identifier2 2s linear infinite;
}
.icon3 {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: red;
box-shadow: 0 0 10px red;
/* 开启定位,配合偏移路径 */
position: absolute;
top: 0;
left: 0;
/* 元素运动路径 */
offset-path: path("M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
/* 初始偏移位置百分比 */
offset-distance: -10%;
animation: identifier2 1s linear infinite;
}
;
}
@keyframes identifier2 {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
</style>
SVG/CSS路径动画
最新推荐文章于 2024-07-31 18:31:25 发布