css+div布局实现文字标签及搜索栏效果代码
代码语言:html
所属分类:搜索
代码描述:css+div布局实现文字标签及搜索栏效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Lato"); *, ::before, ::after { box-sizing: border-box; } body { margin: 0; display: flex; height: 100vh; align-items: center; justify-content: center; overflow: hidden; font: 600 62.5% "Lato", sans-serif; background-color: #17141d; } a { text-decoration: none; white-space: nowrap; font-size: 1rem; color: #a1a1af; } a.tag { display: block; padding: 0.3em 0.85em; margin: 0.5em; text-transform: uppercase; border: 3px solid #28242f; border-radius: 2em; transition: transform 0.2s; transition-timing-function: cubic-bezier(0.45, -0.85, 0.55, -0.45); } a.tag:hover { transform: scale(1.2); background: linear-gradient(to right, #ff8a00, #da1b60); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .container { margin: 2em 6em; padding: 3em; padding-left: 1em; display: flex; width: 100%; justify-content: space-between; align-items: center; font-size: 1rem; color: #a1a1af; border: 1px solid #28242f; border-radius: 0.35em; background-color: #201c29; background-repeat: no-repeat; background-size: contain; background-position: 70% 50%; box-shadow: 0 10px 60px #070509; } .container .tags { margin: 0; display: flex; justify-content: center; align-items: center; } .container .tags span { margin-right: 1em; padding: 1em; text-transform: uppercase; transform: rotate(180deg); writing-mode: vertical-rl; border-left: 3px solid #28242f; background: linear-gradient(to right, #ff8a00, #da1b60); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .container .tags a:last-child { margin-left: 0.5em; } .container .tags a:last-child:hover { color: white; } .container label { position: relative; white-space: nowrap; display: flex; width: 48px; height: 48px; align-items: center; justify-content: flex-end; border: 3px solid transparent; border-radius: 2em; background-color: #17141d; background-image: radial-gradient(circle at 50%, #ff8a00, #da1b60); transition: all 250ms ease-in-out; } .container label::before { position: absolute; right: 0; bottom: -20px; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0