赞
踩
<!--html-->
<input type="radio" name="water" class="water--0" id="r0">
<label for="r0">empty</label>
<input type="radio" name="water" class="water--30" id="r1">
<label for="r1">30%</label>
<input type="radio" name="water" class="water--50" id="r2">
<label for="r2">50%</label>
<input type="radio" name="water" class="water--90" id="r3">
<label for="r3">90%</label>
<div class="cylinder">
<div class="circle"></div>
<div class="bg"></div>
<div class="water"></div>
</div>
// css body { padding: 50px 0; text-align: center; background: #000; } input { margin-bottom: 30px; } .cylinder { position: relative; overflow: hidden; margin: 0 auto; width: 100px; height: 300px; border-radius: 50px/25px; border: 2px solid #fff; } .bg{ position: relative; overflow: hidden; margin: 0 auto; top: 40px; width: 100px; height: 260px; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 24%, rgba(255,255,255,0.15) 34%, rgba(255,255,255,0.1) 44%, rgba(255,255,255,0.25) 66%, rgba(255,255,255,0.5) 80%, rgba(255,255,255,0.2) 89%, rgba(255,255,255,0) 100%); } .circle{ position: absolute; left: 4px; top: 4px; width: 88px; height: 34px; border-radius: 50px/25px; border: 2px solid #fff; background-color: rgba(160, 160, 160, 0); content: ''; } .cylinder:before { position: absolute; left: -2px; top: -2px; width: 100px; height: 46px; border-radius: 50px/25px; border: 2px solid #fff; background-color: rgba(160, 160, 160, 0); content: ''; } .cylinder:after { position: absolute; left: 0; bottom: 0; width: 100px; height: 50px; border-radius: 50px/25px; background-color: rgba(160, 160, 160, 0); content: ''; } .water { position: absolute; z-index: -1; left: 4px; bottom: 4px; width: 88px; height: 0; padding-top: 50px; border-radius: 50px/25px; border: 2px solid #fff; /* background-color: rgba(0, 160, 160, 0.5); */ background: linear-gradient(270deg, #5EFFD3 0%, #00F193 61%, #20A876 100%); transition: 0.3s linear; } .water:before { position: absolute; left: -2px; top: -1px; width: 88px; height: 34px; border-radius: 50px/25px; border: 2px solid #fff; background-color: rgba(0, 160, 160, 0.2); content: ''; } .water:after { position: absolute; left: 0; bottom: 0; width: 88px; height: 34px; border-radius: 50px/25px; background-color: rgba(0, 160, 160, 0); content: ''; } .water--0:checked ~ .cylinder .water { bottom: -50px; } .water--30:checked ~ .cylinder .water { height: calc(250px * 0.3); } .water--50:checked ~ .cylinder .water { height: calc(250px * 0.5); } .water--90:checked ~ .cylinder .water { height: calc(238px * 1); }