• 简易表白小页面

    目录

    需求

    思路和代码

    实现效果

    进一步

    最终效果

    总结

    需求

    又是没有活的一下午......做个简单的css动画玩玩！

    很简单，把若干行不同文字的“我爱你”放在页面中，杂乱无章地动起来即可。

    思路和代码

    对于结构，需要一个父元素container，里面放许多item，这些item就是各种文字的“我爱你”。给这些item加上动画，随机设置不同的延迟时间和持续时间，这样就能产生杂乱无章的效果了。

    过于简单，直接上代码：

    html部分

    1. <div class="container">
    2.     <div class="item">我爱你div>
    3.     <div class="item">I Love Youdiv>
    4.     <div class="item">사랑해요div>
    5.     <div class="item">愛するdiv>
    6.     <div class="item">EU te amodiv>
    7.     <div class="item">Je t' aimediv>
    8.     <div class="item">Ich liebe dichdiv>
    9.   div>

    css部分

    1.     .container {
    2.       width: 500px;
    3.       height: 700px;
    4.       margin: auto;
    5.       background-color: pink;
    6.     }
    7.  
    8.     .item {
    9.       width: 300px;
    10.       height: 50px;
    11.       font-size: 30px;
    12.       font-family: 'Courier New', Courier, monospace;
    13.       color: white;
    14.     }
    15.  
    16.     .item:nth-child(1) {
    17.       animation: move 10s 0.5s alternate-reverse linear infinite both;
    18.     }
    19.  
    20.     .item:nth-child(2) {
    21.       animation: move 8s 1s alternate-reverse linear infinite both;
    22.     }
    23.  
    24.     .item:nth-child(3) {
    25.       animation: move 7s 0.8s alternate-reverse linear infinite both;
    26.     }
    27.  
    28.     .item:nth-child(4) {
    29.       animation: move 6s 0.7s alternate-reverse linear infinite both;
    30.     }
    31.  
    32.     .item:nth-child(5) {
    33.       animation: move 10s 1.1s alternate-reverse linear infinite both;
    34.     }
    35.  
    36.     .item:nth-child(6) {
    37.       animation: move 9s 1.3s alternate-reverse linear infinite both;
    38.     }
    39.  
    40.     .item:nth-child(7) {
    41.       animation: move 5s 1s alternate-reverse linear infinite both;
    42.     }
    43.  
    44.     @keyframes move {
    45.       from {
    46.         transform: translate(0);
    47.       }
    48.  
    49.       10% {
    50.         transform: translate(300px, 40px);
    51.       }
    52.  
    53.       20% {
    54.         transform: translate(0px, 80px);
    55.       }
    56.  
    57.       30% {
    58.         transform: translate(300px, 120px);
    59.       }
    60.  
    61.       40% {
    62.         transform: translate(0px, 160px);
    63.       }
    64.  
    65.       50% {
    66.         transform: translate(300px, 200px);
    67.       }
    68.  
    69.       60% {
    70.         transform: translate(0px, 240px);
    71.       }
    72.  
    73.       70% {
    74.         transform: translate(300px, 280px);
    75.       }
    76.  
    77.       80% {
    78.         transform: translate(0px, 320px);
    79.       }
    80.  
    81.       90% {
    82.         transform: translate(300px, 360px);
    83.       }
    84.  
    85.       100% {
    86.         transform: translate(0px, 400px);
    87.       }
    88.     }

    这样基本就能搭出来了。看效果。

    实现效果

     效果还算可以，毕竟只是弄着玩。

    进一步

    如果现在我要求，鼠标hover某个item的时候，它就变色，同时暂停动画，应该怎么办？

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

    1.     .container {
    2.       width: 500px;
    3.       height: 700px;
    4.       margin: auto;
    5.       background-color: pink;
    6.     }
    7.  
    8.     .item {
    9.       width: 300px;
    10.       height: 50px;
    11.       font-size: 30px;
    12.       font-family: 'Courier New', Courier, monospace;
    13.       color: white;
    14.     }
    15.  
    16.     .item:hover {
    17.       color: antiquewhite;
    18.       cursor: pointer;
    19.       animation-play-state: paused;
    20.     }
    21.  
    22.     .item:nth-child(1) {
    23.       animation: move 10s 0.5s alternate-reverse linear infinite both;
    24.     }
    25.  
    26.     .item:nth-child(2) {
    27.       animation: move 8s 1s alternate-reverse linear infinite both;
    28.     }
    29.  
    30.     .item:nth-child(3) {
    31.       animation: move 7s 0.8s alternate-reverse linear infinite both;
    32.     }
    33.  
    34.     .item:nth-child(4) {
    35.       animation: move 6s 0.7s alternate-reverse linear infinite both;
    36.     }
    37.  
    38.     .item:nth-child(5) {
    39.       animation: move 10s 1.1s alternate-reverse linear infinite both;
    40.     }
    41.  
    42.     .item:nth-child(6) {
    43.       animation: move 9s 1.3s alternate-reverse linear infinite both;
    44.     }
    45.  
    46.     .item:nth-child(7) {
    47.       animation: move 5s 1s alternate-reverse linear infinite both;
    48.     }
    49.  
    50.     @keyframes move {
    51.       from {
    52.         transform: translate(0);
    53.       }
    54.  
    55.       10% {
    56.         transform: translate(300px, 40px);
    57.       }
    58.  
    59.       20% {
    60.         transform: translate(0px, 80px);
    61.       }
    62.  
    63.       30% {
    64.         transform: translate(300px, 120px);
    65.       }
    66.  
    67.       40% {
    68.         transform: translate(0px, 160px);
    69.       }
    70.  
    71.       50% {
    72.         transform: translate(300px, 200px);
    73.       }
    74.  
    75.       60% {
    76.         transform: translate(0px, 240px);
    77.       }
    78.  
    79.       70% {
    80.         transform: translate(300px, 280px);
    81.       }
    82.  
    83.       80% {
    84.         transform: translate(0px, 320px);
    85.       }
    86.  
    87.       90% {
    88.         transform: translate(300px, 360px);
    89.       }
    90.  
    91.       100% {
    92.         transform: translate(0px, 400px);
    93.       }
    94.     }

    本来兴高采烈去试试，结果发现，hover的时候，文字颜色确实变了，但动画没有暂停。

    这是为什么呢？我以为是代码写错了，但仔细检查，并没有错误。

    后来灵光一动，发现了问题。我把hover写在了item:nth-child的前面。在hover中设置动画的状态是暂停，但这子元素选择器中设置的状态是running，覆盖了前面的暂停。因此，必须把hover放在子元素伪类选择器的后面。

    修改代码：

    1.     .container {
    2.       width: 500px;
    3.       height: 700px;
    4.       margin: auto;
    5.       background-color: pink;
    6.     }
    7.  
    8.     .item {
    9.       width: 300px;
    10.       height: 50px;
    11.       font-size: 30px;
    12.       font-family: 'Courier New', Courier, monospace;
    13.       color: white;
    14.     }
    15.  
    16.     .item:nth-child(1) {
    17.       animation: move 10s 0.5s alternate-reverse linear infinite both;
    18.     }
    19.  
    20.     .item:nth-child(2) {
    21.       animation: move 8s 1s alternate-reverse linear infinite both;
    22.     }
    23.  
    24.     .item:nth-child(3) {
    25.       animation: move 7s 0.8s alternate-reverse linear infinite both;
    26.     }
    27.  
    28.     .item:nth-child(4) {
    29.       animation: move 6s 0.7s alternate-reverse linear infinite both;
    30.     }
    31.  
    32.     .item:nth-child(5) {
    33.       animation: move 10s 1.1s alternate-reverse linear infinite both;
    34.     }
    35.  
    36.     .item:nth-child(6) {
    37.       animation: move 9s 1.3s alternate-reverse linear infinite both;
    38.     }
    39.  
    40.     .item:nth-child(7) {
    41.       animation: move 5s 1s alternate-reverse linear infinite both;
    42.     }
    43.  
    44.     @keyframes move {
    45.       from {
    46.         transform: translate(0);
    47.       }
    48.  
    49.       10% {
    50.         transform: translate(300px, 40px);
    51.       }
    52.  
    53.       20% {
    54.         transform: translate(0px, 80px);
    55.       }
    56.  
    57.       30% {
    58.         transform: translate(300px, 120px);
    59.       }
    60.  
    61.       40% {
    62.         transform: translate(0px, 160px);
    63.       }
    64.  
    65.       50% {
    66.         transform: translate(300px, 200px);
    67.       }
    68.  
    69.       60% {
    70.         transform: translate(0px, 240px);
    71.       }
    72.  
    73.       70% {
    74.         transform: translate(300px, 280px);
    75.       }
    76.  
    77.       80% {
    78.         transform: translate(0px, 320px);
    79.       }
    80.  
    81.       90% {
    82.         transform: translate(300px, 360px);
    83.       }
    84.  
    85.       100% {
    86.         transform: translate(0px, 400px);
    87.       }
    88.     }
    89.  
    90.     .item:hover {
    91.       color: antiquewhite;
    92.       cursor: pointer;
    93.       animation-play-state: paused;
    94.     }

    最终效果

    很好！

    总结

    一个非常非常简单的小案例。以后记住，在加hover的时候，尽量放在后面，以防被其他样式覆盖。

  • 相关阅读:
    HJS-DE1/2时间继电器
    【CS61A】学习笔记
    “第六届世界声博会暨2023科大讯飞全球1024开发者节”开幕式回顾及舆情问题
    Python 查询 IP 地址段，并获取 Hostname
    题目：2706.购买两块巧克力
    20-指针-2
    java计算机毕业设计高校学生社团管理源码+数据库+系统+lw文档+mybatis+运行部署
    腾讯云短信申请
    常见的Web安全漏洞有哪些，Web安全漏洞常用测试方法介绍
    LightDB中的表
  • 原文地址：https://blog.csdn.net/weixin_45792464/article/details/126035894