情人节表白专用代码，希望你成功

html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery+CSS3情人节爱心特效 - PHP中文网</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><link type="text/css" rel="stylesheet" href="css/qrj.css" /></head>
<body>
<center>
<!-- 正文 -->
<div class="view-top"><div class="heart-vt"><div id="valentine"><div class="shake"><div class="rope"></div><div class="heart-wrap"><img src="data:images/loveb.png" class="heart"><img src="data:images/loves.png" class="beat"></div></div><div class="tiny"></div><div class="close">&times;</div></div></div></div><!-- 全局通用组件 -->
<script src="js/jquery.min.js"></script>
<!--animation.js-->
<script src="js/qrj.js"></script>
</center></body>
</html>

css3样式代码

@charset "utf-8";.clearfix:after {visibility: hidden;content: ".";display: block;height: 0;clear: both
}.clearfix {zoom: 1
}.heart-vt{left: 50%;height: 100%;position: absolute
}.view-top {width:400px;height: 420px;position: relative;background: #ffd1d6;overflow: hidden
}.heart-vt{width: 400px;top: 0;margin-left: -200px;overflow: hiddenz-index: 3
}#valentine,#valentine .shake {height: 0;top: 0;position: absolute
}#valentine {display: none;z-index: 100;width: 400px;left: 0;left: 145px\9;*left: 145px;_left: 145px
}@keyframes shake {from {transform: rotate(15deg)}to {transform: rotate(-15deg)}
}@keyframes shake-reverse {from {transform: rotate(-15deg)}to {transform: rotate(15deg)}
}#valentine .shake {width: 240px;z-index: 20;left: 100px;animation-name: shake;animation-duration: 2.5s;animation-iteration-count: infinite;animation-timing-function: cubic-bezier(.6,0,.3,1);animation-direction: alternate;transform-origin: top center
}#valentine .shake .rope {position: absolute;width: 2px;left: 105px;top: -10px;background-color: #FF2128
}#valentine .shake .heart-wrap {position: absolute;width: 235px;height: 225px
}#valentine .heart-wrap .heart {display: block;position: relative;width: 235px;height: 225px
}@keyframes beat {0% {transform: scale(0);opacity: 1}40% {opacity: .8}80% {transform: scale(1);opacity: .5}100% {transform: scale(1);opacity: 0}
}#valentine .heart-wrap .beat {position: absolute;top: 25px;left: 130px;animation-name: beat;animation-duration: 1.6s;animation-iteration-count: infinite;animation-timing-function: ease-out;transform-origin: bottom center
}#valentine .tiny {position: relative;width: 0;height: 0;top: 0;left: 200px;z-index: 1
}#valentine .close,#valentine .tiny img {position: absolute
}#valentine .close {display: none;top: 260px;right: -20px;width: 36px;height: 36px;background: #888;border-radius: 50%;text-align: center;line-height: 36px;color: #FFF;font-size: 32px;font-family: 'Times New Roman';cursor: pointer;text-decoration: none
}#valentine .close:hover {background: #666
}

