返回顶部
首页 > 资讯 > 精选 >svg+css或者js怎么制作打钩的动画效果
  • 315
分享到

svg+css或者js怎么制作打钩的动画效果

2023-06-08 04:06:36 315人浏览 独家记忆
摘要

这篇文章主要介绍了svg+CSS或者js怎么制作打钩的动画效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。效果图:html代码<!DOCTYPE html&

这篇文章主要介绍了svg+CSS或者js怎么制作打钩的动画效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

效果图:svg+css或者js怎么制作打钩的动画效果

html代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>打钩动画</title></head><body><div id="d1">    <input type="checkbox" style="display: none" id="love1" />    <label for="love1" id="btn1" >完成</label><svg width="200px" height="200px">    <circle r="90" class="circle" fill="none" stroke="#2de540" stroke-width="10" cx="100" cy="100" stroke-linecap="round" transfORM="rotate(-90 100 100) " ></circle>    <polyline  fill="none" stroke="#2de540" stroke-width="10" points="44,107 86,137 152,69" stroke-linecap="round" stroke-linejoin="round" class="tick" ></polyline></svg><h3 style="text-align: center;width: 200px">成功</h3></div></body><!--这里引入你本地的jq--><script src="Http://libs.baidu.com/Jquery/2.0.0/jquery.min.js"></script></html>

css代码

