效果
前言
1.动画部分试用lottie, 文字滚动使用的elementui走马灯
2.lottie资源官网: https://lottiefiles.com/
3.lottie详细参考(大神中文总结): https://juejin.cn/post/6983670062293598221
html代码
<el-row >
<!-- el-row, el-col标签为布局使用,参考时忽略-->
<!-- 动画部分-->
<el-col :span="1">
<div style="position: relative">
<div style="position: absolute;right: 10px;width: 40px;height: 40px;" id="lottie"></div>
</div>
</el-col>
<!-- 走马灯部分-->
<el-col :span="8">
<el-carousel height="40px" direction="vertical" indicator-position="none">
<el-carousel-item v-for="item in 4" :key="item">
<h3 text="2xl" justify="center">Message....{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</el-col>
</el-row >
TS代码
//安装lottie
npm install lottie-web
import lottie from "lottie-web" //引入lottie
import alertIcon from "../assets/dynamic_icons/alert.json" //引入自己动画的json文件
//初始化loctie
let animation
const initLottie = () => {
animation = lottie.loadAnimation({
container: document.getElementById("lottie") as Element,
renderer: "svg",
loop: true, //循环播放 true/number/false
autoplay: true,
animationData: alertIcon
});
animation.play()
}
onMounted(() => {
if (location.href.indexOf("#reloaded") == -1) {
location.href = location.href + "#reloaded";
window.location.reload();
} else {
initLottie()
}
})
css代码
//样式根据自己需要修改即可
.el-carousel__item h3 {
color: #FF6E31;
opacity: 0.75;
line-height: 40px;
margin: 0;
text-align: left;
}