visual-design/theme-chalk/v-lantern.css

A Component Library for Vue 3

@charset "UTF-8";.lantern{width:200px;height:300px}.lantern-contaier{width:200px;height:150px;position:relative;animation:rotate 3s infinite ease-in-out}.center{width:100%;height:100%;background:red;border-radius:120px;box-shadow:0 0 80px -10px red;position:relative;animation:rotate 3s infinite ease-in-out;transform-origin:top center}.center-line{width:100%;height:100%;position:relative}.center-line::after,.center-line::before{content:"";position:absolute;height:100%;border:2px solid #ecaa2f;border-radius:50%;top:0}.center-line::before{width:150px;left:calc(50% - 75px)}.center-line::after{width:70px;left:calc(50% - 35px)}.center-line span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:18px;font-size:18px;color:#ecaa2f;font-weight:700}.center::before{border-radius:5px 5px 0 0;top:-8px}.center::after{border-radius:0 0 5px 5px;bottom:-8px}.center::after,.center::before{content:"";position:absolute;width:80px;height:10px;background:#ecaa2f;left:calc(50% - 40px)}.head-line{position:absolute;width:4px;height:60px;background:#ecaa2f;left:calc(50% - 2px);top:-60px}.footer-line{position:absolute;width:4px;height:50px;background:#ecaa2f;left:calc(50% - 2px);bottom:-50px;animation:rotate 3s infinite ease-in-out}.footer-line::before{content:"";position:absolute;width:16px;height:80px;background:linear-gradient(red,#e36d00 3px,#fbd342 5px,#e36d00 8px,#e36d00 12px,red 16px,rgba(255,0,0,.8) 26px,rgba(255,0,0,.6));border-radius:5px 5px 0 0;left:calc(50% - 8px);bottom:-75px}@keyframes rotate{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}