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 058-18 88-18s58 18 88 1858-18 88-1858 18 88 18v44h-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动画特效 - 经典特效 ” 的全部内容。

svg标签的CSS3动画特效 - 经典特效相关推荐

svg标签的CSS3动画特效 - 经典特效2
svg标签的CSS3动画特效 - 图片上下滚动,会减速相关文献: 什么是svg? svg教程效果图截图: (类似于:上下往复 - 拉锯式运动) css代码如下: <style type=&q ...
js实现3d标签云tag动画效果js特效代码
下载地址JS制作TAG标签云文字动画特效是一款当鼠标悬停某个标签时,当前标签静止,移出恢复滚动效果.tagcloud({ selector: ".tagcloud", //元素选择 ...
贝塞尔曲线与CSS3动画、SVG和canvas的应用
简介贝塞尔曲线是可以做出很多复杂的效果来的,比如弹跳球的复杂动画效果,首先加速下降,停止,然后弹起时逐渐减速的效果. 使用贝塞尔曲线常用的两个网址如下: 缓动函数:http://www.xuanfe ...
贝塞尔曲线与CSS3动画、SVG和canvas的基情
一.甚忙,短言之最近谷歌那谁谁因为自己的相好被老大抢了,就去小米了!狗血的三角关系要比烂掉的TVB神剧好看多了. 但这只是小菜,贝塞尔曲线才是很角色,因为有外国血统,因此,和CSS3动画.SVG以及 ...
html5 loading游戏,12种炫酷html5 svg加载loading动画特效
12种炫酷html5 svg加载loading动画特效刘振兴代码分享 2015年11月23日 14182 3条评论这是一款使用HTML5 SVG技术制作的12种炫酷html5 svg加载load ...
html5 loader,7种基于GSAP的SVG Loader加载动画特效
这是一组效果非常炫酷的基于GSAP的SVG Loader加载动画特效.这组SVG加载动画特效共有7种效果,分别使用GSAP对SVG进行操纵,制作出各种炫酷的Loading加载动画效果. 这些SVG加载 ...
css3动画应用-音乐唱片旋转播放特效
css3动画应用-音乐唱片旋转播放特效核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...
一款纯css3实现的超炫动画背画特效
之前为大家介绍了很多款由纯css3实现的特效.今天要再给大家带来一款纯css3实现的超炫动画背画特效.代码非常简单,没有引用任何其它js代码.css代码也不多.效果非常炫.一起看下效果图: 在线预览 ...
html实现点赞动画效果代码,Twitter“点赞”红心按钮CSS3动画特效
这是一款效果非常炫酷的仿Twitter"点赞"红心按钮CSS3动画特效.该"点赞"特效使用一颗心形按钮,在用户点击心形按钮的时候,心形按钮由灰色变为红色,同时会 ...

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

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

效果图截图：

css代码如下：

html代码如下：

说明：

svg标签的CSS3动画特效 - 经典特效相关推荐

最新文章

热门文章