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

代码语言：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;
        }
        
        @keyframes spark-radius {
        	0% { r: 0; animation-timing-function: cubic-bezier(0, 0.3, 0, 1.57) }
        	30% { r: 15; animation-timing-function: cubic-bezier(1, -0.39, 0.68, 1.04) }
        	95% { r: 8 }
        	99% { r: 10 }
        	99.99% { r: 7 }
        	100% { r: 0 }
        }
        
        @keyframes spark-one-motion {
        	0% { transform: translate(-20%, 50%); animation-timing-function: cubic-bezier(0.63, 0.88, 0, 1.25) }
        	20% { transform: rotate(-0deg) translate(0%, -50%); animation-timing-function: ease-in }
        	80% { transform: rotate(-230deg) translateX(-20%) rotate(-100deg) translateX(15%); animation-timing-function: linear }
        	100% { transform: rotate(-360deg) translate(30px, 100%); animation-timing-function: cubic-bezier(.64,.66,0,.51) }
        }
        
        .spark:nth-child(2) {
        	animation:
        		spark-radius 2.03s 1s both,
        		spark-two-motion 2.03s 1s both;
        }
        
        @keyframes spark-two-motion {
        	0% { transform: translate(120%, 50%) rotate(-70deg) translateY(0%); animation-timing-function: cubic-bezier(0.36, 0.18, 0.94, 0.55) }
        	20% { transform: translate(90%, -80%) rotate(60deg) translateY(-80%); animation-timing-function: cubic-bezier(0.16, 0.77, 1, 0.4) }
        	40% { transform: translate(110%, -50%) rotate(-30deg) translateY(-120%); animation-timing-function: linear }
        	70% { transform: translate(100%, -50%) rotate(120deg) translateY(-100%); animation-timing-function: linear }
        	80% { transform: translate(95%, 50%) rotate(80deg) translateY(-150%); animation-timing-function: cubic-bezier(.64,.66,0,.51) }
        	100% { transform: translate(100%, 50%) rotate(120deg) translateY(0%) }
        }
        
        .spark:nth-child(3) {
        	animation:
        		spark-radius 2.05s 1s both,
        		spark-three-motion 2.03s 1s both;
        }
        
        @keyframes spark-three-motion {
        	0% { transform: translate(50%, 100%) rotate(-40deg) translateX(0%); animation-timing-function: cubic-bezier(0.62, 0.56, 1, 0.54) }
        	30% { transform: translate(40%, 70%) rotate(20deg) translateX(20%); animation-timing-function: cubic-bezier(0, 0.21, 0.88, 0.46) }
        	40% { transform: translate(65%, 20%) rotate(-50deg) translateX(15%); animation-timing-function: cubic-bezier(0, 0.24, 1, 0.62) }
        	60% { transform: translate(60%, -40%) rotate(-50deg) translateX(20%); animation-timing-function: cubic-bezier(0, 0.24, 1, 0.62) }
        	70% { transform: translate(70%, -0%) rotate(-180deg) translateX(20%); animation-timing-function: cubic-bezier(0.15, 0.48, 0.76, 0.26) }
        	100% { transform: translate(70%, -0%) rotate(-360deg) translateX(0%) rotate(180deg) translateX(20%); }
        }
        
        
        
        
        .burst {
        	stroke-width: 3;
        }
        
        .burst :nth-child(2n) { color: #ff783e }
        .burst :nth-child(3n) { color: #ffab00 }
        .burst :nth-child(4n) { color: #55e214 }
        .burst :nth-child(5n) { color: #82d9f5 }
        
        .circle {
        	r: 6;
        }
        
        .rect {
        	width: 10px;
        	height: 10px;
        }
        
        .triangle {
        	d: path("M0,-6 L7,6 L-7,6 Z");
        	stroke-linejoin: round;
        }
        
        .plus {
        	d: path("M0,-5 L0,5 M-5,0L 5,0");
        	stroke-linecap: round;
        }
        
   .........完整代码请登录后点击上方下载按钮下载查看