Difference between revisions of "Team:BIT/Interlab/test3"

 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
 
 
<html>
 
<html>
 
<head>
 
<head>
−
<meta charset="utf-8">
 
−
<title>天空中白云飘动CSS3特效 - 站长素材</title>
 
−
 
 
<style>
 
<style>
−
@keyframes tail {
+
*, *:before, *:after {
−
  6.6666666667% {
+
   box-sizing: border-box;
−
    transform: rotate(0);
+
−
  }
+
−
  10% {
+
−
    transform: rotate(10deg);
+
−
  }
+
−
  16.6666666667% {
+
−
    transform: rotate(-5deg);
+
−
   }
+
−
  20% {
+
−
    transform: rotate(30deg);
+
−
  }
+
−
  26.6666666667% {
+
−
    transform: rotate(-2deg);
+
−
  }
+
−
  46.6666666667% {
+
−
    transform: rotate(10deg);
+
−
  }
+
−
  53.3333333333% {
+
−
    transform: rotate(-5deg);
+
−
  }
+
−
  56.6666666667% {
+
−
    transform: rotate(10deg);
+
−
  }
+
 
}
 
}
−
@keyframes body {
+
 
−
  6.6666666667% {
+
html {
−
    transform: scaleY(1);
+
   font-size: 18px;
−
   }
+
   line-height: 1.5;
−
  10% {
+
   font-weight: 300;
−
    transform: scaleY(1.15);
+
   color: #333;
−
   }
+
   font-family: "Nunito Sans", sans-serif;
−
  16.6666666667% {
+
−
    transform: scaleY(1);
+
−
  }
+
−
  20% {
+
−
    transform: scaleY(1.25);
+
−
   }
+
−
  26.6666666667% {
+
−
    transform: scaleY(1);
+
−
   }
+
−
  46.6666666667% {
+
−
    transform: scaleY(1.15);
+
−
   }
+
−
  53.3333333333% {
+
−
    transform: scaleY(1);
+
−
  }
+
−
  56.6666666667% {
+
−
    transform: scaleY(1.15);
+
−
  }
+
 
}
 
}
−
@keyframes left-whisker {
+
 
−
   6.6666666667% {
+
body {
−
    transform: rotate(0);
+
   margin: 0;
−
   }
+
   padding: 0;
−
  10% {
+
   height: 100vh;
−
    transform: rotate(0deg);
+
   background-color: #ecf0f9;
−
   }
+
   background-attachment: fixed;
−
  16.6666666667% {
+
−
    transform: rotate(-5deg);
+
−
   }
+
−
  20% {
+
−
    transform: rotate(0deg);
+
−
   }
+
−
  26.6666666667% {
+
−
    transform: rotate(0deg);
+
−
  }
+
−
  46.6666666667% {
+
−
    transform: rotate(10deg);
+
−
  }
+
−
  53.3333333333% {
+
−
    transform: rotate(-5deg);
+
−
  }
+
−
  56.6666666667% {
+
−
    transform: rotate(10deg);
+
−
  }
+
 
}
 
}
−
@keyframes right-whisker {
+
 
−
  6.6666666667% {
+
.content {
−
    transform: rotate(180deg);
+
−
  }
+
−
  10% {
+
−
    transform: rotate(190deg);
+
−
  }
+
−
  16.6666666667% {
+
−
    transform: rotate(180deg);
+
−
  }
+
−
  20% {
+
−
    transform: rotate(175deg);
+
−
  }
+
−
  26.6666666667% {
+
−
    transform: rotate(190deg);
+
−
  }
+
−
  46.6666666667% {
+
−
    transform: rotate(180deg);
+
−
  }
+
−
  53.3333333333% {
+
−
    transform: rotate(185deg);
+
−
  }
+
−
  56.6666666667% {
+
−
    transform: rotate(175deg);
+
−
  }
+
−
}
+
−
@keyframes left-ear {
+
−
  0% {
+
−
    transform: rotate(-20deg);
+
−
  }
+
−
  6.6666666667% {
+
−
    transform: rotate(-6deg);
+
−
  }
+
−
  13.3333333333% {
+
−
    transform: rotate(-15deg);
+
−
  }
+
−
  26.6666666667% {
+
−
    transform: rotate(-15deg);
+
−
  }
+
−
  33.3333333333% {
+
−
    transform: rotate(-30deg);
+
−
  }
+
−
  40% {
+
−
    transform: rotate(-30deg);
+
−
  }
+
−
  46.6666666667% {
+
−
    transform: rotate(0deg);
+
−
  }
+
−
  53.3333333333% {
+
−
    transform: rotate(0deg);
+
−
  }
+
−
  60% {
+
−
    transform: rotate(-15deg);
+
−
  }
+
−
  80% {
+
−
    transform: rotate(-15deg);
+
−
  }
+
−
  93.3333333333% {
+
−
    transform: rotate(-6deg);
+
−
  }
+
−
  100% {
+
−
    transform: rotateZ(-6deg);
+
−
  }
+
−
}
+
−
@keyframes right-ear {
+
−
  0% {
+
−
    transform: rotateZ(-16deg);
+
−
  }
+
−
  6.6666666667% {
+
−
    transform: rotateZ(-16deg);
+
−
  }
+
−
  13.3333333333% {
+
−
    transform: rotateZ(-19deg);
+
−
  }
+
−
  26.6666666667% {
+
−
    transform: rotateZ(-19deg);
+
−
  }
+
−
  33.3333333333% {
+
−
    transform: rotateZ(-30deg);
+
−
  }
+
−
  36.6666666667% {
+
−
    transform: rotateZ(-19deg);
+
−
  }
+
−
  37.3333333333% {
+
−
    transform: rotateZ(-30deg);
+
−
  }
+
−
  38% {
+
−
    transform: rotateZ(-19deg);
+
−
  }
+
−
  40% {
+
−
    transform: rotateZ(-19deg);
+
−
  }
+
−
  40.6666666667% {
+
−
    transform: rotateZ(-30deg);
+
−
  }
+
−
  41.3333333333% {
+
−
    transform: rotateZ(-19deg);
+
−
  }
+
−
  46.6666666667% {
+
−
    transform: rotateZ(-9deg);
+
−
  }
+
−
  53.3333333333% {
+
−
    transform: rotateZ(-9deg);
+
−
  }
+
−
  60% {
+
−
    transform: rotateZ(-19deg);
+
−
  }
+
−
  60.6666666667% {
+
−
    transform: rotateZ(-30deg);
+
−
  }
+
−
  61.3333333333% {
+
−
    transform: rotateZ(-19deg);
+
−
  }
+
−
  62.6666666667% {
+
−
    transform: rotateZ(-19deg);
+
−
  }
+
−
  63.3333333333% {
+
−
    transform: rotateZ(-30deg);
+
−
  }
+
−
  64% {
+
−
    transform: rotateZ(-19deg);
+
−
  }
+
−
  80% {
+
−
    transform: rotateZ(-19deg);
+
−
  }
+
−
  93.3333333333% {
+
−
    transform: rotateZ(-16deg);
+
−
  }
+
−
  100% {
+
−
    transform: rotateZ(-16deg);
+
−
  }
+
−
}
+
−
body {
+
 
   display: flex;
 
   display: flex;
 +
  margin: 0 auto;
 
   justify-content: center;
 
   justify-content: center;
 
   align-items: center;
 
   align-items: center;
−
   height: 100vh;
+
   flex-wrap: wrap;
 +
  max-width: 1000px;
 
}
 
}
  
