【html + css】送个你的那个她

阡小年
已于 2022-08-08 17:03:38 修改
阅读量75
点赞数
分类专栏： bilibili视频源码文章标签： css html javascript 前端
于 2022-07-07 21:02:10 首次发布
本文链接：https://blog.csdn.net/weixin_45562037/article/details/125667120
版权
bilibili视频源码专栏收录该内容
18 篇文章 0 订阅
订阅专栏
这是一个使用HTML和CSS创建的浪漫气球飘动效果，适用于520表白日。页面背景淡雅，带有粉色调的气球在屏幕上缓缓升起，营造出温馨的氛围。代码中定义了多个关键帧动画，使得气球上升轨迹各异，增加视觉趣味性。
摘要由CSDN通过智能技术生成
效果视频展示：
（html + css）送个你的那个她
全部代码（放心粘贴）：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
html {
    background: rgb(236, 208, 218,0.8);
     font-size: 1.2vh; 
}

.center {
  position: absolute;
  width: 500px;
  height: 500px;
  top: 50%;
  margin-top: 200px;
  left: 50%;
  border-radius: 20px;
  background: rgb(255, 255, 255,0.7);
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  text-align: center;
  line-height: 0.9;
  z-index: 3;
}

.center>div{
    top: 50%;
    margin-top: -100px;
    left: 50%;
    margin-left: -100px;
    position:absolute;

    font-size: 20px;
}

