Simple confession page

目录

需求

思路和代码

实现效果

进一步

最终效果

总结

---

需求

Another afternoon without life......做个简单的cssAnimation play！

很简单,Put several lines of different text“我爱你”放在页面中,Just move chaotically.

思路和代码

对于结构,需要一个父元素container,Put a lot in ititem,这些itemIt's all kinds of text“我爱你”.给这些item加上动画,Randomly set different delay times and durations,This creates a cluttered effect.

过于简单,直接上代码：

html部分

<div class="container">
    <div class="item">我爱你</div>
    <div class="item">I Love You</div>
    <div class="item">사랑해요</div>
    <div class="item">愛する</div>
    <div class="item">EU te amo</div>
    <div class="item">Je t' aime</div>
    <div class="item">Ich liebe dich</div>
  </div>

css部分

    .container {
      width: 500px;
      height: 700px;
      margin: auto;
      background-color: pink;
    }

    .item {
      width: 300px;
      height: 50px;
      font-size: 30px;
      font-family: 'Courier New', Courier, monospace;
      color: white;
    }

    .item:nth-child(1) {
      animation: move 10s 0.5s alternate-reverse linear infinite both;
    }

    .item:nth-child(2) {
      animation: move 8s 1s alternate-reverse linear infinite both;
    }

    .item:nth-child(3) {
      animation: move 7s 0.8s alternate-reverse linear infinite both;
    }

    .item:nth-child(4) {
      animation: move 6s 0.7s alternate-reverse linear infinite both;
    }

    .item:nth-child(5) {
      animation: move 10s 1.1s alternate-reverse linear infinite both;
    }

    .item:nth-child(6) {
      animation: move 9s 1.3s alternate-reverse linear infinite both;
    }

    .item:nth-child(7) {
      animation: move 5s 1s alternate-reverse linear infinite both;
    }

    @keyframes move {
      from {
        transform: translate(0);
      }

      10% {
        transform: translate(300px, 40px);
      }

      20% {
        transform: translate(0px, 80px);
      }

      30% {
        transform: translate(300px, 120px);
      }

      40% {
        transform: translate(0px, 160px);
      }

      50% {
        transform: translate(300px, 200px);
      }

      60% {
        transform: translate(0px, 240px);
      }

      70% {
        transform: translate(300px, 280px);
      }

      80% {
        transform: translate(0px, 320px);
      }

      90% {
        transform: translate(300px, 360px);
      }

      100% {
        transform: translate(0px, 400px);
      }
    }

This basically works out.看效果.

实现效果

 效果还算可以,It's just for fun after all.

进一步

如果现在我要求,鼠标hover某个item的时候,it changes color,Also pause the animation,应该怎么办？

很简单,直接添加一个hover伪类即可.修改后的css：

    .container {
      width: 500px;
      height: 700px;
      margin: auto;
      background-color: pink;
    }

    .item {
      width: 300px;
      height: 50px;
      font-size: 30px;
      font-family: 'Courier New', Courier, monospace;
      color: white;
    }

    .item:hover {
      color: antiquewhite;
      cursor: pointer;
      animation-play-state: paused;
    }

    .item:nth-child(1) {
      animation: move 10s 0.5s alternate-reverse linear infinite both;
    }

    .item:nth-child(2) {
      animation: move 8s 1s alternate-reverse linear infinite both;
    }

    .item:nth-child(3) {
      animation: move 7s 0.8s alternate-reverse linear infinite both;
    }

    .item:nth-child(4) {
      animation: move 6s 0.7s alternate-reverse linear infinite both;
    }

    .item:nth-child(5) {
      animation: move 10s 1.1s alternate-reverse linear infinite both;
    }

    .item:nth-child(6) {
      animation: move 9s 1.3s alternate-reverse linear infinite both;
    }

    .item:nth-child(7) {
      animation: move 5s 1s alternate-reverse linear infinite both;
    }

    @keyframes move {
      from {
        transform: translate(0);
      }

      10% {
        transform: translate(300px, 40px);
      }

      20% {
        transform: translate(0px, 80px);
      }

      30% {
        transform: translate(300px, 120px);
      }

      40% {
        transform: translate(0px, 160px);
      }

      50% {
        transform: translate(300px, 200px);
      }

      60% {
        transform: translate(0px, 240px);
      }

      70% {
        transform: translate(300px, 280px);
      }

      80% {
        transform: translate(0px, 320px);
      }

      90% {
        transform: translate(300px, 360px);
      }

      100% {
        transform: translate(0px, 400px);
      }
    }

I was excited to try it,结果发现,hover的时候,The text color did change,But the animation doesn't pause.

这是为什么呢？I thought it was a typo in the code,But double check,并没有错误.

后来灵光一动,发现了问题.我把hover写在了item:nth-child的前面.在hoverThe state of the animation set in is paused,But the state set in this child element selector is running,Overrides the previous pause.因此,必须把hoverPlaced after the child element pseudo-class selector.

修改代码：

    .container {
      width: 500px;
      height: 700px;
      margin: auto;
      background-color: pink;
    }

    .item {
      width: 300px;
      height: 50px;
      font-size: 30px;
      font-family: 'Courier New', Courier, monospace;
      color: white;
    }

    .item:nth-child(1) {
      animation: move 10s 0.5s alternate-reverse linear infinite both;
    }

    .item:nth-child(2) {
      animation: move 8s 1s alternate-reverse linear infinite both;
    }

    .item:nth-child(3) {
      animation: move 7s 0.8s alternate-reverse linear infinite both;
    }

    .item:nth-child(4) {
      animation: move 6s 0.7s alternate-reverse linear infinite both;
    }

    .item:nth-child(5) {
      animation: move 10s 1.1s alternate-reverse linear infinite both;
    }

    .item:nth-child(6) {
      animation: move 9s 1.3s alternate-reverse linear infinite both;
    }

    .item:nth-child(7) {
      animation: move 5s 1s alternate-reverse linear infinite both;
    }

    @keyframes move {
      from {
        transform: translate(0);
      }

      10% {
        transform: translate(300px, 40px);
      }

      20% {
        transform: translate(0px, 80px);
      }

      30% {
        transform: translate(300px, 120px);
      }

      40% {
        transform: translate(0px, 160px);
      }

      50% {
        transform: translate(300px, 200px);
      }

      60% {
        transform: translate(0px, 240px);
      }

      70% {
        transform: translate(300px, 280px);
      }

      80% {
        transform: translate(0px, 320px);
      }

      90% {
        transform: translate(300px, 360px);
      }

      100% {
        transform: translate(0px, 400px);
      }
    }

    .item:hover {
      color: antiquewhite;
      cursor: pointer;
      animation-play-state: paused;
    }

最终效果

很好！

总结

A very, very simple little case.以后记住,在加hover的时候,Put it in the back as much as possible,in case it is overridden by other styles.