红包雨代码编写
为什么我和老师写的一样，运行出来什么也么没有，
慕粉7103874
2019-11-26
3 回答
<!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>
<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/150
提交
取消