.balloon {
  top: 100vh;
  opacity: 0.95;
  position: absolute;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  width: 10rem;
  height: 10rem;
  background: pink;
  border-radius: 10rem 10rem 4rem 10rem;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  box-shadow: inset -0.5rem -0.5rem 5rem -0.5rem #c99c9c, 3rem 3rem 1.5rem rgba(153, 102, 102, 0.2);
  -webkit-animation: float1 10s infinite ease-out;
          animation: float1 10s infinite ease-out;
}
@-webkit-keyframes float1 {
  0% {
    -webkit-transform: rotate(40deg) translateY(0) translateX(0);
            transform: rotate(40deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: rotate(50deg) translateY(-85vh) translateX(-85vh);
            transform: rotate(50deg) translateY(-85vh) translateX(-85vh);
  }
}
@keyframes float1 {
  0% {
    -webkit-transform: rotate(40deg) translateY(0) translateX(0);
            transform: rotate(40deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: rotate(50deg) translateY(-85vh) translateX(-85vh);
            transform: rotate(50deg) translateY(-85vh) translateX(-85vh);
  }
}
@-webkit-keyframes float2 {
  0% {
    -webkit-transform: rotate(55deg) translateY(0) translateX(0);
            transform: rotate(55deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: rotate(45deg) translateY(-85vh) translateX(-85vh);
            transform: rotate(45deg) translateY(-85vh) translateX(-85vh);
  }
}
@keyframes float2 {
  0% {
    -webkit-transform: rotate(55deg) translateY(0) translateX(0);
            transform: rotate(55deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: rotate(45deg) translateY(-85vh) translateX(-85vh);
            transform: rotate(45deg) translateY(-85vh) translateX(-85vh);
  }
}
@-webkit-keyframes float3 {
  0% {
    -webkit-transform: rotate(45deg) translateY(0) translateX(0);
            transform: rotate(45deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: rotate(35deg) translateY(-85vh) translateX(-85vh);
            transform: rotate(35deg) translateY(-85vh) translateX(-85vh);
  }
}
@keyframes float3 {
  0% {
    -webkit-transform: rotate(45deg) translateY(0) translateX(0);
            transform: rotate(45deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: rotate(35deg) translateY(-85vh) translateX(-85vh);
            transform: rotate(35deg) translateY(-85vh) translateX(-85vh);
  }
}
@-webkit-keyframes floatfront1 {
  0% {
    -webkit-transform: scale(1.3) rotate(40deg) translateY(0) translateX(0);
            transform: scale(1.3) rotate(40deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: scale(1.3) rotate(50deg) translateY(-100vh) translateX(-100vh);
            transform: scale(1.3) rotate(50deg) translateY(-100vh) translateX(-100vh);
  }
}
@keyframes floatfront1 {
  0% {
    -webkit-transform: scale(1.3) rotate(40deg) translateY(0) translateX(0);
            transform: scale(1.3) rotate(40deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: scale(1.3) rotate(50deg) translateY(-100vh) translateX(-100vh);
            transform: scale(1.3) rotate(50deg) translateY(-100vh) translateX(-100vh);
  }
}
@-webkit-keyframes floatfront2 {
  0% {
    -webkit-transform: scale(1.3) rotate(55deg) translateY(0) translateX(0);
            transform: scale(1.3) rotate(55deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: scale(1.3) rotate(45deg) translateY(-100vh) translateX(-85vh);
            transform: scale(1.3) rotate(45deg) translateY(-100vh) translateX(-85vh);
  }
}
@keyframes floatfront2 {
  0% {
    -webkit-transform: scale(1.3) rotate(55deg) translateY(0) translateX(0);
            transform: scale(1.3) rotate(55deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: scale(1.3) rotate(45deg) translateY(-100vh) translateX(-85vh);
            transform: scale(1.3) rotate(45deg) translateY(-100vh) translateX(-85vh);
  }
}
@-webkit-keyframes floatfront3 {
  0% {
    -webkit-transform: scale(1.3) rotate(45deg) translateY(0) translateX(0);
            transform: scale(1.3) rotate(45deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: scale(1.3) rotate(35deg) translateY(-85vh) translateX(-100vh);
            transform: scale(1.3) rotate(35deg) translateY(-85vh) translateX(-100vh);
  }
}
@keyframes floatfront3 {
  0% {
    -webkit-transform: scale(1.3) rotate(45deg) translateY(0) translateX(0);
            transform: scale(1.3) rotate(45deg) translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: scale(1.3) rotate(35deg) translateY(-85vh) translateX(-100vh);
            transform: scale(1.3) rotate(35deg) translateY(-85vh) translateX(-100vh);
  }
}
.balloon:after {
  content: '';
  position: absolute;
  bottom: -.05rem;
  right: -.05rem;
  border-top: 0.5rem solid transparent;
  border-bottom: 0.5rem solid transparent;
  border-right: 0.9rem solid #dbbdbd;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  border-radius: 1rem;
}

.holder.back {
  position: relative;
  z-index: 2;
}
.holder.back .balloon:nth-child(1) {
  left: 50%;
  -webkit-animation: float2 9.5s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
          animation: float2 9.5s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.holder.back .balloon:nth-child(2) {
  left: 20%;
  -webkit-animation: float1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
          animation: float1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  -webkit-animation-delay: 3.2s;
          animation-delay: 3.2s;
}
.holder.back .balloon:nth-child(3) {
  left: 90%;
  -webkit-animation: float3 10.5s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
          animation: float3 10.5s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  -webkit-animation-delay: 7.7s;
          animation-delay: 7.7s;
}
.holder.back .balloon:nth-child(4) {
  left: 70%;
  -webkit-animation: float1 9s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
          animation: float1 9s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}
.holder.back .balloon:nth-child(5) {
  left: 35%;
  -webkit-animation: float2 10.2s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
          animation: float2 10.2s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  -webkit-animation-delay: 5.6s;
          animation-delay: 5.6s;
}

.holder.front {
  position: relative;
  z-index: 4;
}
.holder.front .balloon {
  box-shadow: inset -0.5rem -0.5rem 5rem -0.5rem #c99c9c, 8rem 8rem 4rem rgba(153, 102, 102, 0.2);
}
.holder.front .balloon:nth-child(1) {
  left: 80%;
  -webkit-animation: floatfront1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
          animation: floatfront1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  -webkit-animation-delay: 2.8s;
          animation-delay: 2.8s;
}
.holder.front .balloon:nth-child(2) {
  left: 35%;
  -webkit-animation: floatfront1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
          animation: floatfront1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
.holder.front .balloon:nth-child(3) {
  left: 7%;
  -webkit-animation: floatfront3 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
          animation: floatfront3 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  -webkit-animation-delay: 7.7s;
          animation-delay: 7.7s;
}
.holder.front .balloon:nth-child(4) {
  left: 46%;
  -webkit-animation: floatfront2 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
          animation: floatfront2 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  -webkit-animation-delay: 6.3s;
          animation-delay: 6.3s;
}
.holder.front .balloon:nth-child(5) {
  left: 75%;
  -webkit-animation: floatfront1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
          animation: floatfront1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
  -webkit-animation-delay: 8.9s;
          animation-delay: 8.9s;
}

.sig {
  position: fixed;
  bottom: 8px;
  right: 8px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 100;
  font-family: sans-serif;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 2px;
}

</style>
<body>
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>浪漫气球</title>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<div class="holder back">
  <div class="balloon"></div>
  <div class="balloon"></div>
  <div class="balloon"></div>
  <div class="balloon"></div>
  <div class="balloon"></div>
</div>
<div class="center">
    <div>
    <p>今天是520</p>
    <p>我想你大概猜到我的目的</p>
    <p>我对你</p>
    <p>早已蓄谋已久</p>
    <p>你是否愿意让今天</p>
    <p>成为我们共同的纪念日</p>
    </div>
</div>
<div class="holder front">
  <div class="balloon"></div>
  <div class="balloon"></div>
  <div class="balloon"></div>
  <div class="balloon"></div>
  <div class="balloon"></div>
  <div class="balloon"></div>
</div>
	</body>
</html>

</body>
</html>