css实现创意点点汇聚成搜索框效果代码-html代码-BFW代码库

css实现创意点点汇聚成搜索框效果代码

代码语言：html

所属分类：搜索

代码描述：css实现创意点点汇聚成搜索框效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        * {
        	box-sizing: border-box;
        }
        
        html, body {
        	min-height: 100vh;
        }
        
        body {
        	display: grid;
        	grid-template:
        		"search" minmax(300px, 50vh)
        		"results" minmax(20%, auto)
        		/ 1fr;
        	margin: 0;
        	font: 24px/1.5 system-ui, sans-serif;
        }
        
        
        
        #search {
        	display: grid;
        	grid-area: search;
        	grid-template:
        		"search" 60px
        		/ 420px;
        	justify-content: center;
        	align-content: center;
        	justify-items: stretch;
        	align-items: stretch;
        	background: hsl(0, 0%, 99%);
        }
        
        #search input {
        	display: block;
        	grid-area: search;
        	-webkit-appearance: none;
        	appearance: none;
        	width: 100%;
        	height: 100%;
        	background: none;
        	padding: 0 30px 0 60px;
        	border: none;
        	border-radius: 100px;
        	font: 24px/1 system-ui, sans-serif;
        	outline-offset: -8px;
        }
        
        
        #search svg {
        	grid-area: search;
        	overflow: visible;
        	color: hsl(215, 100%, 50%);
        	fill: none;
        	stroke: currentColor;
        }
        
        .spark {
        	fill: currentColor;
        	stroke: none;
        	r: 15;
        }
        
        .spark:nth-child(1) {
        	animation:
        		spark-radius 2.03s 1s both,
        		spark-one-motion 2s 1s both;
.........完整代码请登录后点击上方下载按钮下载查看