多标签选择效果
代码语言:html
所属分类:表单美化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Multiple filter select</title> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Poppins:400,700'> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { display: flex; justify-content: center; align-items: top; height: 100vh; overflow: hidden; background-image: linear-gradient(to top, #09203f 0%, #537895 100%); } .select-wrap { margin-top: 100px; width: 250px; transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955); } .select-wrap .select { padding: 15px 55px 15px 15px; border-radius: 8px; box-shadow: 0 3px 20px -1px rgba(22, 42, 90, 0.5); position: relative; min-height: 61px; z-index: 1; transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955); } .select-wrap .select p { text-transform: capitalize; color: #fff; opacity: .7; letter-spacing: .6pt; line-height: 2.2; font-size: .9em; transition: margin 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955); } .select-wrap .select .arrow { right: 10px; top: calc(50% - 15px); bottom: 0; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; position: absolute; display: flex; align-items: center; justify-content: center; transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955); } .select-wrap .select .arrow:before, .select-wrap .select .arrow:after { content: ''; position: absolute; display: block; width: 2px; height: 8px; top: 11px; border-bottom: 8px solid #99A3BA; transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955); } .select-wrap .select .arrow:before { -webkit-transform: rotate(-130deg); transform: rotate(-130deg); } .select-wrap .select .arrow:after { -webkit-transform: rotate(130deg); transform: rotate(130deg); } .select-wrap .select .arrow:hover { transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955); background: rgba(0, 0, 0, 0.1); } .select-wrap .select .filter { display: inline-block; padding: 5px 30px 5px 8px; margin: 10px 10px 0 0; background: #99A3BA; color: #fff; font-size: .9em; border-radius: 4px; position: relative; cursor: pointer; transform: scale(0); opacity: 0; display: none; transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955), background 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955); } .select-wrap .select .filter:after { content: "x"; cursor: pointer; position: absolute; right: 4px; top: calc(50% - 10px); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: .8em; color: #fff; border-radius: 20px; background: rgba(0, 0, 0, 0); } .select-wrap .select .filter:nth-child(3) { margin: 0 10px 0 0; } .select-wrap .select .filter:nth-child(4) { margin: 0 10px 0 0; } .select-wrap .select .filter:hover:after { transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955), background 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955); background: rgba(0, 0, 0, 0.2); } .select-wrap .select .filter.active { transform: scale(1); opacity: 1; } .select-wrap .filter-wrap { list-style-type: none; border-radius: 0 0 8px 8px; box-shadow: 0 4px 15px -1px rgba(22, 42, 90, 0.5); position: relative; display: none; } .select-wrap .filter-wrap li { padding: 5px 15px 5px 15px; cursor: pointer; transition: transform 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955), opacity 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955), background 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955); opacity: 1; color: #fff; } .select-wrap .filter-wrap li:nth-child(1) { padding-top: 10px; } .select-wrap .filter-wrap li:last-child { padding-bottom: 9px; } .select-wrap .filter-wrap li:hover { background: #537895; transition: background 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955); } .select-wrap .filter-wrap li.remove { transition: transform 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955), opacity 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955), background 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955); transform: translateX(100px); opacity: 0; } .select-wrap.open .select { border-radius: 8px 8px 0 0; box-shadow: 0 0 15px -1px rgba(22, 42, 90, 0.2); } .select-wrap.open .select .arrow:before, .select-wrap.open .select .arrow:after { top: 4px; } .select-wrap.open .select .arrow:before { -webkit-transform: rotate(-50deg); transform: rotate(-50deg); } .select-w.........完整代码请登录后点击上方下载按钮下载查看
网友评论0