CSS导航鼠标悬停

下载代码

html

css

分享到微信朋友圈

html

<div class="row">
        <div class="wrap">
            <div class="left">Art is pointless</div>
            <div class="right">without passion</div>
        </div>
    </div>

<div class="row">
        <div class="wrap">
            <div class="left">You have to go out</div>
            <div class="right">and create art.</div>
        </div>
    </div>

<div class="row">
        <div class="wrap">
            <div class="left">get an actual job</div>
            <div class="right">doing what you love</div>
        </div>
    </div>

<div class="row">
        <div class="wrap">
            <div class="left">and make a living</div>
            <div class="right">by being yourself</div>
        </div>
    </div>

<div class="row">
        <div class="wrap">
            <div class="left">you can't just let</div>
            <div class="right">other people define</div>
        </div>
    </div>

<div class="row">
        <div class="wrap">
            <div class="left">be a joke, a failure.</div>
            <div class="right">follow your heart.</div>
        </div>
    </div>

<div class="row">
        <div class="wrap">
            <div class="left">you will end up</div>
            <div class="right">happy and free, not</div>
        </div>
    </div>

<div class="row">
        <div class="wrap">
            <div class="left">a starving artist.</div>
            <div class="right">love you art and</div>
        </div>
    </div>

<div class="row">
        <div class="wrap">
            <div class="left">contribute to society</div>
            <div class="right">by inspiring people</div>
        </div>
    </div>

<div class="row">
        <div class="wrap">
            <div class="left">instead of wasting time</div>
            <div class="right">letting other tell you</div>
        </div>
    </div>

<div class="row">
        <div class="wrap">
            <div class="left">you're worthless</div>
            <div class="right">you can change the world.</div>
        </div>
    </div>

</div>

css

* {
  box-sizing: border-box;
  font-family: "Spartan";
}

body {
  background: #ff00cc;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #333399, #ff00cc);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #333399, #ff00cc);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

#pillar {
  display: block;
  margin: 100px auto;
  width: 300px;
  transform: translateX(-200px);
  perspective: 1900px;
}

.wrap {
  display: flex;
  transform: rotateY(0deg);
  transition: all 1s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform-style: preserve-3d;
}

.row {
  width: 800px;
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: bold;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: all 3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.row:hover .wrap {
  transform: rotateY(-45deg);
  cursor: pointer;
}
.row:hover {
  z-index: 1;
}
.row:hover .left:before {
  width: 55%;
}
.row .left {
  width: 400px;
  padding: 15px 20px;
  text-align: right;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
}
.row .left:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  transition: width 1s ease-in-out;
}
.row .right {
  width: 400px;
  padding: 15px 20px;
  text-align: left;
  transform: rotateY(90deg);
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg