css口红💄
<div class="lipstick">
<div class="bottom"></div>
<div class="tip"></div>
<div class="closingcap"></div>
</div>
css:
body {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
.lipstick {
position: relative;
background-size: 300px;
height: 608px;
width: 107px;
animation: lipstick 3s infinite alternate;
}
.bottom {
position: absolute;
height: 180px;
width: 80px;
left: 16px;
bottom: 11px;
background: linear-gradient(to right, black 50%, silver 89%);
border-bottom-left-radius: 20%;
border-bottom-right-radius: 20%;
border-top-left-radius: 10%;
border-top-right-radius: 10%;
}
.bottom:after {
position: absolute;
content: '';
height: 107px;
width: 70px;
left: 5px;
bottom: 145px;
border-radius: 42px / 20px;
background: linear-gradient(to right, gold 50%, gold 79%);
}
.tip {
position: absolute;
height: 130px;
width: 53px;
left: 30px;
bottom: 242px;
border-radius: 50px / 30px;
border-top-left-radius: 59px 141px;
border-top-right-radius: 59px 141px;
background: #FF748C;
box-shadow: inset 0px 6px 9px red;
animation: up 5s infinite alternate;
}
.closingcap {
position: absolute;
height: 154px;
width: 80px;
left: 16px;
bottom: 152px;
background: linear-gradient(to right, black 50%, silver 89%);
border-top-left-radius: 20%;
border-top-right-radius: 20%;
border-bottom-left-radius: 10%;
border-bottom-right-radius: 10%;
animation: open 5s infinite alternate;
}
@keyframes open {
0% {
bottom: 152px;
transform: rotate(0);
left: 16px;
}
100% {
bottom: 400px;
transform: rotate(30deg);
left: 46px;
}
}
@keyframes up {
0% {
height: 0px;
}
100% {
height: 140px;
}
}
温馨提示 : 非特殊注明,否则均为©李联华的博客网原创文章,本站文章未经授权禁止任何形式转载;IP地址:18.226.163.23,归属地:俄亥俄州Dublin ,欢迎您的访问!
文章链接:https://www.ooize.com/css-lipstick-%f0%9f%92%84.html
文章链接:https://www.ooize.com/css-lipstick-%f0%9f%92%84.html
订阅
登录
0 评论