转载

2种SVG和CSS3创意无限循环动画特效

简要教程

这是一款使用SVG和CSS3制作的非常有创意的无限循环动画特效。该无限循环动画特效共有两种效果，一种是模拟鱼儿跃起在落入水中的动画，一种是一条线绕无穷符号不断动画的特效。

这两种动画特效的灵感来自于 《7种基于GSAP的SVG Loader加载动画特效》 ，是根据它里面的两种效果来制作的。因为那7种GSAP效果是要收费的，因此这里使用CSS3来模拟这些动画效果。

2种SVG和CSS3创意无限循环动画特效

2种SVG和CSS3创意无限循环动画特效


制作方法

这2个无限循环动画特效都是使用SVG和CSS3 animation动画来制作的。在第一种效果中，是一半圆形的条线不断跃起落下的动画。它的HTML结构使用一个svg 来构建所有需要的元素。

  1. <svg viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
  2.   <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"/>
  3.   <g stroke="#2d2d2d" stroke-width="1">
  4.     <ellipse class="circleL" fill="none" stroke-miterlimit="10" cx="47.2" cy="95.6" rx="10.7" ry="2.7" />
  5.     <ellipse class="circleR" fill="none" stroke-miterlimit="10" cx="136.2" cy="95.6" rx="10.7" ry="2.7" />
  6.   </g>
  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"/>
  8. </svg>        
复制代码

svg 的preserveAspectRatio被设置为xMidYMid meet，viewbox居于viewport居中。然后里面有两条路径 元素和一个组元素。.jumper的路径时上面进行跳跃的半圆形线条。.jumper .clone则是它的倒影。组元素用于制作两个椭圆形的水波纹。
CSS样式

class 为.jumper的路径会执行名称为animJumper的动画，动画被设置为无限循环。
  1. .jumper {
  2.   fill: none;
  3.   stroke: #383845;
  4.   stroke-width: 10px;
  5.   stroke-dashoffset: 0;
  6.   stroke-dasharray: 0, 136.71884px;
  7.   -webkit-animation: animJumper 1.3s linear infinite;
  8.           animation: animJumper 1.3s linear infinite;
  9. }
  10. @-webkit-keyframes animJumper {
  11.   8% {
  12.     stroke-dasharray: 20.50783px, 136.71884px;
  13.   }
  14.   32% {
  15.     stroke-dasharray: 41.01565px, 136.71884px;
  16.     stroke-dashoffset: -47.85159px;
  17.   }
  18.   56% {
  19.     stroke-dasharray: 20.50783px, 136.71884px;
  20.     stroke-dashoffset: -116.21102px;
  21.   }
  22.   64% {
  23.     stroke-dasharray: 0, 136.71884px;
  24.     stroke-dashoffset: -136.71884px;
  25.   }
  26. }
  28. @keyframes animJumper {
  29.   8% {
  30.     stroke-dasharray: 20.50783px, 136.71884px;
  31.   }
  32.   32% {
  33.     stroke-dasharray: 41.01565px, 136.71884px;
  34.     stroke-dashoffset: -47.85159px;
  35.   }
  36.   56% {
  37.     stroke-dasharray: 20.50783px, 136.71884px;
  38.     stroke-dashoffset: -116.21102px;
  39.   }
  40.   64% {
  41.     stroke-dasharray: 0, 136.71884px;
  42.     stroke-dashoffset: -136.71884px;
  43.   }
  44. }               
复制代码
半圆形的小线条的倒影使用translateY和scaleY将它放置在下面，并降低其透明，制作倒影效果。
  1. .jumper.clone {
  2.   opacity: 0.05;
  3.   -webkit-transform: translateY(200px) scaleY(-1);
  4.       -ms-transform: translateY(200px) scaleY(-1);
  5.           transform: translateY(200px) scaleY(-1);
  6. }         
复制代码
两个模拟水波扩散的椭圆使用animCircle来使其动画起来，同样设置为无限循环。
  1. .circleL {
  2.   opacity: 0;
  3.   -webkit-transform-origin: 47.2px 95.6px;
  4.       -ms-transform-origin: 47.2px 95.6px;
  5.           transform-origin: 47.2px 95.6px;
  6.   -webkit-animation: animCircle 1.3s infinite;
  7.           animation: animCircle 1.3s infinite;
  8. }
  10. .circleR {
  11.   opacity: 0;
  12.   -webkit-transform-origin: 136.2px 95.6px;
  13.       -ms-transform-origin: 136.2px 95.6px;
  14.           transform-origin: 136.2px 95.6px;
  15.   -webkit-animation: animCircle 1.3s 0.728s infinite;
  16.           animation: animCircle 1.3s 0.728s infinite;
  17. }
  18. @-webkit-keyframes animCircle {
  19.   0% {
  20.     opacity: 1;
  21.   }
  22.   50% {
  23.     -webkit-transform: scale(3);
  24.             transform: scale(3);
  25.     opacity: 0;
  26.   }
  27.   100% {
  28.     opacity: 0;
  29.   }
  30. }
  31. @keyframes animCircle {
  32.   0% {
  33.     opacity: 1;
  34.   }
  35.   50% {
  36.     -webkit-transform: scale(3);
  37.             transform: scale(3);
  38.     opacity: 0;
  39.   }
  40.   100% {
  41.     opacity: 0;
  42.   }
  43. }               
复制代码
查看演示请点击     下载插件请点击 2种SVG和CSS3创意无限循环动画特效
正文到此结束
所属分类： 编程技术

热门推荐

相关文章

阿里云首购8折
说给你听

本文目录
随机标签
书籍教程
springboot-demo Java入门教程 bootstrap3 CSS Apache基础教程 php ionic 教程 Python mysql教程 eclipse Ubuntu VPS系统配置 AngularJS 教程 MongoDB教程 Struts2教程 Redis教程 Spring教程 Git教程 Java设计模式 Jenkins进阶系列 openfire参考指南 HBase教程 Maven教程 hibernate教程 Docker 教程 memcached教程 Quartz指南 Hive教程 ANTLR教程 Ant教程 java实例教程 SpringCloud Elastic-Job-Lite XStream教程 深入浅出MyBatis Hazelcast教程 ibaties教程 SVN教程 rabittmq教程 Hadoop教程 solr教程 WebService CXF学习 springcloud-demo JPA教程 ActiveMQ中文指南 Java内存模型 java-demo dubbo教程 Linux入门视频教程
近期评论
  1. 1 Spring Cloud Circuit Breaker快速入门Demo
  2. 2 Spring Cloud Bus快速入门Demo
  3. 3 Spring Cloud Config快速入门Demo
  4. 4 Spring Cloud Function快速入门Demo
  5. 5 SSPanel-Uim搭建教程 2023年全新定制版主题-解决老版本命令失效问题
  6. 6 Spring Boot集成Milvus和deeplearning4j实现图搜图功能
  7. 7 Spring Boot集成Aviator实现参数校验
  8. 8 ACME自动申请免费的通配符https域名证书
  9. 9 wordpress 数据库和文件优化
  10. 10 CentOS安装Docker与Docker-Compose
网站信息
  • 文章总数：82,696 篇
  • 文件总数：284,257 个
  • 标签总数：2,380 个
  • 分类总数：84 个
  • 留言数量：2,560 条
  • 在线人数：669 人
  • 运行天数：4,392天
  • 最后更新：2024年11月05日22点
Loading...

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

[HBLOG]公众号 HBLOG HBLOG