首先看效果图 啦啦啦~~·
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css draw</title>
<style type="text/css">
html,body{
background: gray;
}
#heart{
width: 100px;
height: 90px;
position: fixed;
top: 30%;
left: 44%;
-webkit-animation: pound 1s infinite;
-ms-animation: pound 1s infinite;
-moz-animation: pound 1s infinite;
-o-animation: pound 1s infinite;
animation: pound 1s infinite;
}
#heart:before,#heart:after{
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
border-radius: 50px 50px 0 0;
-webkit-border-radius: 50px 50px 0 0;
-ms-border-radius: 50px 50px 0 0;
-moz-border-radius: 50px 50px 0 0;
-o-border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
}
#heart:after{
left: 0px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
}
@keyframes pound {
from { transform: none; }
30% { transform: scale(1.2);}
50% { transform: scale(1.6);}
70% { transform: scale(1.2); }
to { transform: none;}
}
#yinyang{
width: 96px;
height: 48px;
background: black;
border-color: white;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: fixed;
top: 60%;
left: 44%;
}
#yinyang:before,#yinyang:after{
content: "";
position: absolute;
top: 50%;
left: 0;
width: 12px;
height: 12px;
background: black;
border: 18px solid white;
border-radius: 100%;
}
#yinyang:after{
left: 50%;
background: white;
border: 18px solid black;
border-radius:100%;
}
</style>
</head>
<body>
<div id="heart"></div>
<div id="yinyang"></div>
</body>
</html>