CSS实现的下雨雨珠水珠雨点效果实例页面

回到相关文章 »

效果:

代码:

HTML代码:
<div class="windows">
    <i class="dropplet"></i>
    <i class="dropplet"></i>
    <i class="dropplet"></i>
    <i class="dropplet"></i>
    <i class="dropplet"></i>
</div>
CSS代码:
.windows {
    width: 425px; height: 284px;
    background:url(street.jpg);
    position: relative;
}
.windows::before {
    content: '';    
    display: block;
    height: 100%;
    background-color: #fff2;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.dropplet {
      position: absolute;
}
.dropplet:nth-child(1) {
    top: 100px; left: 100px;
    width: 40px; height: 32px;
    border-radius: 50% 50% 50% 50% / 50% 50% 45% 45%;
    background: radial-gradient(ellipse at center, white 40%, transparent 70%) no-repeat 60% 25% / 16% 15%;
    box-shadow: inset 7px 0 2px -5px rgba(0, 0, 0, .2), inset 6px 0 1px -5px rgba(0, 0, 0, .2), inset 0 -1px 2px rgba(250, 241, 220, .5), inset 0 -10px 5px 1px rgba(255, 255, 255, .3), inset -10px 5px 2px -10px rgba(0, 0, 0, .3), inset -10px 7px 5px -10px rgba(0, 0, 0, .2), inset 0 10px 15px -2px rgba(0, 0, 0, .3), 0 2px 1px -1px rgba(245, 227, 183, .5), -1px 8px 1px -2px rgba(0, 0, 0, .5), -1px 10px 2px -2px rgba(0, 0, 0, .4), 1px -1px 2px 0 rgba(50, 50, 50, .5);
}
.dropplet:nth-child(2) {
    top: 125px; left: 155px;
    width: 50px; height: 40px;
    border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, .1) 0%, white 10%, white 40%, transparent 60%) no-repeat 60% 25% / 18% 16%;
    box-shadow: inset 0 1px 5px rgba(0, 0, 0, .2), inset 7px 2px 1px -5px rgba(169, 168, 168, .7), inset 0 -1px 2px rgba(250, 241, 220, .1), inset 0 -2px 10px rgba(255, 255, 255, .1), inset -1px 1px 1px rgba(169, 168, 168, .5), inset -11px 3px 1px -10px rgba(169, 168, 168, .3), inset -10px 7px 5px -10px rgba(0, 0, 0, .3), inset 0 1px rgba(58, 2, 2, .3), inset 0 15px 15px rgba(0, 0, 0, .2), 0 1px 1px -1px rgba(245, 227, 183, .6), 0 2px 1px -1px rgba(131, 131, 131, .5), -10px -2px 2px -10px #666, -11px 4px 2px -10px #666, -10px 8px 2px -10px #666, 8px 6px 2px -10px #666, 7px 9px 2px -10px #6c6c6c, -1px 8px 1px -2px rgba(0, 0, 0, .5), -1px 10px 2px -2px rgba(0, 0, 0, .3), 0 0 1px rgba(0, 0, 0, .1);
}
.dropplet:nth-child(3) {
    top: calc(50% + 20px); left: calc(50% + 80px);
    width: 120px; height: 120px;
    border-radius: 90% 60% 100% 50% / 90% 50% 100% 45%;
    background: radial-gradient(ellipse at center, white 40%, transparent 60%) no-repeat 60% 25% / 10% 10%;
    box-shadow: inset 13px -4px 4px -10px rgba(0, 0, 0, .4), inset 14px -4px 10px -10px rgba(0, 0, 0, .2), inset 0 -3px 10px 1px rgba(250, 241, 220, .8), inset 0 -15px 10px 0 rgba(0, 0, 0, .2), inset -20px 10px 5px -20px rgba(0, 0, 0, .2), inset -20px 15px 10px -20px rgba(0, 0, 0, .2), inset 0 3px 2px 1px rgba(0, 0, 0, .2), inset 0 30px 20px -5px rgba(0, 0, 0, .3), 0 2px 1px -1px rgba(245, 227, 183, .8), -16px 13px 5px -20px black, 17px 13px 5px -20px black, 15px 19px 5px -20px black, -1px 16px 3px -5px rgba(0, 0, 0, .4), -1px 21px 3px -5px rgba(0, 0, 0, .3), 1px -1px 1px rgba(50, 50, 50, .1);
    transform: scale(.4);
}
.dropplet:nth-child(4) {
    top: 60px; left: calc(50% + 90px);
    width: 60px; height: 60px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, white 30%, transparent 60%) no-repeat 60% 25% / 12.5% 12.5%;
    box-shadow: inset 15px 0 5px -10px rgba(0, 0, 0, .2), inset 13px 0 2px -10px rgba(0, 0, 0, .2), inset 0 -3px 5px 0 rgba(250, 241, 220, .5), inset 0 -20px 10px 1px rgba(255, 255, 255, .3), inset -23px 10px 5px -20px rgba(0, 0, 0, .3), inset -20px 15px 10px -20px rgba(0, 0, 0, .2), inset 0 25px 20px -5px rgba(0, 0, 0, .3), 0 2px 1px -1px rgba(245, 227, 183, .8), -17px 10px 5px -20px black, 14px 20px 5px -20px black, 16px 14px 5px -20px black, -2px 27px 5px -20px rgba(255, 255, 255, .3), -1px 14px 3px -5px rgba(0, 0, 0, .5), -1px 18px 3px -5px rgba(0, 0, 0, .4), 0 -1px 5px 0 rgba(85, 85, 85, .5);
    transform: scale(.5);
}
.dropplet:nth-child(5) {
    top: calc(50% + 30px); left: calc(50% - 160px);
    width: 65px; height: 68px;
    border-radius: 50% 50% 50% 50% / 50% 50% 45% 45%;
    background: radial-gradient(ellipse at center, white 40%, transparent 60%) no-repeat 60% 25% / 10px 6px;
    box-shadow: inset 12px 5px 5px -10px rgba(0, 0, 0, .3), inset 10px 5px 2px -10px rgba(0, 0, 0, .2), inset -1px -3px 5px 0 rgba(250, 241, 220, .5), inset -1px -20px 10px 1px rgba(255, 255, 255, .3), inset -20px 10px 5px -20px rgba(0, 0, 0, .4), inset -20px 15px 10px -20px rgba(0, 0, 0, .4), inset 0 20px 30px -5px rgba(0, 0, 0, .3), 0 2px 1px -1px rgba(245, 227, 183, .8), -18px 11px 5px -20px rgba(0, 0, 0, .9), -17px 19px 5px -20px rgba(0, 0, 0, .6), 17px 12px 5px -20px rgba(0, 0, 0, .9), 15px 18px 5px -20px rgba(0, 0, 0, .9), -4px 30px 1px -25px rgba(0, 0, 0, .4), -4px 32px 3px -25px rgba(255, 255, 255, .1), -1px 14px 3px -5px rgba(0, 0, 0, .5), -1px 19px 3px -5px rgba(0, 0, 0, .4), 1px -1px 5px 0 rgba(50, 50, 50, .5);
    transform: scale(.5);
}