svg标签的CSS3动画特效 - 经典特效

最新推荐文章于 2024-07-28 20:04:07 发布

草巾冒小子

最新推荐文章于 2024-07-28 20:04:07 发布

阅读量1.7k

点赞数 1

分类专栏： CSS 3 img图片处理

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/82255388

版权

CSS 3 同时被 2 个专栏收录

60 篇文章 3 订阅

订阅专栏

img图片处理

42 篇文章 2 订阅

订阅专栏

svg标签的CSS3动画特效 - 经典特效

效果图截图：

（类似于：水波荡漾）
这里写图片描述

css代码如下：

@charset "UTF-8";

svg:not(:root) { overflow: hidden;}

svg { width: 100%}

/*
svg g path,svg path {
	fill: #B4B4B4;
}
*/

.svg-box{height: 146px;margin-top: 100px;}
.editorial { height: 150px; margin-top: -150px;}

.editorial {
	display: block;
	width: 100%;
	height: 10em;
	max-height: 100vh;
	margin-top: -101px;
}

.parallax>use {
	animation: move-forever 12s linear infinite;
}

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

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

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

@keyframes move-forever {
	0% {
		transform: translate(-90px,0);
	}

	100% {
		transform: translate(85px,0);
	}
}

html代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="svg.css"/>		
	</head>
	<body>
		<div class="svg-box">
			<svg class="editorial" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none">
				<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="50" y="0" fill="rgba(128,215,175,.5)"></use>
					<use xlink:href="#gentle-wave" x="50" y="3" fill="rgba(128,215,175,.5)"></use>
					<use xlink:href="#gentle-wave" x="50" y="6" fill="rgba(128,215,175,.5)"></use>
				</g>
			</svg>
			
		</div>
	</body>
</html>

说明：

1. 封装就可使用，无需JS支持。
2.  样式文件svg.css中，修改.svg-box高度即可修改动画高度，

以上就是关于“ svg标签的CSS3动画特效 - 经典特效 ” 的全部内容。

草巾冒小子

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
svg标签的CSS3动画特效 - 经典特效

svg标签的CSS3动画特效 - 经典特效效果图截图：（类似于：水波荡漾） css代码如下：@charset "UTF-8";svg:not(:root) { overflow: hidden;}svg { width: 100%}/*svg g path,svg path { fill: #B4B4B4;}*/.svg-box{heig...
复制链接

扫一扫

专栏目录