h3 {        font-family: Helvetica;        font-size: 30px;        margin-top: 20px;        color: #333;        opacity: 0;    }    input[type="checkbox"]:checked+ label ~ h3 {        animation: .6s title ease-in-out;        animation-delay: 1.2s;        animation-fill-mode: forwards;    }    .circle {        stroke-dasharray: 1194;        stroke-dashoffset: 1194;    }    input[type="checkbox"]:checked + label + svg .circle {        animation: circle 1s ease-in-out;        animation-fill-mode: forwards;    }    .tick {        stroke-dasharray: 350;        stroke-dashoffset: 350;    }    input[type="checkbox"]:checked + label+ svg .tick {        animation: tick .8s ease-out;        animation-fill-mode: forwards;        animation-delay: .95s;    }    @keyframes circle {        from {            stroke-dashoffset: 1194;        }        to {            stroke-dashoffset: 2388;        }    }    @keyframes tick {        from {            stroke-dashoffset: 350;        }        to {            stroke-dashoffset: 0;        }    }    @keyframes title {        from {            opacity: 0;        }        to {            opacity: 1;        }    }    label {        display: inline-block;        height: 38px;        width: 38px;        line-height: 38px;        padding: 0 18px;        background-color: #1E9FFF;        color: #fff;        white-space: nowrap;        text-align: center;        font-size: 14px;        border: none;        border-radius: 2px;        cursor: pointer;    }    #d1 {        display: flex;        justify-content: center;        min-height: 100px;        flex-direction: column;    }

写到这里本来应该就结束了 但是我们在真正实现功能的时候 不太可能用 checkbox切换动画效果的显示 一般还是需要按钮操作动画效果 下面是jq操作的代码 其实用jq的.animate()更好一些但是我是小白所以就偷了个懒 (ps:好吧其实是不会)直接用.css()

javascript代码

  $("#btn1").on("click",function () {       if($(this).text()==="完成"){           $(".circle").css({'animation':'circle 1s ease-in-out','animation-fill-mode':'forwards'});           $(".tick").css({'animation':'tick .8s ease-out','animation-fill-mode':'forwards','animation-delay':'.95s'});           $("h3").css({'animation':'.6s title ease-in-out','animation-fill-mode':'forwards','animation-delay':'1.2s'})           $(this).text("取消")       }else{           $(".circle").css({'animation':'none','animation-fill-mode':'none'});           $(".tick").css({'animation':'none','animation-fill-mode':'none'});           $("h3").css({'animation':'none','animation-fill-mode':'none'})           $(this).text("完成")       }   });

感谢你能够认真阅读完这篇文章,希望小编分享的“svg+css或者js怎么制作打钩的动画效果”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网精选频道,更多相关知识等着你来学习!

--结束END--

本文标题: svg+css或者js怎么制作打钩的动画效果

本文链接: https://www.lsjlt.com/news/251711.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • svg+css或者js怎么制作打钩的动画效果
    这篇文章主要介绍了svg+css或者js怎么制作打钩的动画效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。效果图:html代码<!DOCTYPE html&...
    99+
    2023-06-08
  • CSS+JS怎么制作皮卡丘动画
    这篇文章主要讲解了“CSS+JS怎么制作皮卡丘动画”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS+JS怎么制作皮卡丘动画”吧!画鼻子(一个扇形)利用 ...
    99+
    2024-04-02
  • css3 animate怎么制作好看的动画效果
    这篇文章主要讲解了“css3 animate怎么制作好看的动画效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css3 animate怎么制作好看的动画效...
    99+
    2024-04-02
  • HTML5怎么制作3D爱心动画效果
    本文小编为大家详细介绍“HTML5怎么制作3D爱心动画效果”,内容详细,步骤清晰,细节处理妥当,希望这篇“HTML5怎么制作3D爱心动画效果”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新...
    99+
    2024-04-02
  • CSS网页加载动画:制作各种炫酷的加载动画效果
    当用户进入一个网页时,最让人不耐烦的事情莫过于等待页面加载。为了缓解用户的焦虑,许多网站开始采用CSS加载动画来增加页面加载的趣味性。在这篇文章中,我们将学习如何使用CSS来制作各种炫酷的加载动画效果,并且提供具体的代码示例来帮助您实现。一...
    99+
    2023-11-18
    网页加载 制作技巧 CSS动画效果
  • 强大的CSS:模拟下雪效果动画制作教程
    下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果,更多效果大家可以自行发挥。1.前言由于公司产品的活动,需要模拟类似下雪的效果。浏览器实现动画无非css3和canvas(还有gif),对比下...
    99+
    2023-06-03
  • CSS+JS怎么实现水滴涟漪动画按钮效果
    这篇文章主要为大家展示了CSS+JS怎么实现水滴涟漪动画按钮效果,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“CSS+JS怎么实现水滴涟漪动画按钮效果”这篇文章吧。代码如下所示:<!DOCT...
    99+
    2023-06-08
  • 怎么用HTML5 Canvas draw方法制作动画效果
    这篇文章主要介绍“怎么用HTML5 Canvas draw方法制作动画效果”,在日常操作中,相信很多人在怎么用HTML5 Canvas draw方法制作动画效果问题上存在疑惑,小编查阅了各式资料,整理出简单...
    99+
    2024-04-02
  • js怎么实现带缓动动画的导航栏效果
    这篇文章主要介绍js怎么实现带缓动动画的导航栏效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!实例代码:<!DOCTYPE html> <html&nb...
    99+
    2024-04-02
  • 怎样在PPT中制作小人跑步的动画效果
    本篇文章给大家分享的是有关怎样在PPT中制作小人跑步的动画效果,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。现在大家在欣赏幻灯片的时候,可以发...
    99+
    2024-04-02
  • 怎么用纯CSS3制作带动画效果的主机价格表
    本篇内容主要讲解“怎么用纯CSS3制作带动画效果的主机价格表”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用纯CSS3制作带动画效果的主机价格表”吧!网页上...
    99+
    2024-04-02
  • 怎么用css实现水纹扩散的动画效果
    小编给大家分享一下怎么用css实现水纹扩散的动画效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!   <divclas...
    99+
    2024-04-02
  • 怎么用CSS实现眼冒金星的动画效果
    这篇文章将为大家详细讲解有关怎么用CSS实现眼冒金星的动画效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。     代码解读   &n...
    99+
    2024-04-02
  • 怎么用纯CSS实现Windows启动界面的动画效果
    这篇文章主要介绍了怎么用纯CSS实现Windows启动界面的动画效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。   代码解读   定...
    99+
    2024-04-02
  • 纯CSS3怎么打造好看的加载动画效果
    本篇内容介绍了“纯CSS3怎么打造好看的加载动画效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!  纯c...
    99+
    2024-04-02
  • 如何使用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果
    小编给大家分享一下如何使用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!HTML:添加一个链接,可修改...
    99+
    2023-06-08
  • CSS怎么实现弹簧效果的旋转加载动画
    这篇文章主要讲解了“CSS怎么实现弹簧效果的旋转加载动画”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS怎么实现弹簧效果的旋转加载动画”吧!先看看效果,...
    99+
    2024-04-02
  • 怎么用纯CSS实现条纹错觉的动画效果
    小编给大家分享一下怎么用纯CSS实现条纹错觉的动画效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!   代码解读   定义dom,容器中包含2个元素,分别代表2条轨道:   <...
    99+
    2024-04-02
  • 项目实践:如何运用CSS动画制作炫酷效果的经验分享
    CSS动画是很多前端开发者常用的技术之一,它可以实现一些非常有趣的效果,例如炫酷的按钮、流畅的页面加载效果以及动态的页面内容等等。在这篇文章中,我将分享一些如何使用CSS动画制作炫酷效果的经验。一起来看看吧!制作动画的基础知识在开始制作动画...
    99+
    2023-11-03
    CSS动画 经验分享 炫酷效果
  • 怎么使用CSS3滤镜制作文字快闪切换动画效果
    今天小编给大家分享一下怎么使用CSS3滤镜制作文字快闪切换动画效果的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作