纯css实现多个不同尺寸电池效果
代码语言:html
所属分类:布局界面
代码描述:纯css实现多个不同尺寸电池效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/animate.min.css"> <style> body { margin: auto; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; height: 100vh; background-image: -webkit-gradient(linear, left bottom, left top, from(#444444), color-stop(#4444448f), to(#444444)); background-image: linear-gradient(0deg, #444444, #4444448f, #444444); } .battery-container { display: -webkit-box; display: flex; -webkit-box-align: baseline; align-items: baseline; } .type, .voltage { position: absolute; width: 100%; opacity: 0; -webkit-transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out; text-align: center; font-size: 14px; } .voltage { bottom: 115%; } .type { top: 110%; } .battery { position: relative; margin: 0 30px; background-image: linear-gradient(45deg, #232222, #606060); border-radius: 3px; box-shadow: 0px -16px 2px -14px #eeeeee, 0px -15px 0px -12px #dcdcdc; -webkit-transition: -webkit-transform 0.4s ease-in-out; transition: -webkit-transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out; } .battery span { color: #fff; font-family: Verdana, sans-serif; } .battery:hover { -webkit-transform: scale(1.7); transform: scale(1.7); } .battery:hover .type, .battery:hover .voltage { opacity: 1; } .battery:hover .voltage { -webkit-animation: 0.8s ease-in-out infinite blink; animation: 0.8s ease-in-out infinite blink; } .battery::before { content: "+"; text-align: center; font-size: 20px; padding: 17% 0 10%; position: absolute; top: 0; left: 0; width: 100%; border-top-left-radius: inherit; border-top-right-radius: inherit; background-image: linear-gradient(45deg, #a96a2b, #f6b765); } .battery::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#ffffff21), color-stop(transparent), color-stop(#ffffff54), to(transparent)); background-image: linear-gradient(90deg, transparent, #ffffff21, transparent, #ffffff54, transparent); } .battery.battery-9v { width: 75px; height: 120px; box-shadow: -16px -36px 2px -32px #eeeeee, -16px -35px 0px -29px #dcdcdc, 16px -34px 2px -32px #eeeeee, 16px -32px 0px -29px #dcdcdc; } .battery.battery-9v::before { content: "-\00a0\00a0\00a0\00a0\00a0+"; } .battery.battery-9v::after { background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(10%, #ffffff21), color-stop(85%, transparent), color-stop(90%, #ffffff3b), to(transparent)); background-image: linear-gradient(90deg, transparent 0%, #ffffff21 10%, transparent 85%, #ffffff3b 90%, transparent 100%); } .battery-9v .title { right: 40px; bottom: 20px; } .battery.battery-d { width: 80px; height: 145px; box-shadow: 0px -34px 2px -32px #eeeeee, 0px -30px 0px -27px #dcdcdc; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .battery-d .title { bottom: 31%; font-size: 17px; } .battery.battery-c { width: 60px; height: 125px; box-shadow: 0px -26px 2px -23px #eeeeee, 0px -21px 0px -18px #dcdcdc; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .battery-c .title { bottom: 30%; font-size: 14px; } .battery.battery-aa { width: 40px; height: 120px; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0