一顆跳動的心（css3）
阿新 • • 發佈：2017-12-02
margin inf text ins posit sca before ati radi
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>一顆跳動的心</title>
<style type="text/css">
*{
margin:0 ;
padding:0;
}
body{
background:#1a1c24;
}
/* 盒子 */
#heart,#echo{
position:fixed;
width: 300px;
height: 300px;
top: 100px;
left: 250px;
text-align: center;
-webkit-transform: scale(0.95);
-moz-transform: scale(0.95);
-ms-transform: scale(0.95);
-o-transform: scale(0.95);
transform: scale(0.95);
}
#heart{ z-index:8; }
#echo{ z-index:7; }
/* 心 初始化 */
#heart::before,#heart::after,#echo::before, #echo::after{
content:"";
position: absolute;
top: 40px;
width: 150px;
height: 240px;
background: #c66c75;
border-radius: 150px 150px 0 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart::before,#echo::before{
left: 150px;
}
#heart::after,#echo::after{
left:0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
/* 一些小樣式 */
#heart::after {
box-shadow:
inset -6px -6px 0px 6px rgba(255,255,255,0.1);
}
#heart::before {
box-shadow:
inset 6px 6px 0px 6px rgba(255,255,255,0.1);
}
#heart i::after{
content:"認真你就輸了丶";
position: absolute;
top:35%;
left:15%;
color: rgba(255,255,255,0.8);
font-weight: 100;
font-size: 30px;
text-shadow: -1px -1px 0px rgba(0,0,0,0.2);
z-index:10;
}
/* 心要動起來 */
@keyframes heartbeat {
0% { transform: scale(0.95);}
100% { transform: scale(0.95);}
50% { transform: scale(1.00);}
}
@-webkit-keyframes heartbeat {
0% { -webkit-transform: scale(0.95);}
100% { -webkit-transform: scale(0.95);}
50% { -webkit-transform: scale(1.00);}
}
@keyframes echo {
0%{
opacity:0.1;
transform: scale(1);
}
100%{
opacity:0;
transform: scale(1.4);
}
}
@-webkit-keyframes echo {
0%{
opacity: 0.1;
-webkit-transform: scale(1);
transform: scale(1);
}
100%{
opacity: 0;
-webkit-transform: scale(1.4);
transform: scale(1.4);
}
}
#heart, #echo{
-webkit-animation-duration: 2000ms;
animation-duration: 2000ms;
-webkit-animation-timing-function:
cubic-bezier(0, 0, 0, 1.74);
animation-timing-function:
cubic-bezier(0, 0, 0, 1.74);
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-play-state: running;
animation-play-state: running;
}
#heart,#echo{
-webkit-animation-name: heartbeat;
animation-name: heartbeat;
}
#echo{
-webkit-animation-name: echo;
animation-name: echo;
}
</style>
</head>
<body>
<div id="heart">
<i></i>
</div>
<div id="echo">
</div>
</body>
</html> 更多資料，進群下載哦~WEB前端學習交流群21 598399936
|
一顆跳動的心（css3）