[css]代码库
<html>
<head>
<style>
*{margin: 0; padding: 0;}
body {
background: #333333;
}
.flower {
left: 0;
right: 0;
width: 60%;
margin: 25% auto;
position: relative;
}
.flower > div {
display: inline-block;
position: absolute;
border: solid transparent;
border-width: 0 10px 10px 10px;
border-bottom-color: #E2B6B5;
animation: bloom 5s ease-in-out infinite alternate;
}
.flower > div:nth-child(1) {
transform: rotate(-60deg);
top: -50%;
left: -25%;
animation: pulse 5s ease-in-out infinite alternate;
}
@keyframes bloom {
0% {
transform: scale(0);
transform-origin: center;
}
100% {
transform: scale(1);
transform-origin: center;
}
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(3);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="flower">
<div></div>
</div>
</body>
</html>