HTML5+CSS3实现的表单浮动标签特效源码

  • B3_495460
    了解作者
  • 276.7KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-04-13 05:42
    上传日期
实现了12种非常炫酷的表单浮动标签特效,有兴趣的朋友们可以前来下载使用。
HTML5+CSS3实现的表单浮动标签特效源码.rar
  • img
  • search.svg
    655B
  • js
  • classie.js
    1.8KB
  • fonts
  • font-awesome-4.2.0
  • fonts
  • fontawesome-webfont.svg
    280.3KB
  • fontawesome-webfont.eot
    54.7KB
  • fontawesome-webfont.woff
    63.9KB
  • fontawesome-webfont.ttf
    109.5KB
  • css
  • font-awesome.min.css
    21.5KB
  • icomoon.woff
    1.4KB
  • icomoon.ttf
    1.3KB
  • icomoon.svg
    1.8KB
  • icomoon.eot
    1.5KB
  • css
  • default.css
    5.8KB
  • normalize.css
    1.8KB
  • set2.css
    22.7KB
  • index.html
    17.4KB
内容介绍
<!doctype html> <html lang="zh" class="no-js"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5 SVG表单浮动标签特效</title> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" /> <link rel="stylesheet" type="text/css" href="css/default.css"> <link rel="stylesheet" type="text/css" href="css/set2.css" /> <!--[if IE]> <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> </head> <body> <div class="htmleaf-container"> <section class="htmleaf-content bgcolor-3"> <h2>Manami</h2> <span class="input input--manami"> <input class="input__field input__field--manami" type="text" id="input-32" /> <label class="input__label input__label--manami" for="input-32"> <span class="input__label-content input__label-content--manami">Username</span> </label> </span> <span class="input input--manami"> <input class="input__field input__field--manami" type="text" id="input-33" /> <label class="input__label input__label--manami" for="input-33"> <span class="input__label-content input__label-content--manami">Website</span> </label> </span> <span class="input input--manami"> <input class="input__field input__field--manami" type="text" id="input-34" /> <label class="input__label input__label--manami" for="input-34"> <span class="input__label-content input__label-content--manami">Invitation Code</span> </label> </span> </section> <section class="htmleaf-content bgcolor-7"> <h2>Nariko</h2> <span class="input input--nariko"> <input class="input__field input__field--nariko" type="text" id="input-20" /> <label class="input__label input__label--nariko" for="input-20"> <span class="input__label-content input__label-content--nariko">Username</span> </label> </span> <span class="input input--nariko"> <input class="input__field input__field--nariko" type="text" id="input-21" /> <label class="input__label input__label--nariko" for="input-21"> <span class="input__label-content input__label-content--nariko">Website</span> </label> </span> <span class="input input--nariko"> <input class="input__field input__field--nariko" type="text" id="input-22" /> <label class="input__label input__label--nariko" for="input-22"> <span class="input__label-content input__label-content--nariko">Invitation Code</span> </label> </span> </section> <section class="htmleaf-content bgcolor-1"> <h2>Nao</h2> <span class="input input--nao"> <input class="input__field input__field--nao" type="text" id="input-1" /> <label class="input__label input__label--nao" for="input-1"> <span class="input__label-content input__label-content--nao">Username</span> </label> <svg class="graphic graphic--nao" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none"> <path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/> </svg> </span> <span class="input input--nao"> <input class="input__field input__field--nao" type="text" id="input-2" /> <label class="input__label input__label--nao" for="input-2"> <span class="input__label-content input__label-content--nao">Email</span> </label> <svg class="graphic graphic--nao" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none"> <path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/> </svg> </span> <span class="input input--nao"> <input class="input__field input__field--nao" type="text" id="input-3" /> <label class="input__label input__label--nao" for="input-3"> <span class="input__label-content input__label-content--nao">Invitation Code</span> </label> <svg class="graphic graphic--nao" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none"> <path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/> </svg> </span> </section> <section class="htmleaf-content"> <h2>Yoshiko</h2> <span class="input input--yoshiko"> <input class="input__field input__field--yoshiko" type="text" id="input-10" /> <label class="input__label input__label--yoshiko" for="input-10"> <span class="input__label-content input__label-content--yoshiko" data-content="Bird's Color">Bird's Color</span> </label> </span> <span class="input input--yoshiko"> <input class="input__field input__field--yoshiko" type="text" id="input-11" /> <label class="input__label input__label--yoshiko" for="input-11"> <span class="input__label-content input__label-content--yoshiko" data-content="Wing Span">Wing Span</span> </label> </span> <span class="input input--yoshiko"> <input class="input__field input__field--yoshiko" type="text" id="input-12" /> <label class="input__label input__label--yoshiko" for="input-12"> <span class="input__label-content input__label-content--yoshiko" data-content="Beak Length">Beak Length</span> </label> </span> </section> <section class="htmleaf-content bgcolor-10"> <h2>Shoko</h2> <span class="input input--shoko"> <input class="input__field input__field--shoko" type="text" id="input-4" /> <label class="input__label input__label--shoko" for="input-4"> <span class="input__label-content input__label-content--shoko">Player Name</span> </label> <svg class="graphic graphic--shoko" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none"> <path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/> <path d="M0,2.5c0,0,298.666,0,399.333,0C448.336,2.5,513.994,13,597,13c77.327,0,135-10.5,200.999-10.5c95.996,0,402.001,0,402.001,0"/> </svg> </span> <span class="input input--shoko"> <input class="input__field input__field--shoko" type="text" id="input-5" /> <label class="input__label input__label--shoko" for="input-5"> <span class="input__label-content input__label-content--shoko">Village</span> </label> <svg class="graphic graphic--shoko" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none"> <path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/> <path d="M0,2.5c0,0,298.666,0,399.333,0C448.336,2.5,513.994,13,597,13c77.327,0,135-10.5,200.999-10.5c95.996,0,402.001,0,402.001,0"/> </svg> </span> <span class="input input--shoko"> <input class="input__field input__field--shoko" type="text" id="input-6" /> <label class="input__label input__label--shoko" for="input-6"> <span class="input__label-content input__label-content--shoko">World</span> </label> <svg class="graphic graphic--shoko" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none"> <path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/> <path d="M0,2.5c0,0,298.666,0,399.333,0C448.336,2.5,513.994,13,597,13c77.327,0,135-10.5,200.999-10.5c95.996,0,402.001,0,402.001,0"/> </svg> </span> </section> <section class="htmleaf-content b
评论
    相关推荐
    • html5 css3 离线包
      html5css3的离线chm,挺好的
    • HTML5CSS3.rar
      html5+css3参考手册chm电子书,最新版的符合W3C标准,下载解压就可以使用了,是页面开发人员的必备工具。本想赠送给大家,无奈系统自动要积分。
    • HTML5CSS3发光文字
      HTML5CSS3发光文字_可自定义文字色彩_效果很赞
    • HTML5CSS3用户手册
      HTML5CSS3相关知识,动手写代码是提高能力的最快途径,能力是信心de来源!
    • HTML5 CSS3
      WEB技术 HTML5 CSS3等 chm版
    • HTML 5 CSS 3 电子书合集
      包括3本书是学习HTML5CSS3的绝佳组合(PDF版): 英文版《Stunning CSS3》、中文版《响应式Web设计-HTML5CSS3实战》、英文版《Responsive Web Design with HTML5 and CSS3
    • html5css3商务网站
      html5css3商务网站,英文版,但有多个界面,功能强大,布局很漂亮,
    • html5 css3 手册
      html5 css3 手册
    • html5 CSS3 收集
      html5+ CSS3 收集结合 希望想提前学习的有点帮助
    • html5 css3
      这是由html5+css3制作的一个实例,包含三个页面,俩种风格,并且提供了四种按钮方案供大家选择。