演示网站 3D旋转+SVG路径动画
new Rotation3D({ id: '#rotation3D', farScale: 0.6, //最小尺寸 xRadius: 0, //x半径压缩 yRadius: 220, //y半径压缩 autoPlay: true, //自动播放 autoPlayDelay: 6000, //自动播放时间 })编写代码
<!--<!DOCTYPE html>-->
<html lang="zh">
<head>
<meta charset="UTF-8">
<!--<meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>-->
<title>Title</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.2.0/theme-chalk/index.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_3045003_lkxtjaj4m6.css">
<link rel="stylesheet" href="js/rotation3D/rotation3D.css">
<style>
body{
background-color: #292a38;
}
.rotation3D-baseMap{
position: absolute; left: 10px; right: 0; top: 160px; margin: auto;
width: 1312px; height: 516px;
background: url("js/rotation3D/img/baseMap.png");
}
.rotation3D-baseMap::before{
position: absolute; left: -12px; right: 0; top: 0; margin: auto; z-index: 99;
width: 342px; height: 318px; display: block; content: '';
background: url("js/rotation3D/img/baseLogo.png");
animation: 10s bounceUpDown infinite;
}
</style>
</head>
<body>
<div id="app" style="padding: 50px;" v-cloak>
<!--底座-->
<div class="rotation3D-baseMap"></div>
<!--旋转3D-->
<div id="rotation3D" class="rotation3D">
<button class="center">中心</button>
<div class="itemList">
<div class="rotation3D__item" :class="item.type" v-for="item in itemList">
<div class="scale">
<div class="baseImg"></div>
<div class="cont">
<i class="iconfont" :class="item.icon"></i>
<p>{{item.name}}</p>
</div>
</div>
</div>
</div>
<div class="lineList">
<div class="rotation3D__line" v-for="item in itemList" :class="item.type">
<div v-if="item.type=='blue'" class="pos">
<svg width="10" height="400">
<path id="path1" d="M0 400, 0 0" stroke-dasharray="5,10"/>
</svg>
<div class="dot dot1 el-icon-caret-right"></div>
</div>
<div v-if="item.type=='yellow'" class="pos">
<svg width="10" height="400">
<path id="path2" d="M0 400, 0 0" stroke-dasharray="5,10"/>
</svg>
<div class="dot dot2"><i class="el-icon-close"></i></div>
</div>
<div v-if="item.type=='green'" class="pos" style="left: -16px;">
<svg width="50" height="400">
<path id="path3" d="M20 400 S 0 200, 20 0" stroke-dasharray="5,10"/>
<path id="path4" d="M20 400 S 40 200, 20 0" stroke-dasharray="5,10"/>
</svg>
<div class="dot dot3 el-icon-caret-right"></div>
<div class="dot dot4 el-icon-caret-right"></div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/jquery/vue2.6.10.min.js"></script>
<script src="js/rotation3D/rotation3D.js"></script>
<script>
var app = new Vue({
el: "#app",
//数据
data: {
itemList: [
{ name:'人员管理', type:'blue', icon:'icon-renyuanguanli', },
{ name:'GPS服务', type:'green', icon:'icon-GPS', },
{ name:'路基施工', type:'yellow', icon:'icon-a-lujishigong2x', },
{ name:'数据服务中心', type:'blue', icon:'icon-shujufuwuzhongxin', },
{ name:'智慧梁场', type:'blue', icon:'icon-liangchang', },
{ name:'摊铺压实服务', type:'blue', icon:'icon-tanpuyashifuwu', },
{ name:'路面施工', type:'blue', icon:'icon-lumianshigong', },
{ name:'试验检测', type:'blue', icon:'icon-shiyanjiance', },
],
},
mounted: function () {
new Rotation3D({
id: '#rotation3D',
farScale: 0.6,
// farScale: 1,
xRadius: 0, //x半径压缩
yRadius: 220, //y半径压缩
// yRadius: 0, //y半径压缩
// autoPlay:true,
// autoPlayDelay:6000,
})
},
methods: {},
});
</script>
</html>
注册免费下载
抱歉，隐藏内容须成功 评论本文 后刷新可见！
