html5 流水效果,svg+css3 模拟管道水流效果,限chrome

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家，也给大家做个参考。

.water {

stroke-dasharray: 1000;

stroke-dashoffset: 1000;

animation: dash 5s linear 1;

}

.no-water {

stroke-dasharray: 1000;

stroke-dashoffset: 1000;

}

.first-run {

stroke-dasharray: 1000;

stroke-dashoffset: 1000;

animation: dash 5s linear 1;

}

.runing {

stroke-dasharray: 1000;

stroke-dashoffset: 1000;

animation: run 10s linear infinite;

}

.runwater {

stroke-dasharray: 1000;

stroke-dashoffset: 1000;

animation: run 10s linear infinite;

}

@keyframes dash {

to {

stroke-dashoffset: 0;

}

}

@keyframes run {

from {

stroke-dasha