代码分享:
<style type="text/css">
.balloon {
width: 200px;
height: 200px;
background: radial-gradient(circle at 10% 20%, rgba(0,128,0,.5), rgba(0,96,48,.8));
border-radius: 100% 100% 60% 100%;
transform: rotate(45deg);
position: relative;
left: calc(50% - 100px);
top: 300px;
animation: up 5s linear infinite;
}
.balloon::before, .balloon::after { content: ''; position: absolute; }
.balloon::before {
width: 1px;
height:100px;
background: rgba(0,0,0,.7);
left: 100%;
top: 100%;
transform: rotate(-45deg) translate(35px,-12px);
}
.balloon::after {
background: rgba(0,128,0,.85);
width: 10px;
height: 10px;
border-radius: 10%;
top: 100%;
left: 100%;
transform: rotate(-45deg) translate(0,-28px);
}
@keyframes up {
to { top: -340px; left: 200px; }
}
</style>
<div class="balloon"></div>
|