跳石（Skipping stone）

Super_Calvin

于 2021-03-02 15:54:09 发布

阅读量288

点赞数

CC 4.0 BY-SA版权

分类专栏： # 场景模型文章标签：跳石 skipping stone html

本文链接：https://blog.csdn.net/weixin_45544796/article/details/114287066

场景模型专栏收录该内容

96 篇文章

订阅专栏

本文介绍了一个使用HTML和SCSS实现的跳石水面涟漪动画效果。通过精心设计的CSS动画和3D变换，展示了石头跳跃并在水面上激起层层涟漪的过程。文章提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

更多有趣示例尽在 知屋安砖社区

示例

在这里插入图片描述

HTML

HTML SCSSResult Skip Results Iframe
<div class="ripple">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="ripple">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="ripple">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="rockWrapper">
  <div class="rock"></div>
  <div class="shadow"></div>
</div>



Resources1× 0.5× 0.25×Rerun

SCSS

HTML SCSSResult Skip Results Iframe
*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

$size: 100vw;
$speed: 3s;
$color: #246;

body {
  background-color: $color;
  min-height: 100vh;
  perspective: $size * 1;
  perspective-origin: 50% calc(50% - #{$size * 0.25});
  overflow: hidden;
}

.ripple {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;

  &:nth-child(1) {
    width: 250px; height: 250px;
    left: 14%;
    --rippleDelay: #{$speed * 0.60};
  }

  &:nth-child(2) {
    width: 200px; height: 200px;
    left: 50%;
    --rippleDelay: #{$speed * 0.27};
  }

  &:nth-child(3) {
    width: 150px; height: 150px;
    left: 86%;
    --rippleDelay: #{$speed * 0.94};
  }

  & > div {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 50%;
    box-shadow: 
      0 -10px 20px darken($color, 25%),
      0 10px 20px darken($color, 25%) inset,
      0 10px 20px lighten($color, 25%),
      0 -10px 20px lighten($color, 25%) inset,
      ;
    transform: rotateX(90deg);
    animation: ripple $speed infinite linear;

    &:nth-child(even) { --ripAngle: 90deg}
    &:nth-child(odd) { --ripAngle: -90deg}

    @for $i from 0 to 6 {
      &:nth-child(#{$i + 1}) {
        animation-delay: calc(#{$i * $speed * -0.05} - var(--rippleDelay));
    }
  }

  @keyframes ripple {
    0% { transform: rotateX(var(--ripAngle)) scale(0); opacity: 1; }
    50%, 100% { transform: rotateX(var(--ripAngle)) scale(2); opacity: 0; }
  }
}
}

.rockWrapper {
  position: absolute;
  bottom: 50%;
  transform: translateX(-50%);
  transform-style: preserve-3d;
  animation: rockHeight $speed infinite linear;

  @keyframes rockHeight {
    from { height: 120px; left: -4%; }
    to { height: 20px; left: 104%; }
  }

  .rock {
    position: absolute;
    width: 50px; height: 25px;
    background-color: #fff;
    background-image: radial-gradient(100% 125% at top, #fff, #000);
    transform: translate(-50%, -90%);
    border-radius: 50%;
    animation: rockBounce $speed / 6 infinite alternate ease-in;

    @keyframes rockBounce {
      from { top: 0%; }
      to { top: 100%; }
    }
  }

  .shadow {
    position: absolute;
    bottom: 0; left: 50%;
    transform: translate(-50%, 50%) rotateX(90deg) scale(1);
    width: 250px; height: 250px;
    background-image: radial-gradient(#000, #0000 66%);
    animation: rockShadow $speed / 6 infinite alternate ease-in;

    @keyframes rockShadow {
      from { transform: translate(-50%, 50%) rotateX(90deg) scale(1); opacity: 0.1; }
      to { transform: translate(-50%, 50%) rotateX(90deg) scale(0.3); opacity: 0.2; }
    }
  }
}
View Compiled


Resources1× 0.5× 0.25×Rerun