<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function createStar() {
let waterDiv = document.createElement('div');
waterDiv.className = 'waterDiv';
let water = document.createElement('div');
water.className = 'water';
let xj = document.createElement('div');
xj.className = 'xj';
let d1 = document.createElement('div');
d1.className = 'd1';
water.appendChild(xj);
water.appendChild(d1);
waterDiv.appendChild(water);
let startX = Math.floor(Math.random() * (window.innerWidth-80) ); // 随机起始位置的X坐标
let startY = Math.floor(Math.random() * (window.innerHeight-80) ); // 随机起始位置的Y坐标
let endX = Math.floor(Math.random() * (window.innerWidth-80) ); // 随机结束位置的X坐标
let duration = Math.floor(Math.random() * 3000 + 1000); // 随机动画时长(1000毫秒到4000毫秒之间)
let jsWaterDiv = $(waterDiv);
// 设置初始位置
jsWaterDiv.css({
left: startX + 'px',
top: startY + 'px',
opacity: 1
});
//决定水滴的上下方向
let f = (window.innerHeight-startY-80)+"px" ;
if ( startY >= (window.innerWidth*0.8) ) {
//生成在了偏下的地方就向上走
f = (startY+80)+"px";
}
// 定义动画
jsWaterDiv.animate({
left: endX + 'px',
top: f,
opacity: 0
}, duration, function() {
// 动画完成后移除流星
jsWaterDiv.remove();
});
// 将水滴添加到页面中
$('body').append(jsWaterDiv);
}
// 每隔半秒创建一颗流星
setInterval(createStar, 1000);
</script>
<style>
* {
margin: 0;
padding: 0;
}
/*最外侧盒子提供大小和其他位置顶自定义需求*/
.waterDiv {
width: 80px;
height: 80px;
position: absolute;
}
/*第二层盒子提供需要的背景色以及形状*/
.water {
width: 100%;
height: 100%;
background-color: #00a8ff;
border-radius: 61% 39% 57% 43% / 46% 67% 33% 54%;
animation: a 4s linear infinite alternate;
position: absolute;
}
/*内侧盒子负责水滴的细节,形状同步*/
.xj {
width: 100%;
height: 100%;
border-radius: 61% 39% 57% 43% / 46% 67% 33% 54%;
box-shadow: inset 10px 20px 30px rgba(0, 0, 0, 0.5),
10px 10px 20px rgba(0, 0, 0, 0.3),
15px 15px 30px rgba(0, 0, 0, 0.05),
inset -10px -20px 30px rgba(255, 255, 255, 0.8);
animation: a 4s linear infinite alternate;
position: absolute;
}
/*内部的白点*/
.d1 {
width: 10px;
height: 10px;
position: absolute;
top: 20px;
left: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 46% 54% 36% 64% / 46% 43% 57% 54%;
animation: b 2s linear infinite alternate;
}
/*整个水滴形状的动画*/
@keyframes a {
25% {
border-radius: 58% 42% 59% 41% / 52% 46% 54% 48%;
}
50% {
border-radius: 46% 54% 40% 60% / 52% 33% 67% 48%;
}
75% {
border-radius: 65% 35% 71% 29% / 31% 60% 40% 69%;
}
100% {
border-radius: 60% 40% 43% 57% / 45% 51% 49% 55%;
}
}
/*水滴中白色小点的动画*/
@keyframes b {
25% {
top: 21px;
left: 19px;
}
50% {
top: 22px;
left: 18.5px;
}
100% {
top: 23px;
left: 18px;
}
}
</style>
</body>
</html>
css+js做随意移动的水滴背景
猜你喜欢
转载自blog.csdn.net/dudadudadd/article/details/131687204
今日推荐
周排行