主页 / 问题 / 582234
Accepted
Bim Bam
Asked:2020-10-25 00:35:31 +0000 UTC2020-10-25 00:35:31 +0000 UTC

可以用css制作这个动画吗？

  • 772

在此处输入图像描述

有没有可能用CSS制作这样的动画，把某个凸起变成凹陷？如果是，那么用什么？

html

2 个回答

  1. Best Answer

    SVG解决方案

    实现这种形状曲线的最简单方法是使用二阶贝塞尔曲线。

    在此处输入图像描述

    从上图可以看出，和题主一样，是可以得到连续帧动画的。为此，您需要更改参数Q x1和y1的坐标

    所以我们为几个由二次贝塞尔曲线组成的补丁写了一些公式。理论就在这里。 

    <svg xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns="http://www.w3.org/2000/svg"
	version="1.1" width="300px" height="300px" viewBox="50 -50 300 300" style="border:1px solid red;" >
       
   <path d="M100,100 Q204,200 297,100" style="stroke:blue; stroke-width:3; fill:none;" /> 
   
   
   <path d="M100,100 Q204,167 297,100" style="stroke:blue; stroke-width:3; fill:none;" /> 
 
   
   <path d="M100,100 Q204,100 297,100" style="stroke:blue; stroke-width:3; fill:none;" />  
   
   <path d="M100,100 Q204,50 297,100" style="stroke:blue; stroke-width:3; fill:none;" /> 
   
   <path d="M100,100 Q204,20 297,100" style="stroke:blue; stroke-width:3; fill:none;" /> 
   
   
   <circle cx="100" cy="100"  r="6"  style="fill:none; stroke:orangered; stroke-width:3px;"  />	
   <circle cx="297" cy="100"  r="6"  style="fill:none; stroke:orangered; stroke-width:3px;"  />	
	
	</svg>

    要编写贝塞尔曲线的公式，有一个在线生成器

    在第二阶段，我们通过顺序迭代所有贝塞尔曲线来动画曲线的移动。 

    <svg xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns="http://www.w3.org/2000/svg"
	version="1.1" width="350px" height="300px" viewBox="0 50 300 350">
    <defs>
    <linearGradient id="LinGrad"
                    x1="0%" y1="0%"
                    x2="0%" y2="100%"
                    spreadMethod="pad">
      <stop offset="0%"   stop-color="dodgerblue" stop-opacity="1"/>
      <stop offset="75%" stop-color="white" stop-opacity="1"/>
	  <stop offset="25%" stop-color="green" stop-opacity="1"/>
    </linearGradient>
  </defs>

  <rect x="10" y="10" width="350" height="350" rx="10" ry="10" transform="translate(50 0)" style="fill:url(#LinGrad); opacity:0.5;" />      

	  
   <path d="M100,100 Q204,200 297,100" style="stroke:dodgerblue; stroke-width:3; fill:none;" > 
   
    <animate
      attributeName="d"
      dur="2s"
      repeatCount="3"
      values=
       "M100,100 Q204,200 297,100;
        M100,100 Q204,167 297,100;
        M100,100 Q204,100 297,100;
        M100,100 Q204,50 297,100;
        M100,100 Q204,20 297,100"/> 
    </path>
     
   <circle cx="100" cy="100"  r="6"  style="fill:none; stroke:orangered; stroke-width:3px;"  />	
   <circle cx="297" cy="100"  r="6"  style="fill:none; stroke:orangered; stroke-width:3px;"  />	 
  	</svg>

    动画由团队完成

    animate attributeName="d" dur="2s" repeatCount="3"

    在参数values="M100,100 Q204,200 297,100;M100,100 Q204,167 297,100;

    添加二次贝塞尔曲线的所有中间位置，用分号分隔。

    动画二次贝塞尔曲线的另一个例子。

    • 12

  2. 感谢 .css 的 CSS 动画transform。

    div {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  border-bottom: 2px solid black;
  animation-name: animation;
  animation-duration: 2s;
}

@keyframes animation {
  from { transform: none; }
  to { transform: rotateX(180deg); }
}
    <div>
</div>

    有两个块，CSS 动画和玩border-radius.

    div {
  border-radius: 50%;
  width: 100px;
  height: 100px;
}
#top {
  animation-name: top;
  animation-duration: 2s;
}
#bottom {
  animation-name: bottom;
  animation-duration: 2s;
  animation-delay: 2s;
}
@keyframes top {
  from {
    border-radius: 50%;
    border-bottom: 1px solid black;
    height: 100px;
  }
  to {
    border-radius: 0%;
    border-bottom: 1px solid black;
    height: 50px;
  }
}
@keyframes bottom {
  from {
    border-radius: 0%;
    border-top: 1px solid black;
    margin-top: -50px;
  }
  to {
    border-radius: 25%;
    border-top: 1px solid black;
    margin-top: -75px;
  }
  100% {
    border-radius: 50%;
    border-top: 1px solid black;
    margin-top: -100px;
  }
}
    <div id="top">
</div>

<div id="bottom">
</div>

    • 5

相关问题