svg使用css3波浪动态效果

一点优化 2021年1月14日16:03:03
评论
260看 1369字
广告也精彩

最近一点哥正在开发一款情侣模板,在制作一个波浪效果时费了半天时间,毕竟js不是很熟,然后敲了半天,终于用svg+css3搞定了这个波浪效果;截图

svg使用css3波浪动态效果

波浪动态效果是这样的:

svg使用css3波浪动态效果

div的svg

    <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
		<defs>
			<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
		</defs>
		<g class="parallax">
			<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
			<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
			<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
			<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
		</g>
	</svg>

css代码

.waves {
  position:relative;
  width: 100%;
  height:15vh;
  top: -80px;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:150px;
}

/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}

.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}

.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}

.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}

.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}

@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
  .content {
    height:30vh;
  }
  h1 {
    font-size:24px;
  }
}

  • SEO话题
  • 这是我的QQ群扫一扫
  • weinxin
  • wp开发交流
  • 我的QQ交流群扫一扫
  • weinxin
如何在WordPress知更鸟上加文字边框 wp美化

如何在WordPress知更鸟上加文字边框

其实这是一点优化拔的知更鸟本身的代码,直接审查元素,然后参考,修改出来,才能生效的;要注意的就是不能和知更鸟本身的代码相同,不然会产生错位,需要修改DIV和CSS;效果长下面那个样,我做的有点丑哈,大...
WordPress添加好看的移动端底部菜单导航 wp美化

WordPress添加好看的移动端底部菜单导航

WordPress添加好看的移动端底部菜单导航,以前也分享过一个导航,不过那个不太好看,这里在分享一个导航在电脑端不显示,手机端显示,其它系统程序也可以用,把代码添加到主题的页脚文件就可以啦,CSS样...
过年啦,发个给wordpress网站加红灯笼的教程 wp美化

过年啦,发个给wordpress网站加红灯笼的教程

过年挂灯笼是中国的一个习俗,家里挂灯笼,自己博客也是自己的家,当然也要挂一个了。很多年前Flash流行时,网上可以随便找一个Flash动画的灯笼,很方便就可以加到网站主题模板上,如今Flash已成过眼...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: