<template>
|
<div class="container">
|
<div class="main1 flex">
|
<div class="main2">
|
<div class="firstCircle positon center"></div>
|
<!-- // 最外层的圆环 -->
|
<div class="secondCircle positon center"></div>
|
<!-- // 第二层两段圆环 -->
|
<div class="fourthCircle flex positon center">
|
<!-- // 一堆圆环组成的圆环 -->
|
<div class="annulusContent">
|
<div class="annulus annulus1"></div>
|
<!-- // 每一个小圆环 -->
|
<div class="annulus annulus2"></div>
|
<div class="annulus annulus3"></div>
|
<div class="annulus annulus4"></div>
|
<div class="annulus annulus5"></div>
|
<div class="annulus annulus6"></div>
|
<div class="annulus annulus7"></div>
|
<div class="annulus annulus8"></div>
|
<div class="annulus annulus9"></div>
|
<div class="annulus annulus10"></div>
|
<div class="annulus annulus11"></div>
|
<div class="annulus annulus12"></div>
|
<div class="annulus annulus13"></div>
|
<div class="annulus annulus14"></div>
|
<div class="annulus annulus15"></div>
|
<div class="annulus annulus16"></div>
|
<div class="annulus annulus17"></div>
|
<div class="annulus annulus18"></div>
|
<div class="annulus annulus19"></div>
|
<div class="annulus annulus20"></div>
|
<div class="annulus annulus21"></div>
|
<div class="annulus annulus22"></div>
|
<div class="annulus annulus23"></div>
|
<div class="annulus annulus24"></div>
|
<div class="annulus annulus25"></div>
|
<div class="annulus annulus26"></div>
|
<div class="annulus annulus27"></div>
|
<div class="annulus annulus28"></div>
|
<div class="annulus annulus29"></div>
|
<div class="annulus annulus30"></div>
|
<div class="annulus annulus31"></div>
|
<div class="annulus annulus32"></div>
|
<div class="annulus annulus33"></div>
|
<div class="annulus annulus34"></div>
|
<div class="annulus annulus35"></div>
|
<div class="annulus annulus36"></div>
|
</div>
|
</div>
|
<div class="bar positon flex">
|
<!-- // 流星雨 -->
|
<div class="line line1"></div>
|
<div class="line line2"></div>
|
<div class="line line3"></div>
|
<div class="line line4"></div>
|
<div class="line line5"></div>
|
<div class="line line6"></div>
|
<div class="line line7"></div>
|
<div class="line line8"></div>
|
<div class="line line9"></div>
|
<div class="line line10"></div>
|
<div class="line line11"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
// <script>
|
// export default {
|
// mounted() {
|
// var elem = document.querySelector(".main1");
|
// var isDragging = false; // 用于判断是否正在拖动
|
// var initialX = 0; // 初始鼠标X坐标
|
// var initialY = 0; // 初始鼠标Y坐标
|
// var currentX = 0; // 当前鼠标X坐标
|
// var currentY = 0; // 当前鼠标Y坐标
|
// var initialRotationY = 0; // 初始旋转角度（Y轴）
|
// var initialRotationX = 0; // 初始旋转角度（X轴）
|
|
// elem.addEventListener("mousedown", function (e) {
|
// // 当鼠标按下时
|
// initialY = e.clientY; // 获取初始鼠标Y坐标
|
// initialRotationY = parseInt(
|
// getComputedStyle(elem)
|
// .getPropertyValue("transform")
|
// .replace(/[^0-9-.,]/g, "")
|
// .split(",")[4]
|
// ); // 获取初始旋转角度（Y轴）
|
// initialRotationX = parseInt(
|
// getComputedStyle(elem)
|
// .getPropertyValue("transform")
|
// .replace(/[^0-9-.,]/g, "")
|
// .split(",")[5]
|
// ); // 获取初始旋转角度（X轴）
|
// isDragging = true; // 设置isDragging为true，表示正在拖动
|
// });
|
|
// document.addEventListener("mousemove", function (e) {
|
// // 当鼠标移动时
|
// if (isDragging) {
|
// // 如果正在拖动
|
// currentY = e.clientY; // 获取当前鼠标Y坐标
|
// var dy = currentY - initialY; // Y轴方向移动的距离
|
// var newRotationY = initialRotationY + dy * -1; // 根据移动方向计算新的旋转角度（Y轴）
|
// console.log(111, dy);
|
|
// elem.style.transform = "rotateX(" + newRotationY + "deg)"; // 设置元素的旋转角度
|
// }
|
// });
|
|
// document.addEventListener("mouseup", function () {
|
// // 当鼠标松开时
|
// isDragging = false; // 设置isDragging为false，表示已经停止拖动
|
// });
|
// },
|
// };
|
// </script>
|
|
<style lang="scss" scoped>
|
html {
|
background: black;
|
}
|
.container {
|
width: 300px;
|
height: 300px;
|
}
|
.main1 {
|
width: 500px;
|
height: 500px;
|
transform: translateZ(-150px);
|
transform-style: preserve-3d;
|
}
|
.main2 {
|
width: 300px;
|
height: 300px;
|
transform-style: preserve-3d;
|
transform: rotateX(60deg);
|
position: relative;
|
}
|
.flex {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.positon {
|
position: absolute;
|
}
|
.center {
|
top: 50%;
|
left: 50%;
|
transform: translateX(-50%) translateY(-50%);
|
}
|
.firstCircle {
|
width: 400px;
|
height: 400px;
|
border-radius: 50%;
|
border: 3px solid rgb(42, 153, 255);
|
}
|
.secondCircle {
|
width: 350px;
|
height: 350px;
|
border-radius: 50%;
|
border: 10px solid rgb(42, 153, 255);
|
border-color: rgb(42, 153, 255) transparent;
|
|
animation: rotate1 3s linear infinite;
|
}
|
.thirdCircle {
|
}
|
.fourthCircle {
|
width: 300px;
|
height: 300px;
|
transform: translateX(-50%) translateY(-50%) translateZ(30px);
|
animation: rotate2 3s linear infinite;
|
}
|
.annulusContent {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
transform-style: preserve-3d;
|
}
|
.bar {
|
width: 280px;
|
height: 300px;
|
background: transparent;
|
top: 50%;
|
left: 50%;
|
transform: translateZ(150px) translateX(-50%) translateY(-50%) rotateX(90deg);
|
display: flex;
|
gap: 20px;
|
overflow: hidden;
|
}
|
.line {
|
width: 3px;
|
height: 100px;
|
background: linear-gradient(
|
to top,
|
rgb(69, 164, 254),
|
rgba(42, 153, 255, 0.1)
|
);
|
}
|
.line1 {
|
animation: line1 1s linear infinite;
|
}
|
.line2 {
|
animation: line1 0.5s 0.2s linear infinite;
|
}
|
.line3 {
|
animation: line1 1.5s 0.5s linear infinite;
|
}
|
.line4 {
|
animation: line1 1.3s 1s linear infinite;
|
}
|
.line5 {
|
animation: line1 1.6s 0.3s linear infinite;
|
}
|
.line6 {
|
animation: line1 2s 0.4s linear infinite;
|
}
|
.line7 {
|
animation: line1 1.2s 0.6s linear infinite;
|
}
|
.line8 {
|
animation: line1 1.1s 1.1s linear infinite;
|
}
|
.line9 {
|
animation: line1 1.9s 0.9s linear infinite;
|
}
|
.line10 {
|
animation: line1 1.7s 1.3s linear infinite;
|
}
|
.line11 {
|
animation: line1 1.3s 1.1s linear infinite;
|
}
|
.line12 {
|
animation: line1 1.4s 0.4s linear infinite;
|
}
|
.annulus {
|
width: 300px;
|
height: 300px;
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translateX(-50%) translateY(-50%);
|
background: conic-gradient(
|
rgb(69, 164, 254) 0,
|
rgb(69, 164, 254) 2%,
|
transparent 2%
|
);
|
border-radius: 50%;
|
-webkit-mask: radial-gradient(
|
transparent,
|
transparent 57%,
|
#000 57%,
|
#000 100%
|
);
|
}
|
.annulus1 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(10deg);
|
}
|
.annulus2 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(20deg);
|
}
|
.annulus3 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(30deg);
|
}
|
.annulus4 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(40deg);
|
}
|
.annulus5 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(50deg);
|
}
|
.annulus6 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(60deg);
|
}
|
.annulus7 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(70deg);
|
}
|
.annulus8 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(80deg);
|
}
|
.annulus9 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(90deg);
|
}
|
.annulus10 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(100deg);
|
}
|
.annulus11 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(110deg);
|
}
|
.annulus12 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(120deg);
|
}
|
.annulus13 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(130deg);
|
}
|
.annulus14 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(140deg);
|
}
|
.annulus15 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(150deg);
|
}
|
.annulus16 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(160deg);
|
}
|
.annulus17 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(170deg);
|
}
|
.annulus18 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(180deg);
|
}
|
.annulus19 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(190deg);
|
}
|
.annulus20 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(200deg);
|
}
|
.annulus21 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(210deg);
|
}
|
.annulus22 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(220deg);
|
}
|
.annulus23 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(230deg);
|
}
|
.annulus24 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(240deg);
|
}
|
.annulus25 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(250deg);
|
}
|
.annulus26 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(260deg);
|
}
|
.annulus27 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(270deg);
|
}
|
.annulus28 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(280deg);
|
}
|
.annulus29 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(290deg);
|
}
|
.annulus30 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(300deg);
|
}
|
.annulus31 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(310deg);
|
}
|
.annulus32 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(320deg);
|
}
|
.annulus33 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(330deg);
|
}
|
.annulus34 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(340deg);
|
}
|
.annulus35 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(350deg);
|
}
|
.annulus36 {
|
transform: translateX(-50%) translateY(-50%) rotateZ(360deg);
|
}
|
@keyframes rotate1 {
|
0% {
|
transform: translateZ(20px) translateX(-50%) translateY(-50%) rotateZ(0deg);
|
}
|
100% {
|
transform: translateZ(20px) translateX(-50%) translateY(-50%)
|
rotateZ(-360deg);
|
}
|
}
|
@keyframes rotate2 {
|
0% {
|
transform: translateX(-50%) translateY(-50%) translateZ(30px) rotateZ(0deg);
|
}
|
100% {
|
transform: translateX(-50%) translateY(-50%) translateZ(30px)
|
rotateZ(360deg);
|
}
|
}
|
|
@keyframes line1 {
|
0% {
|
transform: translateY(-220px);
|
}
|
100% {
|
transform: translateY(220px);
|
}
|
}
|
</style>
|
