給你對象寫個怦然心動吧
撒花怦然心動
我們先來手動畫個心吧，用圖片太沒心意了^ &^ ```
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>