/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2023-11-29
*/
<template>
<div>
<div>
<h3>涌动的弹簧效果</h3>
<div>大剑师兰特, 还是大剑师兰特，gis-dajianshi</div>
</div>
<div>
<span style="--tt:1;"></span>
<span style="--tt:2;"></span>
<span style="--tt:3;"></span>
<span style="--tt:4;"></span>
<span style="--tt:5;"></span>
<span style="--tt:6;"></span>
<span style="--tt:7;"></span>
<span style="--tt:8;"></span>
<span style="--tt:9;"></span>
</div>
</div>
</template>
<style scoped>
.container {
width: 1000px;
height: 580px;
margin: 50px auto;
border: 1px solid green;
position: relative;
}
.top {
margin: 0 auto 0px;
padding: 10px 0;
background: darkslategray;
color: #fff;
}
.dajianshi {
position: relative;
margin:200px auto 0;
width: 50px;
height: 50px;
transform-style: preserve-3d;
transform: perspective(500px) rotateX(50deg) translateZ(50px);
}
.dajianshi span {
position: absolute;
top: calc(-18px * var(--tt));
left: calc(-18px * var(--tt));
bottom: calc(-18px * var(--tt));
right: calc(-18px * var(--tt));
border: 8px solid rgba(0, 0, 0, 0.8);
border-radius: 50%;
animation: move 1.5s ease-in-out infinite alternate;
animation-delay: calc(var(--tt) * 0.1s);
}
@keyframes move {
0%,
100% {
transform: translateZ(0px);
}
50% {
transform: translateZ(-100px);
}
}
</style>
专注在线教育服务
学员一对一答疑
助教讲师全程服务
百万学员诚意推荐
