div+css实现简洁的搜索框伸缩弹出效果代码
代码语言:html
所属分类:搜索
代码描述:div+css实现简洁的搜索框伸缩弹出效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <style> @import url("https://fonts.googleapis.com/css?family=Inconsolata:700"); * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; } body { background: #252525; } .container { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; width: 300px; height: 100px; } .container .search { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 80px; height: 80px; background: crimson; border-radius: 50%; transition: all 1s; z-index: 4; box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4); } .container .search:hover { cursor: pointer; } .container .search::before { content: ""; position: absolute; margin: auto; top: 22px; right: 0; bottom: 0; left: 22px; width: 12px; height: 2px; background: white; transform: rotate(45deg); transition: all .5s; } .container .search::after { content: ""; position: absolute; margin: auto; top: -5px; right: 0; bottom: 0; left: -5px; width: 25px; height: 25px; border-radius: 50%; border: 2px solid white; transition: all .5s; } .container input { font-family: '.........完整代码请登录后点击上方下载按钮下载查看
网友评论0