转载

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教程 Jenkins进阶系列 openfire参考指南 Java设计模式 HBase教程 java-demo Maven教程 springcloud-demo hibernate教程 Docker 教程 memcached教程 Quartz指南 Hive教程 ANTLR教程 SpringCloud Ant教程 java实例教程 Hazelcast教程 XStream教程 Elastic-Job-Lite 深入浅出MyBatis ibaties教程 SVN教程 rabittmq教程 Hadoop教程 solr教程 WebService CXF学习 JPA教程 ActiveMQ中文指南 Java内存模型 dubbo教程 python3-demo Linux入门视频教程
近期评论
  1. 1 使用 Docker 打包和运行 Vue 应用
  2. 2 Dependency Check命令行方式扫描jar包的安全漏洞
  3. 3 maven使用Dependency-Check来扫描安全漏洞
  4. 4 使用sonarqube分析代码质量
  5. 5 使用screw来对比数据库表和字段差异
  6. 6 Spring Boot 实现防盗链功能
  7. 7 在Spring Boot中的实现国际化（i18n）
  8. 8 一个用于 SMB/CIFS 网络的 Java 库-JCIFS
  9. 9 Spring Boot 3.x嵌入MongoDB 进行测试
  10. 10 java如何解析和生成yaml文件？
网站信息
  • 文章总数：82,737 篇
  • 文件总数：284,312 个
  • 标签总数：2,416 个
  • 分类总数：85 个
  • 留言数量：2,559 条
  • 在线人数：635 人
  • 运行天数：4,439天
  • 最后更新：2024年12月22日17点
Loading...

其他链接

关于本站

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

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

问题交流

[HBLOG]公众号 HBLOG HBLOG