• CSS 小球随着椭圆移动

    html代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <title>Documenttitle>
    7.   <link rel="stylesheet" href="./index.css">
    8. head>
    9. <body>
    10.   <div class="background-img">
    11.     <div class="area">
    12.         <div class="ball ball1">
    13.         div>
    14.         <div class="ball ball2">
    15.         div>
    16.         <div class="ball ball3">
    17.         div>
    18.         <div class="ball ball4">
    19.         div>
    20.         <div class="ball ball5">
    21.         div>
    22.         <div class="ball ball6">
    23.         div>
    24.         <div class="ball ball7">
    25.         div>
    26.         <div class="ball ball8">
    27.         div>
    28.     div>
    29. div>
    30. body>
    31. html>

    css代码： 

    1. .background-img {
    2.     height: 32vw;
    3.     width: 60%;
    4.     margin-top: 1vw;
    5.     text-align: center;
    6. }
    7.  
    8. .area {
    9.     width: 100%;
    10.     height: 100%;
    11.     position: relative;
    12. }
    13.  
    14. .area:hover>.ball {
    15.     animation-play-state: paused; 
    16. }
    17.  
    18. .area>.ball {
    19.     width: 7.0313vw;
    20.     height: 7.0313vw;
    21.     position: absolute;
    22.     border-radius: 7.0313vw;
    23.     background-image: linear-gradient(to top, #051F56, #1B8EF8);
    24.     color: #E1EAFE;
    25. }
    26.  
    27. .area>.ball1 {
    28.  
    29.     animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -5s infinite alternate,
    30.         anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) 0s infinite alternate,
    31.         scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) 0s infinite alternate;
    32. }
    33.  
    34. .area>.ball2 {
    35.     animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -7.5s infinite alternate,
    36.         anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -2.5s infinite alternate,
    37.         scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -2.5s infinite alternate;
    38. }
    39.  
    40. .area>.ball3 {
    41.     animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -10s infinite alternate,
    42.         anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -5s infinite alternate,
    43.         scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -5s infinite alternate;
    44. }
    45.  
    46. .area>.ball4 {
    47.     animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -12.5s infinite alternate,
    48.         anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -7.5s infinite alternate,
    49.         scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -7.5s infinite alternate;
    50. }
    51.  
    52. .area>.ball5 {
    53.     animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -15s infinite alternate,
    54.         anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -10s infinite alternate,
    55.         scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -10s infinite alternate;
    56. }
    57.  
    58. .area>.ball6 {
    59.     animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -17.5s infinite alternate,
    60.         anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -12.5s infinite alternate,
    61.         scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -12.5s infinite alternate;
    62. }
    63.  
    64. .area>.ball7 {
    65.     animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -20s infinite alternate,
    66.         anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -15s infinite alternate,
    67.         scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -15s infinite alternate;
    68. }
    69.  
    70. .area>.ball8 {
    71.     animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -22.5s infinite alternate,
    72.         anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -17.5s infinite alternate,
    73.         scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -17.5s infinite alternate;
    74. }
    75.  
    76. /* 动画 */
    77.  
    78. /* 在X轴上的移动 */
    79. @keyframes anmiteX {
    80.     from {
    81.         left: 56vw;
    82.     }
    83.  
    84.     to {
    85.         left: -1vw;
    86.     }
    87. }
    88.  
    89. /* 在轴上Y的移动 */
    90. @keyframes anmiteY {
    91.     from {
    92.         top: 7vw;
    93.     }
    94.  
    95.     to {
    96.         top: 28vw;
    97.     }
    98. }
    99.  
    100. /* 对球进行放大和缩小在视觉上进行远近的模拟 */
    101. @keyframes scale {
    102.     0% {
    103.         transform: scale(0.8, 0.8);
    104.         opacity: 0.5;
    105.     }
    106.  
    107.     50% {
    108.         transform: scale(1.3, 1.3);
    109.         opacity: 1;
    110.     }
    111.  
    112.     100% {
    113.         transform: scale(0.8, 0.8);
    114.         opacity: 0.5;
    115.     }
    116. }
  • 相关阅读:
    【主题广范|见刊快】2024年城市工程与建筑规划国际会议（ICURAP 2024）
    油猴脚本插件教程
    Go 围炉札记
    30款提升组织效能 SaaS 工具，我们的宝藏工具箱大公开
    尝试使用php给pdf添加水印
    《深度学习与目标检测 YOLOv5》
    【论文阅读】FreeMatch: Self-adaptive Thresholding for Semi-supervised Learning
    2009-2013、2018-2020计算机网络考研408真题
    Seata安装并注册集成到Nacos服务上
    怎样通过jQuery属性操作实现不同功能需求
  • 原文地址：https://blog.csdn.net/wu_2004/article/details/133139990