css+svg实现搜索框点击动画效果代码
代码语言:html
所属分类:搜索
代码描述:css+svg实现搜索框点击动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Montserrat+Alternates:300,400,500,600" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> html, body { font-family: 'Montserrat Alternates', sans-serif; color: #FFFFFF; width: 100%; max-width: 100%; height: 100%; padding: 0; margin: 0; } *, *:before, *:after { -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(0,0,0,0); user-select: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; box-sizing: border-box; -webkit-box-sizing: border-box; padding: 0; margin: 0; } a, a:visited, a:hover { color: inherit; text-decoration: none; } main { position: absolute; top: 0; left: 0; margin: 0 auto; padding: 0 26px; width: 100%; height: 100%; background: rgba(154,57,163,1); background: -moz-linear-gradient(-45deg, rgba(154,57,163,1) 0%, rgba(65,103,168,1) 100%); background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(154,57,163,1)), color-stop(100%, rgba(65,103,168,1))); background: -webkit-linear-gradient(-45deg, rgba(154,57,163,1) 0%, rgba(65,103,168,1) 100%); background: -o-linear-gradient(-45deg, rgba(154,57,163,1) 0%, rgba(65,103,168,1) 100%); background: -ms-linear-gradient(-45deg, rgba(154,57,163,1) 0%, rgba(65,103,168,1) 100%); background: linear-gradient(135deg, rgba(154,57,163,1) 0%, rgba(65,103,168,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9a39a3', endColorstr='#4167a8', GradientType=1 ); } h1 { display: block; margin: 0 auto 25px auto; text-align: center; font-size: 1.92em; font-weight: 600; letter-spacing: -0.055em; } h2 { display: block; margin: 0 auto 60px auto; text-align: center; font-weight: 400; font-size: 1.25em; letter-spacing: -0.015em; } .container { position: relative; margin: calc(75px + 2vh + 2vw) auto 0 auto; padding: 0; width: 100%; max-width: 840px; } .search-box { position: relative; width: 100%; max-width: 360px; height: 60px; border-radius: 120px; margin: 0 auto; } .search-icon, .go-icon { position: absolute; top: 0; height: 60px; width: 86px; line-height: 61px; text-align: center; } .search-icon { left: 0; pointer-events: none; font-size: 1.22em; will-change: transform; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform-origin: center center; -webkit-transform-origin: center center; -moz-transform-origin: center center; -o-transform-origin: center center; transition: transform 400ms 220ms cubic-bezier(0.190, 1.000, 0.220, 1.000); -webkit-transition: transform 400ms 220ms cubic-bezier(0.190, 1.000, 0.220, 1.000); -moz-transition: transform 400ms 220ms cubic-bezier(0.190, 1.000, 0.220, 1.000); -o-transition: transform 400ms 220ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } .si-rotate { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); } .go-icon { right: 0; pointer-events: none; font-size: 1.38em; will-change: opacity; cursor: default; opacity: 0; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transition: opacity 190ms ease-out, transform 260ms cubic-bezier(0.190, 1.000, 0.220, 1.000); -webkit-transition: opacity 190ms ease-out, transform 260ms cubic-bezier(0.190, 1.000, 0.220, 1.000); -moz-transition: opacity 190ms ease-out, transform 260ms cubic-bezier(0.190, 1.000, 0.220, 1.000); -o-transition: opacity 190ms ease-out, transform 260ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } .go-in { opacity: 1; pointer-events: all; cursor: pointer; transform: rotate(0); -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transition: opacity 190ms ease-out, transform 260ms 20ms cubic-bezie.........完整代码请登录后点击上方下载按钮下载查看
网友评论0