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

最新推荐文章于 2024-06-09 00:32:55 发布

原创最新推荐文章于 2024-06-09 00:32:55 发布 · 1.7k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#js #css3

这篇文章介绍了如何使用jQuery和CSS3创建情人节爱心特效，包括旋转、缩放动画，以及结合JavaScript实现的粒子效果。通过HTML、CSS和jQuery脚本，实现了一个互动的心形元素，配合CSS3动画和粒子系统的组合，为网页增添了浪漫氛围。

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="images/loveb.png" class="heart">
                <img src="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: hidden
	z-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();