div+css实现简洁搜索框效果代码
代码语言:html
所属分类:搜索
代码描述:div+css实现简洁搜索框效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Nunito'> <style> * { outline: none; } html, body { height: 100%; min-height: 100%; } body { margin: 0; background-color: #ffd8d8; } .tb { display: table; width: 100%; } .td { display: table-cell; vertical-align: middle; } input, button { color: #fff; font-family: Nunito; padding: 0; margin: 0; border: 0; background-color: transparent; } #cover { position: absolute; top: 50%; left: 0; right: 0; width: 100%; padding: 35px; margin: -83px auto 0 auto; background-color: #ff7575; border-radius: 20px; box-shadow: 0 10px 40px #ff7c7c, 0 0 0 20px #ffffffeb; transform: scale(0.5); } form { height: 96px; } input[type="text"] { width: 100%; height: 96px; font-size: 60px; line-height: 1; } input[type="text"]::-moz-placeholder { color: #e16868; } input[type="text"]:-ms-input-placeholder { color: #e16868; } input[type="text"]::placeholder { color: #e16868; } #s-cover { width: 1px; padding-left: 35px; } button { position: relative; display: block; width: 84px; height: 96px; cursor: pointer; } #s-circle { position: relative; top: -8px; left: 0; width: 43px; height: 43px; margin-top: 0; border-width: 15px; border: 15px solid #fff; background-color: transparent; border-radius: 50%; transition: 0.5s ease all; } button span { position: absolute; top: 68px; left: 43px; display: block; width: 45px; height: 15px; background-color: transparent; border-radius: 10px; transform: rotateZ(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0