这是一款使用
SVG
和
CSS3
制作的非常有创意的无限循环动画特效。该无限循环动画特效共有两种效果，一种是模拟鱼儿跃起在落入水中的动画，一种是一条线绕无穷符号不断动画的特效。
这两种动画特效的灵感来自于《
7种基于GSAP的SVG Loader加载动画特效
》，是根据它里面的两种效果来制作的。因为那7种GSAP效果是要收费的，因此这里使用CSS3来模拟这些动画效果。
这2个无限循环动画特效都是使用SVG和CSS3 animation动画来制作的。在第一种效果中，是一半圆形的条线不断跃起落下的动画。它的HTML结构使用一个
<svg>
来构建所有需要的元素。
<svg viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
<path class="jumper" stroke-linecap="round" stroke-linejoin="round" d="M47.5,94.3c0-23.5,19.9-42.5,44.5-42.5s44.5,19,44.5,42.5"/>
<g stroke="#2d2d2d" stroke-width="1">
<ellipse class="circleL" fill="none" stroke-miterlimit="10" cx="47.2" cy="95.6" rx="10.7" ry="2.7" />
<ellipse class="circleR" fill="none" stroke-miterlimit="10" cx="136.2" cy="95.6" rx="10.7" ry="2.7" />
<path class="jumper clone" stroke-linecap="round" stroke-linejoin="round" d="M47.5,94.3c0-23.5,19.9-42.5,44.5-42.5s44.5,19,44.5,42.5"/>
svg的
preserveAspectRatio
被设置为
xMidYMid meet
，
viewbox
居于viewport居中。然后里面有两条路径
<path>
元素和一个组
<g>
元素。
.jumper
的路径时上面进行跳跃的半圆形线条。
.jumper .clone
则是它的倒影。组元素用于制作两个椭圆形的水波纹。
CSS样式
class 为
.jumper
的路径会执行名称为
animJumper
的动画，动画被设置为无限循环。
.jumper {
fill: none;
stroke: #383845;
stroke-width: 10px;
stroke-dashoffset: 0;
stroke-dasharray: 0, 136.71884px;
-webkit-animation: animJumper 1.3s linear infinite;
animation: animJumper 1.3s linear infinite;
@-webkit-keyframes animJumper {
stroke-dasharray: 20.50783px, 136.71884px;
32% {
stroke-dasharray: 41.01565px, 136.71884px;
stroke-dashoffset: -47.85159px;
56% {
stroke-dasharray: 20.50783px, 136.71884px;
stroke-dashoffset: -116.21102px;
64% {
stroke-dasharray: 0, 136.71884px;
stroke-dashoffset: -136.71884px;
@keyframes animJumper {
stroke-dasharray: 20.50783px, 136.71884px;
32% {
stroke-dasharray: 41.01565px, 136.71884px;
stroke-dashoffset: -47.85159px;
56% {
stroke-dasharray: 20.50783px, 136.71884px;
stroke-dashoffset: -116.21102px;
64% {
stroke-dasharray: 0, 136.71884px;
stroke-dashoffset: -136.71884px;
半圆形的小线条的倒影使用
translateY
和
scaleY
将它放置在下面，并降低其透明，制作倒影效果。
.jumper.clone {
opacity: 0.05;
-webkit-transform: translateY(200px) scaleY(-1);
-ms-transform: translateY(200px) scaleY(-1);
transform: translateY(200px) scaleY(-1);
两个模拟水波扩散的椭圆使用
animCircle
来使其动画起来，同样设置为无限循环。
.circleL {
opacity: 0;
-webkit-transform-origin: 47.2px 95.6px;
-ms-transform-origin: 47.2px 95.6px;
transform-origin: 47.2px 95.6px;
-webkit-animation: animCircle 1.3s infinite;
animation: animCircle 1.3s infinite;
.circleR {
opacity: 0;
-webkit-transform-origin: 136.2px 95.6px;
-ms-transform-origin: 136.2px 95.6px;
transform-origin: 136.2px 95.6px;
-webkit-animation: animCircle 1.3s 0.728s infinite;
animation: animCircle 1.3s 0.728s infinite;
@-webkit-keyframes animCircle {
opacity: 1;
50% {
-webkit-transform: scale(3);
transform: scale(3);
opacity: 0;
100% {
opacity: 0;
@keyframes animCircle {
opacity: 1;
50% {
-webkit-transform: scale(3);
transform: scale(3);
opacity: 0;
100% {
opacity: 0;
友情链接：
jQuery之家
|
自助建站
|
WEB前端开发
|
海玉’s Blog
|
jQuery插件
jQuery之家-htmleaf.com自由分享各种
jQuery
、
HTML5
、
CSS3等前端开发插件。
