灌裝淚滴CSS3

Question

我試着填寫淚滴爲了使用它作爲預載

這裏是代碼

#drop { 
 
    margin: 100px auto; \t 
 
    width: 300px; 
 
    height: 300px; 
 
    border-bottom-right-radius: 50%; 
 
    border-bottom-left-radius: 50%; 
 
    border-top-left-radius: 50%; 
 
    -webkit-transform:rotate(-45deg); 
 
    z-index: 99; 
 
    position: relative; 
 
    background: #fff; 
 
    border: 1px solid #e74c3c; 
 
    overflow: hidden; 
 
} 
 
#drop::before { 
 
    content: ''; 
 
    position: absolute; 
 
    background: #e74c3c; 
 
    width: 100%; 
 
    bottom: 0; 
 
    animation: wipe 5s cubic-bezier(.2,.6,.8,.4) forwards infinite; 
 
} 
 
@keyframes wipe { 
 
    0% { 
 
    height: 0; 
 
    } 
 
    100% { 
 
    height: 100%; 
 
    } 
 
}

<div id="drop"></div>

我試圖用變換和保證金但它失敗了

在前提前感謝

Answer 1

我已經使用簡寫border-radius和我所提出的其他變化是pseudo元件

• 一倍pseudo元件的尺寸。
• 位置在中心
• 的pseudo元件與transform: translate(-100%, 10%) rotate(45deg);
• 定位它在元件的底部。在關鍵幀我是pseudo元素移動到該頂部

#drop { 
 
    margin: 100px auto; 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 50% 0 50% 50%; 
 
    -webkit-transform: rotate(-45deg); 
 
    z-index: 99; 
 
    position: relative; 
 
    background: #fff; 
 
    border: 1px solid #e74c3c; 
 
    overflow: hidden; 
 
} 
 

 
#drop::before { 
 
    content: ''; 
 
    position: absolute; 
 
    background: #e74c3c; 
 
    height: 200%; 
 
    width: 200%; 
 
    transform: translate(-100%, 10%) rotate(45deg); 
 
    top: 50%; 
 
    left: 50%; 
 
    transform-origin: center; 
 
    animation: wipe 5s cubic-bezier(.2, .6, .8, .4) forwards infinite; 
 
} 
 

 
@keyframes wipe { 
 
    0% { 
 
    transform: translate(-100%, 10%) rotate(45deg); 
 
    } 
 
    100% { 
 
    transform: translate(-50%, -50%) rotate(45deg); 
 
    }

<div id="drop"></div>