function TinyHeart(t, e, s) {this.container = s,this.init(t, e)
}
var px = function(t) {return t ? Math.floor(t) + "px": 0
},
getRadian = function(t) {var e = window.getComputedStyle(t),s = e.getPropertyValue("transform");if (!s.match("matrix")) return 0;var a = s.match(/-?0(\.[0-9]*[1-9])?/gi).map(function(t) {return parseFloat(t, 10)});return - Math.asin(a[1])
},
random = function(t, e) {return t && "number" == typeof t.length ? t[Math.floor(Math.random() * t.length)] : ("number" != typeof e && (e = t || 1, t = 0), t + Math.random() * (e - t))
};
TinyHeart.STYLES = ["t01dc2e861029c8a8ca", "t016cc24a48997d651a", "t01dd2a63c80cbdbc30"],
TinyHeart.prototype = {init: function(t, e) {this.alive = !0,this.scale = random(.3, .7),this.opacity = random(50, 70) / 100,this.style = random(TinyHeart.STYLES);var s = random(2 * Math.PI);this.x = t + 80 * Math.sin(s) - 48 * this.scale / 2,this.y = e + 80 * Math.cos(s) - 42 * this.scale / 2,this.theta = random(2 * Math.PI),this.drag = random(.9, .99),this.wander = random(.5, 2),this.force = random(.1, .4),this.vx = Math.sin(this.theta) * this.force,this.vy = Math.cos(this.theta) * this.force,this.draw()},move: function() {this.x += this.vx,this.y += this.vy,this.vx *= this.drag,this.vy *= this.drag,this.theta += random( - .5, .5) * this.wander,this.vx += .1 * Math.sin(this.theta),this.vy += .1 * Math.cos(this.theta),this.scale *= .995,this.opacity *= .96,this.alive = this.opacity > .1,this.draw()},draw: function() {var t = this.img;t || (t = document.createElement("img"), t.src = "http://p4.qhimg.com/" + this.style + ".png", this.container.appendChild(t), this.img = t),t.style.left = px(this.x),t.style.top = px(this.y),t.style.width = px(48 * this.scale),t.style.height = px(42 * this.scale),t.style.opacity = this.opacity},destory: function() {this.img && this.container.removeChild(this.img)}
};
var shakes = {MAX_PARTICLES: 500,pool: [],start: function(t, e, s) {shakes.ropeH = t,shakes.container = e,shakes.timer = setInterval(function() {shakes.spawn(getRadian(s)),shakes.update()},50)},spawn: function(t) {if (! (shakes.pool.length >= shakes.MAX_PARTICLES)) {var e = Math.sin(t) * (shakes.ropeH + 40),s = Math.cos(t) * (shakes.ropeH + 40) + 20;heart = new TinyHeart(e, s, shakes.container),shakes.pool.push(heart)}},update: function() {var t, e;for (t = shakes.pool.length - 1; t >= 0; t--) e = shakes.pool[t],e.alive ? e.move() : (e.destory(), shakes.pool.splice(t, 1))},stop: function() {clearInterval(shakes.timer),shakes.pool.forEach(function(t) {t.destory()}),shakes.pool = []}
},
init = function() {var t = 180,e = document.querySelector("#valentine"),s = e.querySelector(".tiny"),a = e.querySelector(".shake"),i = function() {e.querySelector(".close").addEventListener("click",function() {shakes.stop(),e.style.display = "none"})};shakes.start(t, s, a),a.querySelector(".rope").style.height = t + "px",a.querySelector(".heart-wrap").style.top = t - 60 + "px",e.style.display = "block",i()
};
init();

情人节表白专用代码，希望你成功相关推荐

Python情人节表白女神代码(修订版)
Python情人节表白女神代码(修订版) 引言:又是一年一度的情人节来临之际,最近后台私信不断,槽点:20年初写的表白女神代码无法调试出结果,临时加更本篇内容(对每一行进行了注释解析,自定义妥妥保姆级 ...
情人节表白专用小系统
两位主人公这篇文章以两位主人公来进行秀恩爱,敬醋虽好,可不要贪杯哦~这两位主人公可以扮演面试官和面试者的身份,也可以扮演,媒婆和小伙的身份,还可以扮演男女朋友的身份,今天的角色是男女朋友的身份,男主 ...
程序猿像妹子表白专用代码
点击下载源码转载于:https://www.cnblogs.com/yangykaifa/p/6709058.html
七夕情人节表白网站代码 3D流星雨旋转相册程序员专属情人节表白网站
❤ 精彩专栏推荐
程序员像妹子表白专用代码
点击下载源代码
用html制作表白网站制作超炫酷的七夕情人节表白网页代码
❤ 精彩专栏推荐
HTML+CSS+JS520告白表白模板在线制作(七夕情人节表白网页代码)
❤ 精彩专栏推荐
七夕情人节表白网页代码HTML 教你如何制作浪漫的表白网站
❤ 精彩专栏推荐
表白专用代码拿走不谢
%数学之心 figure; clc; x=-2:0.01:2; y=sqrt(2*sqrt(x.^2)-x.^2); z=asin(abs(x)-1)-pi./2; plot(x,y); grid o ...

情人节表白专用代码，希望你成功

情人节表白专用代码，希望你成功相关推荐

最新文章

热门文章