给你对象写个怦然心动吧
撒花怦然心动
我们先来手动画个心吧，用图片太没心意了^ &^ ```
html结构：
<div class="container">
<div class="heart">
</div>
<div class="flower"></div>
</div>
先写一个正方形，给其绝对定位：
.container .heart {
position: absolute;
height: 100px;
width: 100px;
border: 1px solid;
}
利用伪元素::after，::before的特性，给正方形的伪元素添加样式
.container .heart::after,.container .heart::before {
content: '';
border: 1px solid red;
display: inline-block;
width: inherit;
height: inherit;
border-radius: 50%;
position: absolute;
}
此时两个伪元素是重叠的(红色圆圈)：
调整伪元素位置：
.container .heart::after {
left: -50%;
}
.container .heart::before {
top: -50%;
}
将.heart顺时针旋转45度，再把其和伪元素的背景设置为红色：
background-color: red;
transform: rotate(45deg);
终于把心画出来了，现在让心跳起来吧！利用animation我们可以这样子做：
先利用@keyframes给出每一帧的动画：
@keyframes heartbeat {
0% {
height: 60px;
width: 60px;
opacity: 0.5;
}
50% {
height: 100px;
width: 100px;
opacity: 1;
}
100% {
height: 60px;
width: 60px;
opacity: 0.5;
}
}
再给.heart添加这个动画：
animation: heartbeat 1.5s linear infinite;
以linear曲线运动方式跳动，跳动一次花的时间为1.5s，跳动infinite(无限)次。
撒花时间到：
画出来的花太丑了，用图片代替吧…
先让花旋转起来：
.container .flower {
position: absolute;
background-image: url('../image/flower.png');
background-size: cover;
width: 20px;
height: 20px;
top: 100px;
left: 100px;
animation: rotate 2s;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
接下来让每一朵花随机出现在页面并在规定的时间内淡入淡出，注意，每朵花的淡入淡出时间都不相同。
先引入jQuery：
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
写一个随机返回一个min~max区间数字的函数，我们会多次用到这个函数：
var random = function(max, min) {
return Math.floor(Math.random()*(max-min+1)+min);
};
用面向对象的方法…，写一个Flower构造函数，传三个参数，其中x为随机出现位置的left，y为随机出现的top，time为随机的淡入淡出时间：
function Flower(x, y, time) {
this.x = x;
this.y = y;
this.time = time;
this.isHas = false;
this.flowerDom = $('<div class="flower"></div>');
this.parent = $('.container');
}
在其原型上添加一个创建花的方法：
Flower.prototype.create = function() {
this.flowerDom.css({left: this.x,top: this.y});
this.flowerDom.appendTo(this.parent).hide().fadeIn(this.time).fadeOut(this.time);
};
让花随机动起来，利用定时器，让花在随机的时间内出现与消失：
function init() {
for(var i = 0; i < 20; i ++) {
setInterval(function(){
//实例化一朵花，for循环内每朵花的参数都不一样
flower = new Flower(random(900,0), random(360,0), random(800, 1800));
flower.create();
}, random(800,1800))
}
}
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>heartbeat</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
.container {
width: 1000px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -500px;
background-image: url(../image/bg.jpg);
background-size: cover;
}
.container .heart {
height: 100px;
width: 100px;
position: absolute;
top: 50%;
bottom: 50%;
left: 50%;
right: 50%;
margin-left: -50px;
margin-top: -50px;
background-color: red;
transform: rotate(45deg);
opacity: 1;
animation: heartbeat 1.5s linear infinite;
}
.container .heart::after,.container .heart::before {
content: '';
background-color: inherit;
display: inline-block;
width: inherit;
height: inherit;
border-radius: 50%;
position: absolute;
}
.container .heart::after {
left: -50%;
}
.container .heart::before {
top: -50%;
}
.container .flower {
position: absolute;
background-image: url('../image/flower.png');
background-size: cover;
width: 20px;
height: 20px;
top: 100px;
left: 100px;
animation: rotate 2s;
}
@keyframes heartbeat {
0% {
height: 60px;
width: 60px;
opacity: 0.5;
}
50% {
height: 100px;
width: 100px;
opacity: 1;
}
100% {
height: 60px;
width: 60px;
opacity: 0.5;
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="heart">
</div>
<!-- <div class="flower"></div> -->
</div>
<script>
var random = function(max, min) {
return Math.floor(Math.random()*(max-min+1)+min);
};
var flower = null;
function Flower(x, y, time) {
this.x = x;
this.y = y;
this.time = time;
this.isHas = false;
this.flowerDom = $('<div class="flower"></div>');
this.parent = $('.container');
}
Flower.prototype.create = function() {
this.flowerDom.css({left: this.x,top: this.y});
this.flowerDom.appendTo(this.parent).hide().fadeIn(this.time).fadeOut(this.time);
};
function init() {
for(var i = 0; i < 20; i ++) {
setInterval(function(){
flower = new Flower(random(900,0), random(360,0), random(800, 1800));
flower.create();
}, random(800,1800))
}
}
init();
</script>
</body>
</html>
原创文章 11
获赞 37
访问量 3365