返回顶部
首页 > 资讯 > 前端开发 > VUE >H5原生form表单如何使实现checkbox特效
  • 468
分享到

H5原生form表单如何使实现checkbox特效

2024-04-02 19:04:59 468人浏览 薄情痞子
摘要

这篇文章主要介绍H5原生fORM表单如何使实现checkbox特效,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!效果如下:<!DOCTYPE html> <

这篇文章主要介绍H5原生fORM表单如何使实现checkbox特效,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

效果如下:

H5原生form表单如何使实现checkbox特效

<!DOCTYPE html>
<html>

 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   .md-checkbox {
    margin: 50px;
    position: relative;
    height: auto;
    font-size: 14px;
   }
   .md-checkbox label>span.inc {
    -WEBkit-animation: growCircle 0.2s ease;
    -moz-animation: growCircle 0.2s ease;
    animation: growCircle 0.2s ease;
   }
   
   @keyframes growCircle {
    0%,
    100% {
     transform: scale(0);
     opacity: 0.8;
    }
    70% {
     background: #eee;
     transform: scale(1.25);
    }
   }
   
   .md-checkbox label>span.inc {
    background: #fff;
    left: -20px;
    top: -20px;
    height: 60px;
    width: 60px;
    opacity: 0;
    border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
   }
   
   .md-checkbox input[type=checkbox] {
    visibility: hidden;
    position: absolute;
   }
   
   .md-checkbox label {
    cursor: pointer;
    padding-left: 30px;
   }
   
   .md-checkbox label>span {
    display: block;
    position: absolute;
    left: 0;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
   }
   
   .md-checkbox label>.check {
    top: -4px;
    left: 6px;
    width: 10px;
    height: 20px;
    border: 2px solid #26A69A;
    border-top: none;
    border-left: none;
    opacity: 0;
    z-index: 5;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    transition-delay: 0.2s;
   }
   
   .md-checkbox input[type=checkbox]:checked~label>.check {
    opacity: 1;
    -webkit-transform: scale(1) rotate(45deg);
    -moz-transform: scale(1) rotate(45deg);
    transform: scale(1) rotate(45deg);
   }
   
   .md-checkbox input[type=checkbox]:checked~label>.box {
    opacity: 0;
    -webkit-transform: scale(0) rotate(-180deg);
    -moz-transform: scale(0) rotate(-180deg);
    transform: scale(0) rotate(-180deg);
   }
   
   .md-checkbox label>.box {
    top: 0px;
    border: 2px solid #666;
    height: 20px;
    width: 20px;
    z-index: 5;
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    transition-delay: 0.2s;
   }
  </style>
 </head>

 <body>
  <div class="md-checkbox">
   <input type="checkbox" id="test" class="md-check" />
   <label for="test">
    <span></span>
             <span class="check"></span>
             <span class="box"></span>
                Option 1 
   </label>
  </div>
  <script>
   var list = document.getElementsByTagName('input');
   for(var i =0;i<list.length;i++){
    (function(n){
     list[n].addEventListener('click',function(e){
      var inc = this.nextElementSibling.firstElementChild;
      inc.className  = '';
      setTimeout(function(){
       inc.className  = 'inc';
      },0);
     })
    })(i)
   }
  </script>
 </body>

</html>

以上是“H5原生form表单如何使实现checkbox特效”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网VUE频道!

--结束END--

本文标题: H5原生form表单如何使实现checkbox特效

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

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

