diff --git a/src/assets/scss/pages/yantai-index.scss b/src/assets/scss/pages/yantai-index.scss index 08569134d..33ee2cc58 100644 --- a/src/assets/scss/pages/yantai-index.scss +++ b/src/assets/scss/pages/yantai-index.scss @@ -512,3 +512,159 @@ } } } + +.m-arc { + position: absolute; + z-index: 60; + left: 0; + right: 0; + top: 650px; + margin: 0 auto; + width: 160px; + height: 160px; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-perspective: 400px; + perspective: 400px; + pointer-events: none; + margin-bottom: 40px; + + .line { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 50%; + border-bottom: 1.5px solid rgba(#83fbfe, 0.7); + } + + .line:first-child { + -webkit-animation: rotate1 1.15s linear infinite; + animation: rotate1 1.15s linear infinite; + } + + .line:nth-child(2) { + -webkit-animation: rotate2 1.15s linear infinite; + animation: rotate2 1.15s linear infinite; + } + + .line:nth-child(3) { + -webkit-animation: rotate3 1.15s linear infinite; + animation: rotate3 1.15s linear infinite; + } + + .line:first-child { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; + } + + .line:nth-child(2) { + -webkit-animation-delay: -0.4s; + animation-delay: -0.4s; + } + + .line:nth-child(3) { + -webkit-animation-delay: 0s; + animation-delay: 0s; + } + + @keyframes rotate1 { + 0% { + -webkit-transform: rotateX(35deg) rotateY(-45deg) rotate(0); + transform: rotateX(35deg) rotateY(-45deg) rotate(0); + } + + to { + -webkit-transform: rotateX(35deg) rotateY(-45deg) rotate(1turn); + transform: rotateX(35deg) rotateY(-45deg) rotate(1turn); + } + } + + @keyframes rotate2 { + 0% { + -webkit-transform: rotateX(50deg) rotateY(10deg) rotate(0); + transform: rotateX(50deg) rotateY(10deg) rotate(0); + } + + to { + -webkit-transform: rotateX(50deg) rotateY(10deg) rotate(1turn); + transform: rotateX(50deg) rotateY(10deg) rotate(1turn); + } + } + + @keyframes rotate3 { + 0% { + -webkit-transform: rotateX(35deg) rotateY(55deg) rotate(0); + transform: rotateX(35deg) rotateY(55deg) rotate(0); + } + + to { + -webkit-transform: rotateX(35deg) rotateY(55deg) rotate(1turn); + transform: rotateX(35deg) rotateY(55deg) rotate(1turn); + } + } +} + +.m-arc2 { + position: absolute; + z-index: 60; + left: 0; + right: 0; + top: 210px; + margin: 0 auto; + width: 120px; + height: 120px; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-perspective: 400px; + perspective: 400px; + pointer-events: none; + margin-bottom: 40px; + + /* 第二个 */ + .line { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 50%; + border-bottom: 1px solid rgba(#83fbfe, 0.5); + border-top: 1px solid rgba(#83fbfe, 0.5); + } + + .line:first-child { + -webkit-animation: rotate4 1.15s linear infinite; + animation: rotate4 1.15s linear infinite; + } + + .line:nth-child(2) { + -webkit-animation: rotate5 1.15s linear infinite; + animation: rotate5 1.15s linear infinite; + } + + @keyframes rotate4 { + 0% { + -webkit-transform: rotateX(55deg) rotateY(-30deg) rotate(0); + transform: rotateX(55deg) rotateY(-30deg) rotate(0); + } + + to { + -webkit-transform: rotateX(55deg) rotateY(-30deg) rotate(1turn); + transform: rotateX(55deg) rotateY(-30deg) rotate(1turn); + } + } + + @keyframes rotate5 { + 0% { + -webkit-transform: rotateX(55deg) rotateY(30deg) rotate(0); + transform: rotateX(55deg) rotateY(30deg) rotate(0); + } + + to { + -webkit-transform: rotateX(55deg) rotateY(30deg) rotate(1turn); + transform: rotateX(55deg) rotateY(30deg) rotate(1turn); + } + } +} diff --git a/src/views/pages/yantai-index.vue b/src/views/pages/yantai-index.vue index 70498aa7c..57316a0ef 100644 --- a/src/views/pages/yantai-index.vue +++ b/src/views/pages/yantai-index.vue @@ -146,7 +146,10 @@ src="@/assets/img/yantai/index2/platform/right-1.png" /> -
+
+ +
+
+
+
+
+ +
+
+
+