紅包雨代碼編寫
為什么我和老師寫的一樣，運行出來什么也么沒有，
慕粉7103874
2019-11-26
3 回答
舉報
0/150
提交
取消
為什么我和老師寫的一樣，運行出來什么也么沒有，
2019-11-26
舉報
2019-12-21
<!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
<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>
2019-11-26
因為老師的scss