SVG/CANVAS/CSS 波浪简写

最新推荐文章于 2024-07-22 13:12:11 发布

黄金之剑

最新推荐文章于 2024-07-22 13:12:11 发布

阅读量164

点赞数

分类专栏： html 文章标签： css3 svg canvas

本文链接：https://blog.csdn.net/henryluohan/article/details/106261836

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS3

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<style>
		.container {
			position: absolute;
			width: 200px;
			height: 200px;
			padding: 5px;
			border: 5px solid rgb(118, 218, 255);
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			border-radius: 50%;
			overflow: hidden;
		}

		.info {
			width: 200px;
			height: 200px;
			position: relative;

			background-color: rgb(118, 218, 255);
			border-radius: 50%;
			overflow: hidden;
		}

		.info::before,
		.info::after {
			content: "";
			position: absolute;
			left: 50%;
			min-width: 400px;
			min-height: 400px;
			background: #fff;
			animation: roateOne 10s linear infinite;
		}

		.info::before {
			bottom: 50px;
			border-radius: 45%;
		}

		.info::after {
			bottom: 40px;
			opacity: 0.5;
			border-radius: 47%;
		}

		@keyframes roateOne {
			0% {
				transform: translate(-50%, 0) rotateZ(0deg);
			}

			50% {
				transform: translate(-50%, -2%) rotateZ(180deg);
			}

			100% {
				transform: translate(-50%, 0%) rotateZ(360deg);
			}
		}
    </style>
</head>
<body>
	<div class="container">
		<div class="info">
			Wave
		</div>
	</div>
</body>
<script>
</script>
</html>

SVG

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<style>
	html,body {
	  margin:0;
	  width:100%;height:100%;
	  background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
	}

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

	.content {
	  position:relative;
	  height:20vh;
	  text-align:center;
	  background-color: white;
	}

	.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;
	  }
	}
    </style>
</head>
<body>
<div style="height:80%;"></div>
<div class="wrapper" style="height:20%;">
 <svg class="waves" 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"></path>
	</defs>
	<g class="parallax">
		<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7"></use>
		<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)"></use>
		<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)"></use>
		<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff"></use>
	</g>
</svg>
</div>
</body>
<script>
</script>
</html>

CANVAS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<style>
	html,body {
	  margin:0;
	  width:100%;height:100%;
	  background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
	}
    </style>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
<script>
    var WAVE_HEIGHT = 200 //波浪变化高度
    var SCALE = 0.5 // 绘制速率
    var CYCLE = 360 / SCALE
    var TIME = 0

    function initCanvas() {
        var c = document.getElementById("myCanvas")
        var width = document.body.clientWidth
        var height = document.body.clientHeight
        var ctx = c.getContext("2d")
        c.width = width
        c.height = height
        // start
        window.requestAnimationFrame(function() {
            draw(ctx, width, height)
        })
    }
	//波型
	function wave(ctx,angle, dAngle,height,width){
        function distance(height, currAngle, diffAngle) {
            return height * Math.cos((((currAngle - diffAngle) % 360) * Math.PI) / 180)
        }
		ctx.beginPath()
		ctx.moveTo(0, height + distance(WAVE_HEIGHT, angle, 0))
		ctx.bezierCurveTo(
			width * 0.4,
			height + distance(WAVE_HEIGHT, angle, dAngle),
			width * 0.6,
			height + distance(WAVE_HEIGHT, angle, 2 * dAngle),
			width,
			height + distance(WAVE_HEIGHT, angle, 3 * dAngle)
		)
        ctx.lineTo(width, ctx.canvas.height)
        ctx.lineTo(0, ctx.canvas.height)
		ctx.fillStyle = "rgba(118, 218, 255, .5)"
		ctx.fill()
	}
    function draw(ctx, width, height) {
        ctx.clearRect(0, 0, width, height)
        TIME = (TIME + 1) % CYCLE
        var angle = SCALE * TIME // 当前正弦角度
        var dAngle = 60 // 两个波峰相差的角度
		wave(ctx,angle, dAngle,height * .8,width)
		wave(ctx,angle + 30, dAngle,height * .8,width)
		wave(ctx,angle + 60, dAngle,height * .8,width)
        // animate
        window.requestAnimationFrame(function() {
            draw(ctx, width, height)
        })
    }

    initCanvas()
</script>
</html>