【爱心飘落 特效——使用 Html + CSS + JS 等实现,附 源代码 + 特效】

html,body{

height: 100%;

}

body{

overflow: hidden;

background: url(‘images/2.jpg’) no-repeat center/cover;

}

.snowfall-flakes:before,.snowfall-flakes:after{

content: ‘’;

position: absolute;

width: 10px;

height: 16px;

border-radius: 10px 10px 0 0;

background-color: red;

}

.snowfall-flakes:before{

transform: rotate(-45deg);

}

.snowfall-flakes:after{

transform: translateX(4.3px) rotate(45deg);

}

snowfall.jquery.js

(function(){var lastTime=0;var vendors=[‘webkit’,‘moz’];for(var x=0;x<vendors.length&&!window.requestAnimationFrame;++x){window.requestAnimationFrame=window[vendors[x]+‘RequestAnimationFrame’];window.cancelAnimationFrame=window[vendors[x]+‘CancelAnimationFrame’]||window[vendors[x]+‘CancelRequestAnimationFrame’];}

if(!window.requestAnimationFrame)

window.requestAnimationFrame=function(callback,element){var currTime=new Date().getTime();var timeToCall=Math.max(0,16-(currTime-lastTime));var id=window.setTimeout(function(){callback(currTime+timeToCall);},timeToCall);lastTime=currTime+timeToCall;return id;};if(!window.cancelAnimationFrame)

window.cancelAnimationFrame=function(id){clearTimeout(id);};}());(function(KaTeX parse error: Expected '}', got 'EOF' at end of input: ){ .snowfall=function(element,options){var defaults={flakeCount:35,flakeColor:‘transparent’,flakePosition:‘absolute’,flakeIndex:999999,minSize:1,maxSize:2,minSpeed:1,maxSpeed:5,round:false,shadow:false,collection:false,collectionHeight:40,deviceorientation:false},options= . e x t e n d ( d e f a u l t s , o p t i o n s ) , r a n d o m = f u n c t i o n r a n d o m ( m i n , m a x ) r e t u r n M a t h . r o u n d ( m i n + M a t h . r a n d o m ( ) ∗ ( m a x − m i n ) ) ; ; .extend(defaults,options),random=function random(min,max){return Math.round(min+Math.random()*(max-min));}; .extend(

  • 7
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值