格局突然变了..

2022-01-31 07:06:01 +08:00
parent 3c261aa690
commit 2906012920
6 changed files with 305 additions and 94 deletions
--- a/components/Model/Box.vue
+++ b/components/Model/Box.vue
@@ -0,0 +1,129 @@
+<template lang="pug">
+.model-box
+  .wrap
+    .cube
+      .front
+      .back
+      .left
+      .right
+      .top
+      .bottom
+
+      i.ifront
+      i.iback
+      i.ileft
+      i.iright
+      i.itop
+      i.ibottom
+</template>
+
+<style lang="sass">
+.model-box
+  .wrap
+    height: 200px
+    margin-top: 200px
+    perspective: 1000px
+    perspective-origin: 50% 50%
+    background: #222
+    border-radius: .5rem
+    .cube
+      position: relative
+      width: 12.5rem
+      height: 12.5rem
+      margin: 0 auto
+      transform-style: preserve-3d
+      animation: box 15s linear infinite
+      transform: rotateX(0deg) rotateY(0deg)
+      div
+        position: absolute
+        top: 0
+        left: 0
+        opacity: 0.8
+        width: 100%
+        height: 100%
+        font-size: 1.25rem
+        color: white
+        text-align: center
+        line-height: 200px
+        transition: transform .75s ease-in
+      .front
+        background: linear-gradient(blueviolet,dodgerblue)
+        background-size: auto 100%
+        transform: translateZ(100px)
+      .back
+        background: linear-gradient(blueviolet,dodgerblue)
+        background-size: auto 100%
+        transform: translateZ(-100px) rotateY(180deg)
+      .right
+        background: linear-gradient(blueviolet,dodgerblue)
+        background-size: auto 100%
+        transform: rotateY(90deg) translateZ(100px)
+      .left
+        background: linear-gradient(blueviolet,dodgerblue)
+        background-size: auto 100%
+        transform: rotateY(-90deg) translateZ(100px)
+      .top
+        background: linear-gradient(blueviolet,blueviolet)
+        background-size: auto 100%
+        transform: rotateX(90deg) translateZ(100px)
+      .bottom
+        background: linear-gradient(dodgerblue,dodgerblue)
+        background-size: auto 100%
+        transform: rotateX(-90deg) translateZ(100px)
+      i
+        position: absolute
+        top: 50%
+        left: 50%
+        margin-top: -50px
+        margin-left: -50px
+        width: 100px
+        height: 100px
+      .ifront
+        background: linear-gradient(blueviolet,dodgerblue)
+        background-size: auto 100%
+        transform: translateZ(50px)
+      .iback
+        background: linear-gradient(blueviolet,dodgerblue)
+        background-size: auto 100%
+        transform: translateZ(-50px) rotateY(180deg)
+      .iright
+        background: linear-gradient(blueviolet,dodgerblue)
+        background-size: auto 100%
+        transform: rotateY(90deg) translateZ(50px)
+      .ileft
+        background: linear-gradient(blueviolet,dodgerblue)
+        background-size: auto 100%
+        transform: rotateY(-90deg) translateZ(50px)
+      .itop
+        background: linear-gradient(blueviolet,blueviolet)
+        background-size: auto 100%
+        transform: rotateX(90deg) translateZ(50px)
+      .ibottom
+        background: linear-gradient(dodgerblue,dodgerblue)
+        background-size: auto 100%
+        transform: rotateX(-90deg) translateZ(50px)
+    .cube:hover
+      .front
+        background-size: auto 100%
+        transform: translateZ(200px)
+      .back
+        background-size: auto 100%
+        transform: translateZ(-200px) rotateY(180deg)
+      .right
+        background-size: auto 100%
+        transform: rotateY(90deg) translateZ(200px)
+      .left
+        background-size: auto 100%
+        transform: rotateY(-90deg) translateZ(200px)
+      .top
+        background-size: auto 100%
+        transform: rotateX(90deg) translateZ(200px)
+      .bottom
+        background-size: auto 100%
+        transform: rotateX(-90deg) translateZ(200px)
+@keyframes box
+  0%
+    transform: rotateX(0) rotateY(0)
+  100%
+    transform: rotateX(360deg) rotateY(360deg)
+</style>
--- a/components/Model/ConesInner.vue
+++ b/components/Model/ConesInner.vue
@@ -0,0 +1,61 @@
+<template lang="pug">
+ul.model-cones-inner
+  li.bottom
+  li.front
+  li.right
+  li.left
+</template>
+
+<style lang="sass" scoped>
+.model-cones-inner
+  position: relative
+  top: 8px
+  left: 32px
+  width: 64px
+  height: 64px
+  padding: 0
+  list-style: none
+  display: block
+  margin: -25px 0 0 -25px
+  -webkit-transform-style: preserve-3d
+  transform-style: preserve-3d
+  -webkit-transform-origin: 25px 25px
+  transform-origin: 25px 25px
+  -webkit-transform: rotateY(35deg)
+  transform: rotateY(35deg)
+  -webkit-animation: slowRotate 6s ease-in-out infinite 0s
+  animation: slowRotate 6s ease-in-out infinite 0s
+  >li
+    position: absolute
+    top: 0
+    z-index: 10
+    border-left: 28.87px solid transparent
+    border-right: 28.87px solid transparent
+  .bottom
+    border-bottom: 50px solid rgba(200, 200, 200, 0.7)
+  .front
+    border-bottom: 50px solid rgba(80, 80, 80, 0.7)
+    -webkit-transform: rotate3d(-1, 1.732, 0, 70.5deg)
+    transform: rotate3d(-1, 1.732, 0, 70.5deg)
+    -webkit-transform-origin: 25% 50%
+    transform-origin: 25% 50%
+  .right
+    border-bottom: 50px solid rgba(160, 160, 160, 0.7)
+    -webkit-transform: rotate3d(1, 0, 0, 70.5deg)
+    transform: rotate3d(1, 0, 0, 70.5deg)
+    -webkit-transform-origin: 50% 100%
+    transform-origin: 50% 100%
+  .left
+    border-bottom: 50px solid rgba(120, 120, 120, 0.7)
+    -webkit-transform: rotate3d(1, 1.732, 0, -70.5deg)
+    transform: rotate3d(1, 1.732, 0, -70.5deg)
+    -webkit-transform-origin: 75% 50%
+    transform-origin: 75% 50%
+@keyframes slowRotate
+  0%
+    -webkit-transform: rotateY(35deg)
+    transform: rotateY(35deg)
+  100%
+    -webkit-transform: rotateY(395deg)
+    transform: rotateY(395deg)
+</style>