<script> export default {
} </script>
<style lang="scss"> .container { position: relative; width: 140px; margin: auto; }
.header { position: absolute; width: 26px; height: 10px; left: 50%; top: 0; transform: translate(-50%, -10px); border-radius: 5px 5px 0 0; background: rgba(255, 255, 255, .88); }
.battery-copy { position: absolute; top: 0; left: 0; height: 220px; width: 140px; border-radius: 15px 15px 5px 5px; overflow: hidden; }
.battery { position: relative; height: 220px; box-sizing: border-box; border-radius: 15px 15px 5px 5px; box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.22); background: #fff; z-index: 1; &::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 80%; background: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%); border-radius: 0px 0px 5px 5px; box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08); animation: charging 10s linear infinite; filter: hue-rotate(90deg); } }
.g-wave { position: absolute; width: 300px; height: 300px; background: rgba(255, 255, 255, .8); border-radius: 45% 47% 44% 42%; bottom: 25px; left: 50%; transform: translate(-50%, 0); z-index: 1; animation: move 10s linear infinite; }
.g-wave:nth-child(2) { border-radius: 38% 46% 43% 47%; transform: translate(-50%, 0) rotate(-135deg); }
.g-wave:nth-child(3) { border-radius: 42% 46% 37% 40%; transform: translate(-50%, 0) rotate(135deg); }
@keyframes charging { 50% { box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83), 0px 4px 10px rgba(9, 188, 215, 0.4); } 95% { top: 5%; filter: hue-rotate(0deg); border-radius: 0 0 5px 5px; box-shadow: 0 14px 28px rgba(4, 188, 213, .2), 0 10px 10px rgba(9, 188, 215, 0.08); } 100% { top: 0%; filter: hue-rotate(0deg); border-radius: 15px 15px 5px 5px; box-shadow: 0 14px 28px rgba(4, 188, 213, 0), 0 10px 10px rgba(9, 188, 215, 0.4); } }
@keyframes move { 100% { transform: translate(-50%, -160px) rotate(720deg); } } </style> 转自： https://csscoco.com/inspiration/#/