猜你喜欢
  • H5原生form表单如何使实现checkbox特效
    这篇文章主要介绍H5原生form表单如何使实现checkbox特效,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!效果如下:<!DOCTYPE html> <...
    99+
    2024-04-02
  • 原生JS实现数码表特效
    本文分享一个用原生JS实现的数码时钟特效,效果如下: 上面的数字是用的图片生成的,共10张图片如下: 实现代码如下,欢迎大家复制粘贴。 <!DOCTYPE html&g...
    99+
    2024-04-02
  • CSS3如何实现自定义Checkbox特效
    这篇文章给大家分享的是有关CSS3如何实现自定义Checkbox特效的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。效果图如下实例代码<!DOCTYPE html&...
    99+
    2024-04-02
  • 原生js如何实现轮播特效
    这篇文章主要为大家展示了“原生js如何实现轮播特效”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“原生js如何实现轮播特效”这篇文章吧。首先css代码a{text...
    99+
    2024-04-02
  • 如何使用Vue动态生成form表单
    这篇文章将为大家详细讲解有关如何使用Vue动态生成form表单,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具有数据收集、校验和提交功能的表单生成器,包含复选框、单选框、...
    99+
    2024-04-02
  • 如何使用 Golang 实现 Form 表单文件上传?
    go 语言使用 form 表单实现文件上传包括以下步骤:在 html 中设置 enctype="multipart/form-data" 属性,创建表单。在 go 中使用 r.parse...
    99+
    2024-05-13
    文件上传 golang
  • Angular如何实现Reactive Form表单验证
    这篇文章主要介绍了Angular如何实现Reactive Form表单验证,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。基础知识内建验证规则...
    99+
    2024-04-02
  • 如何使用Ajax方法实现Form表单的提交
    这篇文章主要介绍了如何使用Ajax方法实现Form表单的提交,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。常见的form表单提交方式<...
    99+
    2024-04-02
  • JS的Form表单转JSON格式如何实现
    今天小编给大家分享的是JS的Form表单转JSON格式如何实现,相信很多人都不太了解,为了让大家更加了解,所以给大家总结了以下内容,一起往下看吧。一定会有所收获的哦。目录一、serialize()方法二、serializeArray()方法...
    99+
    2023-07-06
  • 原生JS如何实现导航下拉菜单效果
    这篇文章主要介绍了原生JS如何实现导航下拉菜单效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。这个导航下拉菜单需要实现的功能是:下拉菜单的...
    99+
    2024-04-02
  • 如何使用原生js实现可拖拽效果
    这篇文章主要介绍如何使用原生js实现可拖拽效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!效果图:代码如下:<!DOCTYPE html> <html&...
    99+
    2024-04-02
  • 如何使用原生JavaScript实现放大镜效果
    这篇文章主要介绍了如何使用原生JavaScript实现放大镜效果的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇如何使用原生JavaScript实现放大镜效果文章都会有所收获,下面我们一起来看看吧。需求列表鼠标进...
    99+
    2023-07-05
  • Ajax如何实现提交Form表单及文件上传
    这篇文章主要为大家展示了“Ajax如何实现提交Form表单及文件上传”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Ajax如何实现提交Form表单及文件上传”这...
    99+
    2024-04-02
  • 如何使用CSS3+js实现简单的时钟特效
    小编给大家分享一下如何使用CSS3+js实现简单的时钟特效,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!html代码如下:<...
    99+
    2024-04-02
  • 原生js如何实现吸顶效果
    这篇文章给大家分享的是有关原生js如何实现吸顶效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。实现思路如下:1. div初始居普通文档流中2. 给window添加scroll事...
    99+
    2024-04-02
  • 如何使用CSS3和Checkbox实现JQuery的一些效果
    本篇内容主要讲解“如何使用CSS3和Checkbox实现JQuery的一些效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用CSS3和Checkbox实...
    99+
    2024-04-02
  • CSS3如何实现单选框动画特效
    这篇文章主要讲解了“CSS3如何实现单选框动画特效”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS3如何实现单选框动画特效”吧!HTML 代码<d...
    99+
    2024-04-02
  • JS如何实现简单的下雪特效
    这篇文章主要介绍了JS如何实现简单的下雪特效,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。前言首先看看项目结构,一张雪花图片,一个.html文件和 jquery-1.4.2....
    99+
    2023-06-22
  • Vue如何实现简单跑马灯特效
    这篇文章主要介绍“Vue如何实现简单跑马灯特效”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue如何实现简单跑马灯特效”文章能帮助大家解决问题。效果:点击按钮让文字动起来,点击停止按钮让文字停止知...
    99+
    2023-06-30
  • 如何简单实现C# form中嵌入并操作excel表
    如何简单实现C# form中嵌入并操作excel表,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。当我们实现from功能的时候需要把excel表嵌入到自己程序的C# form...
    99+
    2023-06-17
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作