−
.main {
+
.heading {
−
   height: 400px;
+
   width: 100%;
−
   width: 400px;
+
   margin-left: 1rem;
−
   position:absolute;
+
   font-weight: 900;
−
right: 100px;
+
  font-size: 1.618rem;
−
bottom: 100px;
+
  text-transform: uppercase;
 +
  letter-spacing: .1ch;
 +
  line-height: 1;
 +
  padding-bottom: .5em;
 +
  margin-bottom: 1rem;
 +
  position: relative;
 
}
 
}
−
.main .stand {
+
.heading:after {
 +
  display: block;
 +
  content: '';
 
   position: absolute;
 
   position: absolute;
−
   top: 50%;
+
   width: 60px;
−
  left: 50%;
+
   height: 4px;
−
  transform: translate(-50%);
+
   background: linear-gradient(135deg, #1a9be6, #1a57e6);
−
   height: 20px;
+
   bottom: 0;
−
   width: 200px;
+
−
  border-radius: 20px;
+
−
  background-color: #fd6e72;
+
−
   z-index: 2;
+
 
}
 
}
−
.main .stand::after {
+
 
−
   content: "";
+
.description {
−
  position: absolute;
+
   width: 100%;
−
  bottom: -10px;
+
   margin-top: 0;
−
  left: 50%;
+
   margin-left: 1rem;
−
   transform: translate(-50%);
+
   margin-bottom: 3rem;
−
  height: 10px;
+
−
   width: 50px;
+
−
  border-radius: 20px;
+
−
   background-color: #fdf9de;
+
−
  box-shadow: 0 10px 0 #fdf9de, 0 20px 0 #fdf9de, 0 30px 0 #fdf9de, 0 40px 0 #fdf9de, 0 50px 0 #fdf9de, 0 60px 0 #fdf9de, 0 70px 0 #fdf9de, 0 80px 0 #fdf9de, 0 90px 0 #fdf9de, 0 100px 0 #fdf9de, 0 110px 0 #fdf9de, 0 120px 0 #fdf9de, 0 130px 0 #fdf9de, 0 140px 0 #fdf9de, 0 150px 0 #fdf9de, 0 160px 0 #fdf9de, 0 170px 0 #fdf9de;
+
 
}
 
}
−
.main .cat {
+
 
−
   width: 110px;
+
.card {
−
   height: 50px;
+
   color: inherit;
−
   position: absolute;
+
   cursor: pointer;
−
   top: calc(50% - 50px);
+
   width: calc(33% - 2rem);
−
   right: 130px;
+
   min-width: calc(33% - 2rem);
−
   border-top-left-radius: 100px;
+
   height: 400px;
−
   border-top-right-radius: 100px;
+
   min-height: 400px;
 +
   perspective: 1000px;
 +
  margin: 1rem;
 +
  position: relative;
 
}
 
}
−
.main .cat .body {
+
@media screen and (max-width: 800px) {
−
  width: 110px;
+
   .card {
−
   height: 50px;
+
    width: calc(50% - 2rem);
−
  background-color: #745260;
+
   }
−
  position: absolute;
+
−
  border-top-left-radius: 100px;
+
−
   border-top-right-radius: 100px;
+
−
  animation: body 12s none infinite;
+
 
}
 
}
−
.main .cat .head {
+
@media screen and (max-width: 500px) {
−
   content: "";
+
   .card {
−
  width: 70px;
+
    width: 100%;
−
  height: 35px;
+
   }
−
  background-color: #745260;
+
−
  position: absolute;
+
−
  top: calc(50% - 10px);
+
−
   left: -40px;
+
−
  border-top-left-radius: 80px;
+
−
  border-top-right-radius: 80px;
+
 
}
 
}
  
−
.tail-container {
+
.front,
 +
.back {
 +
  display: flex;
 +
  border-radius: 6px;
 +
  background-position: center;
 +
  background-size: cover;
 +
  text-align: center;
 +
  justify-content: center;
 +
  align-items: center;
 
   position: absolute;
 
   position: absolute;
−
   right: 0;
+
   height: 100%;
−
   bottom: -13px;
+
   width: 100%;
−
   z-index: 3;
+
  -webkit-backface-visibility: hidden;
 +
   backface-visibility: hidden;
 +
  transform-style: preserve-3d;
 +
  transition: ease-in-out 600ms;
 
}
 
}
  
−
.tail {
+
.front {
 +
  background-size: cover;
 +
  padding: 2rem;
 +
  font-size: 1.618rem;
 +
  font-weight: 600;
 +
  color: #fff;
 +
  overflow: hidden;
 +
  font-family: Poppins, sans-serif;
 +
}
 +
.front:before {
 
   position: absolute;
 
   position: absolute;
−
   height: 30px;
+
   display: block;
−
   width: 14px;
+
   content: '';
−
   bottom: -10px;
+
   top: 0;
 +
  left: 0;
 
   right: 0;
 
   right: 0;
−
   border-bottom-right-radius: 5px;
+
   bottom: 0;
−
   background: #745260;
+
   background: linear-gradient(135deg, #1a9be6, #1a57e6);
−
   z-index: 0;
+
  opacity: .25;
 +
   z-index: -1;
 
}
 
}
−
.tail > .tail {
+
.card:hover .front {
−
   animation: tail 12s none infinite;
+
   transform: rotateY(180deg);
−
  height: 100%;
+
}
−
  width: 14px;
+
.card:nth-child(even):hover .front {
−
  transform-origin: left;
+
   transform: rotateY(-180deg);
−
   border-bottom-left-radius: 20px 20px;
+
−
  border-bottom-right-radius: 20px 20px;
+
−
  border-top-right-radius: 40px;
+
 
}
 
}
  
−
.ear {
+
.back {
−
   position: absolute;
+
   background: #fff;
−
   left: 4px;
+
   transform: rotateY(-180deg);
−
  top: -4px;
+
   padding: 0 2em;
−
   width: 0;
+
}
−
  height: 0;
+
.card:hover .back {
−
   border-left: 12px solid transparent;
+
   transform: rotateY(0deg);
−
  border-right: 12px solid transparent;
+
}
−
  border-bottom: 20px solid #745260;
+
.card:nth-child(even) .back {
−
   transform: rotate(-30deg);
+
   transform: rotateY(180deg);
−
  animation: left-ear 12s both infinite;
+
 
}
 
}
−
.ear + .ear {
+
.card:nth-child(even):hover .back {
−
  animation: right-ear 12s both infinite;
+
   transform: rotateY(0deg);
−
  top: -12px;
+
−
   left: 30px;
+
 
}
 
}
  
−
.nose {
+
.button {
−
   position: absolute;
+
   transform: translateZ(40px);
−
   bottom: 10px;
+
   cursor: pointer;
−
   left: -10px;
+
   -webkit-backface-visibility: hidden;
−
   background-color: #fd6e72;
+
  backface-visibility: hidden;
−
   height: 5px;
+
   font-weight: bold;
−
   width: 5px;
+
  color: #fff;
−
   border-radius: 50%;
+
   padding: .5em 1em;
 +
   border-radius: 100px;
 +
  font: inherit;
 +
  background: linear-gradient(135deg, #1a9be6, #1a57e6);
 +
   border: none;
 +
  position: relative;
 +
  transform-style: preserve-3d;
 +
  transition: 300ms ease;
 
}
 
}
−
 
+
.button:before {
−
.whisker-container {
+
  transition: 300ms ease;
 
   position: absolute;
 
   position: absolute;
−
   bottom: 5px;
+
   display: block;
−
   left: -36px;
+
   content: '';
−
   width: 20px;
+
  transform: translateZ(-40px);
−
   height: 10px;
+
  -webkit-backface-visibility: hidden;
−
   transform-origin: right;
+
  backface-visibility: hidden;
−
   animation: left-whisker 12s both infinite;
+
  height: calc(100% - 20px);
 +
   width: calc(100% - 20px);
 +
   border-radius: 100px;
 +
  left: 10px;
 +
   top: 16px;
 +
   box-shadow: 0 0 10px 10px rgba(26, 87, 230, 0.25);
 +
  background-color: rgba(26, 87, 230, 0.25);
 
}
 
}
−
.whisker-container:nth-child(2) {
+
.button:hover {
−
  left: -20px;
+
   transform: translateZ(55px);
−
  bottom: 12px;
+
−
   transform-origin: right;
+
−
  transform: rotate(180deg);
+
−
  animation: right-whisker 12s both infinite;
+
 
}
 
}
−
 
+
.button:hover:before {
−
.whisker {
+
   transform: translateZ(-55px);
−
  position: absolute;
+
−
  top: 0;
+
−
  width: 100%;
+
−
  border: 1px solid #fdf9de;
+
−
   transform-origin: 100% 0;
+
−
  transform: rotate(10deg);
+
 
}
 
}
−
.whisker:last-child {
+
.button:active {
−
   top: 0;
+
   transform: translateZ(20px);
−
   transform: rotate(-20deg);
+
}
 +
.button:active:before {
 +
   transform: translateZ(-20px);
 +
  top: 12px;
 
}
 
}
−
.img1{
 
−
width: 300px;
 
−
}
 
−
h1{
 
−
font-family: "微软雅黑 Light";
 
−
position: absolute;
 
−
bottom: 70px;
 
−
left: 550px;
 
−
left: 520px;
 
−
color: cornflowerblue;
 
−
text-shadow:5px 5px 5px #FF0000;
 
−
}
 
 
</style>
 
</style>
 +
 
</head>
 
</head>
 
<body>
 
<body>
−
<div>
+
 
−
    <a href="#">
+
<div class="content">
−
    <h1>ENTRANCE</h1>
+
  <a class="card" href="#!">
−
<img  class="img1" src="../../photoshop/QQ截图20180610204251.png">
+
    <div class="front" style="background-image: url(img/559.jpg);">
−
</a>
+
      <p>Lorem ipsum dolor sit amet consectetur adipisi.</p>
−
</div>
+
    </div>
−
<div class="main">
+
    <div class="back">
−
    <span class="stand"></span>
+
      <div>
−
     <div class="cat">
+
        <p>Consectetur adipisicing elit. Possimus, praesentium?</p>
−
    <div class="body"></div>
+
        <p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p>
−
    <div class="head">
+
        <button class="button">Click Here</button>
−
      <div class="ear"></div>
+
      </div>
−
    <div class="ear"></div>
+
     </div></a><a class="card" href="#!">
−
    </div>
+
    <div class="front" style="background-image: url(img/560.jpg);">
−
    <div class="face">
+
      <p>Lorem ipsum dolor sit amet consectetur adipisi.</p>
−
      <div class="nose"></div>
+
    </div>
−
    <div class="whisker-container">
+
    <div class="back">
−
      <div class="whisker"></div>
+
      <div>
−
      <div class="whisker"></div>
+
        <p>Consectetur adipisicing elit. Possimus, praesentium?</p>
−
    </div>
+
        <p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p>
−
    <div class="whisker-container">
+
        <button class="button">Click Here</button>
−
      <div class="whisker"></div>
+
      </div>
−
      <div class="whisker"></div>
+
    </div></a><a class="card" href="#!">
−
    </div>
+
    <div class="front" style="background-image: url(img/567.jpg);">
−
    </div>
+
      <p>Lorem ipsum dolor sit amet consectetur adipisi.</p>
−
    <div class="tail-container">
+
    </div>
−
       <div class="tail">
+
    <div class="back">
−
        <div class="tail">
+
      <div>
−
          <div class="tail">
+
        <p>Consectetur adipisicing elit. Possimus, praesentium?</p>
−
            <div class="tail">
+
        <p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p>
−
              <div class="tail">
+
        <button class="button">Click Here</button>
−
                <div class="tail">
+
      </div>
−
                  <div class="tail"></div>
+
    </div></a><a class="card" href="#!">
−
                </div>
+
    <div class="front" style="background-image: url(img/562.jpg);">
−
              </div>
+
      <p>Lorem ipsum dolor sit amet consectetur adipisi.</p>
−
            </div>
+
    </div>
−
          </div>
+
    <div class="back">
−
         </div>
+
      <div>
 +
        <p>Consectetur adipisicing elit. Possimus, praesentium?</p>
 +
        <p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p>
 +
        <button class="button">Click Here</button>
 +
       </div>
 +
    </div></a><a class="card" href="#!">
 +
    <div class="front" style="background-image: url(img/563.jpg);">
 +
      <p>Lorem ipsum dolor sit amet consectetur adipisi.</p>
 +
    </div>
 +
    <div class="back">
 +
      <div>
 +
        <p>Consectetur adipisicing elit. Possimus, praesentium?</p>
 +
        <p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p>
 +
        <button class="button">Click Here</button>
 +
      </div>
 +
    </div></a><a class="card" href="#!">
 +
    <div class="front" style="background-image: url(img/564.jpg);">
 +
      <p>Lorem ipsum dolor sit amet consectetur adipisi.</p>
 +
    </div>
 +
    <div class="back">
 +
      <div>
 +
        <p>Consectetur adipisicing elit. Possimus, praesentium?</p>
 +
         <p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p>
 +
        <button class="button">Click Here</button>
 
       </div>
 
       </div>
−
    </div>
+
    </div></a>
−
  </div>
+
−
</div>
+
 
</div>
 
</div>
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 07:03, 6 September 2018

Lorem ipsum dolor sit amet consectetur adipisi.

Consectetur adipisicing elit. Possimus, praesentium?

Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.

Lorem ipsum dolor sit amet consectetur adipisi.

Consectetur adipisicing elit. Possimus, praesentium?

Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.

Lorem ipsum dolor sit amet consectetur adipisi.

Consectetur adipisicing elit. Possimus, praesentium?

Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.

Lorem ipsum dolor sit amet consectetur adipisi.

Consectetur adipisicing elit. Possimus, praesentium?

Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.

Lorem ipsum dolor sit amet consectetur adipisi.

Consectetur adipisicing elit. Possimus, praesentium?

Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.

Lorem ipsum dolor sit amet consectetur adipisi.

Consectetur adipisicing elit. Possimus, praesentium?

Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.