搜索框输入搜索动画效果
代码语言:html
所属分类:搜索
代码描述:搜索框输入搜索动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <style> html, body { padding: 0; margin: 0; color: #292929; background-color: #eaeaea; } .container { text-align: center; color: #2c3e50; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; } form { transition: all 0.5s; position: absolute; top: 50%; transform: translateY(-50%); } .finder { border: 1px solid #fff; background-color: #f6f5f0; border-radius: 15px; padding: 8px; box-shadow: 9px 9px 16px rgba(189, 189, 189, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5); } .finder__outer { display: flex; width: 600px; padding: 1.5rem 2rem; border-radius: 10px; box-shadow: inset 10px 10px 15px -10px #c3c3c3, inset -10px -10px 15px -10px #ffffff; } .finder__inner { display: flex; align-items: center; position: relative; flex: 1; } .finder__form { flex: 1; height: calc(100% + 3rem); } .finder__input { height: calc(100% + 3rem); border: none; background-color: transparent; outline: none; font-size: 1.5rem; letter-spacing: 0.75px; } .finder__icon { width: 40px; height: 40px; margin-right: 1rem; transition: all 0.2s; box-shadow: inset 0 0 0 20px #292929; border-radius: 50%; position: relative; } .finder__icon:after, .finder__icon:before { display: block; content: ""; position: absolute; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .finder__icon:after { width: 10px; height: 10px; background-color: #292929; border: 3px solid #f6f5f0; top: 50%; position: absolute; transform: translateY(-50%); left: 0px; right: 0; margin: auto; border-radius: 50%; } .active .finder__icon:after { border-width: 10px; background-color: #f6f5f0; } .finder__icon:before { width: 4px; height: 13px; background-color: #f6f5f0; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0