红包雨代码编写

个回答

丿有点丶小情绪丨: 2019-12-21 20:40:11

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>rain animation</title>
  <style>
  body, html {
  margin: 0;
  padding: 0;
}

body {
  perspective: 700px;
  background: linear-gradient(#3d748f, #b8d3e0);
  height: 100vh;
}

.rain-box {
  position: relative;
}
.rain-box .raindrop {
  position: absolute;
  background-clip: content-box;
  box-sizing: border-box;
  width: 30px;
  height: 40px;
  color: #3d588f;
  border-top: solid 0;
  border-bottom: solid 40px;
  border-left: solid 15px transparent;
  border-right: solid 15px transparent;
  border-radius: 50%;
  animation: raindrop 2s infinite ease-in-out;
  opacity: 0;
  transform: scale(0.5);
}
@keyframes raindrop {
  10% {
    opacity: 1;
  }
  90% {
    transform: scale(1.5) translate3d(0, calc(100vh - 1000%), 10px) rotateX(30deg);
  }
}

/*# sourceMappingURL=css-rain.css.map */
  </style>
</head>
<body>
<div class="rain-box">
  <!--雨滴-->
  <!--<div class="raindrop"></div>-->
</div>
<script>
  const rainCount = 200,
    rainFragment = document.createDocumentFragment(),
    clientWidth = document.documentElement.clientWidth,
    clientHeight = document.documentElement.clientHeight;
  for (let i = 0; i < rainCount; i++) {
    let rainEle = document.createElement('div');
    rainEle.className = 'raindrop';
    rainEle.style.left = ~~(Math.random() * (clientWidth - 40)) + 'px';
    rainEle.style.animationDelay = (Math.random() * rainCount / 2).toFixed(2) + 's';
    rainFragment.appendChild(rainEle)
  }

  document.querySelector('.rain-box').appendChild(rainFragment)
</script>
</body>
</html>

溯白

2019-12-03 14:08:35

<template>
<view class="content" ref="content">
<view
class="water"
v-for="item of count"
:key="item.id"
:class="getClass()"
:style="getStyle()"
>
</view>
</view>
</template>

<script>
export default{
name:"rain",
props: {
count: {
type: Number,
default: 30
},
},
data(){
return{

}
},
methods:{
getClass() {
return `hbsd-${Math.floor(Math.random() * 50 + 30)}`;
},
getStyle() {
return `left:${Math.random() * 100}%;top:${Math.random() * 30}px`;
}
}
}
</script>

<style scoped>
.content
position relative
height 100%
background-color #f2f2f2
.water
position absolute
width 16rpx
height 24rpx
background #ccc
clip-path ellipse(20% 60% at 50% 50%)
// animation drops 2s cubic-bezier(0.82, -0.01, 0.81, 0.92) infinite
for $i in 1...100
.hbsd-{$i}
animation drops ($i/20)s cubic-bezier(0.82, -0.01, 0.81, 0.92) infinite
@keyframes drops
0%{
opacity 0
}
20%{
opacity 1
}
90%{
opacity 1
}
100%{
opacity 0
transform translate3d(10px,100vh,-10px)
}
</style>
0
你是我的命i

2019-11-26 21:13:32

因为老师的scss

0