表白小愛心
阿新 • • 發佈：2018-09-17
bold ini ali web osi idt 中秋 ear sca
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
// 圖片可以換上本地自己的 <link rel="stylesheet" href="2.css">
<style>
body {
background: #000 url("love.jpg") no-repeat top center
}
.heart-body {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
margin: -100px 0 0 -100px;
transform: rotate(45deg);
animation: love 1s ease infinite
}
.heart-shape {
width: 200px;
height: 200px;
background: red;
box-shadow: 0 0 50px rgb(255, 0, 0)
}
/*.heart-body:before{position:absolute;top:0;left:-100px;content: "";width:200px;height:200px;background: red;border-radius: 50%}
.heart-body:after{position:absolute;top:-100px;left:0;content: "";width:200px;height:200px;background: red;border-radius: 50%;}*/
.heart-body:before, .heart-body:after {
position: absolute;
content: "";
width: 200px;
height: 200px;
background: red;
border-radius: 50%;
box-shadow: 0 0 50px rgb(255, 0, 0);
}
.heart-body:before {
top: 0;
left: -100px;
}
.heart-body:after {
top: -100px;
left: 0;
}
.heart-txt {
position: absolute;
bottom: 100px;
width: 100%;
text-align: center
}
.heart-shine {
font-size: 100px;
font-weight: bold;
color: #fff;
background: url("../images/moon.jpg");
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: moon .1s ease infinite
}
@keyframes love {
0%, 100% {
transform: scale(.9, .9) rotate(45deg)
}
/* 0% = from 開始幀*/
50% {
transform: scale(1.2, 1.2) rotate(45deg)
}
/* 100% = to 結束幀*/
}
@keyframes moon {
0%, 100% {
background-position: 0 0
}
50% {
background-position: 100% 100%
}
}
</style>
</head>
<body>
<div class="loveBox">
<!--愛心-->
<div class="heart-body">
<div class="heart-shape"></div>
</div>
<!--閃電文字-->
<div class="heart-txt">
<div class="heart-shine">中秋國慶</div>
</div>
</div>
</body>
</html>
表白小愛心