<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo 11</title>
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700|VT323" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style11.css" />
<!--[if IE]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]--><script>document.documentElement.className = 'js';</script>
</head>
<body class="demo-11">
<svg class="hidden">
<defs>
<symbol id="icon-arrow" viewBox="0 0 24 24">
<title>arrow</title>
<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
</symbol>
<symbol id="icon-drop" viewBox="0 0 24 24">
<title>drop</title>
<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
</symbol>
<symbol id="icon-search" viewBox="0 0 24 24">
<title>search</title>
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</symbol>
<symbol id="icon-cross" viewBox="0 0 24 24">
<title>cross</title>
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
</symbol>
</defs>
</svg>
<main class="main-wrap">
<header class="codrops-header">
<div class="search-wrap">
<button id="btn-search" class="btn btn--search"><svg class="icon icon--search"><use xlink:href="#icon-search"></use></svg></button>
</div>
</header>
<div class="bottom-nav">
<nav class="codrops-demos">
<span>More demos: </span>
<a href="index.html">1</a>
<a href="index2.html">2</a>
<a href="index3.html">3</a>
<a href="index4.html">4</a>
<a href="index5.html">5</a>
<a href="index6.html">6</a>
<a href="index7.html">7</a>
<a href="index8.html">8</a>
<a href="index9.html">9</a>
<a href="index10.html">10</a>
<a class="current-demo" href="index11.html">11</a>
</nav>
</div>
</main><!-- /main-wrap -->
<div class="search">
<button id="btn-search-close" class="btn btn--search-close" aria-label="Close search form"><svg class="icon icon--cross"><use xlink:href="#icon-cross"></use></svg></button>
<div class="terminal">
<p class="terminal__line">Initiating search...</p>
<p class="terminal__line">Search interface completed.</p>
<p class="terminal__line">Fetching common searches...</p>
<p class="terminal__line">Common search terms fetched:</p>
<p class="terminal__line"><a href="#">#drones</a></p>
<p class="terminal__line"><a href="#">#classyfantastic</a></p>
<p class="terminal__line"><a href="#">#findtheneedle</a></p>
<p class="terminal__line"><a href="#">#howeverythingworks</a></p>
<p class="terminal__line"><a href="#">#whatsthat</a></p>
<p class="terminal__line"><a href="#">#dingdingding</a></p>
<p class="terminal__line"><a href="#">#90iesmovies</a></p>
</div>
<form class="search__form" action="">
<input class="search__input" name="search" type="search" placeholder="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
</form>
</div><!-- /search -->
<script src="js/demo11.js"></script>
</body>
</html>
HTML5+CSS3酷炫搜索框特效.zip
版权申诉
68 浏览量
2022-11-18
22:13:31
上传
评论
收藏 50KB ZIP 举报
HTML5+CSS3酷炫搜索框特效.zip （47个子文件） 
HTML5+CSS3酷炫搜索框特效 jiaoben4858 css 
style11.css 5KB style10.css 4KB style9.css 4KB style8.css 4KB style2.css 3KB style7.css 3KB style1.css 4KB style4.css 3KB style3.css 2KB demo.css 6KB style5.css 3KB style6.css 3KB normalize.css 2KB
index5.html 4KB index4.html 3KB img 
bg_2.svg 765B bg_9.svg 749B bg_11.svg 1KB bg_7.svg 1KB bg_10.svg 981B bg_5.svg 755B bg_3.svg 2KB bg_6.svg 762B bg.svg 765B bg_12.svg 752B bg_8.svg 1KB bg_4.svg 755B index9.html 4KB index10.html 4KB index.html 4KB js demo9.js 1KB demo4.js 1KB demo2.js 969B demo6.js 1KB demo1.js 1018B demo7.js 1KB demo3.js 1KB demo10.js 1KB demo8.js 1KB demo5.js 1KB demo11.js 1KB index2.html 3KB index6.html 3KB index7.html 4KB index8.html 3KB index3.html 3KB index11.html 4KB资源评论
