blocks|key|4277906|text|我添加了一个名为'sub‘的类来格式化你的图片并添加动画。请注意，我添加了“缓出”作为动画计时功能，以便它下降较快，但上升较慢，以跟上波动计时。但这也只是调整了参数和动画“向上向下”的结果，使其工作在与波浪相反的方向上，基于它如何开始。这是一种方法，如果你想调整高度或缓出，只需在“sub”类中更改缓出的秒数，或在updown函数中调整像素计数。希望这能有所帮助！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4277907|​|4277908|//+best+seen+at+1500px+or+less

+++

+html,+body+{+height:+100%25;+}
++++body+{
++++++background:radial-gradient(ellipse+at+center,+rgba(255,254,234,1)+0%25,+rgba(255,254,234,1)+35%25,+#B7E8EB+100%25);
++++++overflow:+hidden;
++++}


++++.sub{
+++++++position:+absolute;
+++++++top:+85%25;
+++++++left:+50%25;
+++++++width:+100px;
+++++++height:+100px;
+++++++margin-top:+-100px;+/*+Start+height+margin+*/
+++++++margin-left:+-50px;+/*+Half+the+width+*/
+++++++animation:+updown+7s+cubic-bezier(0.42,+0,+0.58,+1)+infinite;
+++++++animation-timing-function:ease-in-out;
+++++++transform:+translate3d(0,+0,+0);
+++++}

++++.ocean+{+
++++++height:+5%25;
++++++width:100%25;
++++++position:absolute;
++++++bottom:0;
++++++left:0;
++++++background:+#015871;
++++}

++++.wave+{
++++++background:+url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg)+repeat-x;+
++++++position:+absolute;
++++++top:+-198px;
++++++width:+6400px;
++++++height:+198px;
++++++animation:+wave+7s+cubic-bezier(0.36,+0.48,+0.63,+0.53)+infinite;
++++++transform:+translate3d(0,+0,+0);
++++}

++++.wave:nth-of-type(2)+{
++++++top:+-175px;
++++++animation:+wave+7s+cubic-bezier(+0.36,+0.45,+0.63,+0.53)+-.125s+infinite,+
++++++swell+7s+ease+-1.25s+infinite;
++++++opacity:+1;
++++}

++++@keyframes+wave+{
++++++0%25+{
++++++++margin-left:+0;
++++++}
++++++100%25+{
++++++++margin-left:+-1600px;
++++++}
++++}

++++@keyframes+swell+{
++++++0%25,+100%25+{
++++++++transform:+translate3d(0,-25px,0);
++++++}
++++++50%25+{
++++++++transform:+translate3d(0,5px,0);
++++++}
++++}

++++++++@keyframes+updown+{
++++++0%25,+100%25+{
++++++++++++transform:+translate3d(0,-40px,0);
++++++}
++++++70%25+{
++++++++++++transform:+translate3d(0,45px,0);
++++++}
++++}|code-block|syntax|javascript|4277909|<img+class+=+"sub"+src+=+"https://image.flaticon.com/icons/svg/447/447773.svg">
++++<div+class="ocean">
++++++<div+class="wave"></div>
++++++<div+class="wave"></div>
++++</div>|4277910|4277911|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>I added a class called 'sub' to get your picture formatted and also to add the animation. Notice I added the 'ease-out' as the animation timing function so that it goes down fast but up slower to keep up with the wave timing. But this is also just a result of tweaking the parameters and the animation 'updown' just right so that its working in the opposite direction to the wave based on how it starts. This is one way to do it, if you want to tweak the height or the ease out just change the seconds on ease-out in the 'sub' class or tweak the pixel count in the updown function. Hope this helps!</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>// best seen at 1500px or less

   

 html, body { height: 100%; }
    body {
      background:radial-gradient(ellipse at center, rgba(255,254,234,1) 0%, rgba(255,254,234,1) 35%, #B7E8EB 100%);
      overflow: hidden;
    }


    .sub{
       position: absolute;
       top: 85%;
       left: 50%;
       width: 100px;
       height: 100px;
       margin-top: -100px; /* Start height margin */
       margin-left: -50px; /* Half the width */
       animation: updown 7s cubic-bezier(0.42, 0, 0.58, 1) infinite;
       animation-timing-function:ease-in-out;
       transform: translate3d(0, 0, 0);
     }

    .ocean { 
      height: 5%;
      width:100%;
      position:absolute;
      bottom:0;
      left:0;
      background: #015871;
    }

    .wave {
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x; 
      position: absolute;
      top: -198px;
      width: 6400px;
      height: 198px;
      animation: wave 7s cubic-bezier(0.36, 0.48, 0.63, 0.53) infinite;
      transform: translate3d(0, 0, 0);
    }

    .wave:nth-of-type(2) {
      top: -175px;
      animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, 
      swell 7s ease -1.25s infinite;
      opacity: 1;
    }

    @keyframes wave {
      0% {
        margin-left: 0;
      }
      100% {
        margin-left: -1600px;
      }
    }

    @keyframes swell {
      0%, 100% {
        transform: translate3d(0,-25px,0);
      }
      50% {
        transform: translate3d(0,5px,0);
      }
    }

        @keyframes updown {
      0%, 100% {
            transform: translate3d(0,-40px,0);
      }
      70% {
            transform: translate3d(0,45px,0);
      }
    }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img class = "sub" src = "https://image.flaticon.com/icons/svg/447/447773.svg"&gt;
    &lt;div class="ocean"&gt;
      &lt;div class="wave"&gt;&lt;/div&gt;
      &lt;div class="wave"&gt;&lt;/div&gt;
    &lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I'm trying to make a <a href="https://image.flaticon.com/icons/svg/447/447773.svg" rel="nofollow noreferrer">submarine</a> (SVG) seem as if it's floating on top of a 
wave (also SVG). </p>

<p>Since the wave is constantly going up and down, I want the submarine to be centered vertically (x), but be moving horizontally on top of the wave.</p>

<p>This is the code for the wave</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>// best seen at 1500px or less

html, body { height: 100%; }
body {
  background:radial-gradient(ellipse at center, rgba(255,254,234,1) 0%, rgba(255,254,234,1) 35%, #B7E8EB 100%);
  overflow: hidden;
}

.ocean { 
  height: 5%;
  width:100%;
  position:absolute;
  bottom:0;
  left:0;
  background: #015871;
}

.wave {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x; 
  position: absolute;
  top: -198px;
  width: 6400px;
  height: 198px;
  animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0);
}

.wave:nth-of-type(2) {
  top: -175px;
  animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
  opacity: 1;
}

@keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1600px;
  }
}

@keyframes swell {
  0%, 100% {
    transform: translate3d(0,-25px,0);
  }
  50% {
    transform: translate3d(0,5px,0);
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="ocean"&gt;
  &lt;div class="wave"&gt;&lt;/div&gt;
  &lt;div class="wave"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


positioning of an SVG based on the animation SVG

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在尝试使 (SVG)看起来像是漂浮在wave (也是SVG)上。由于波浪不断地上升和下降，我希望潜艇垂直居中(x)，但在波浪顶部水平移动。这是wave的代码​// best seen at 1500px or lesshtml, body { height: 100%; }body {  background:ra...

基于动画SVG的SVG定位-腾讯云开发者社区-腾讯云

问基于动画SVG的SVG定位
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于动画SVG的SVG定位EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于动画SVG的SVG定位
EN