<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS构建很有趣的雨伞撑开和收拢动画</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(skyblue, lightblue);
}
:root {
--font-size: 6px;
}
.toggle {
position: absolute;
filter: opacity(0);
width: 25em;
height: 26em;
font-size: var(--font-size);
cursor: pointer;
z-index: 2;
}
.umbrella *::before,
.umbrella *::after {
content: '';
position: absolute;
}
.umbrella,
.umbrella .canopy,
.umbrella .canopy::after {
transition: 0.3s cubic-bezier(0.5, -0.25, 0.5, 1.25);
}
.umbrella {
position: relative;
width: 25em;
height: 26em;
font-size: var(--font-size);
transform: rotate(-30deg);
}
.toggle:checked ~ .umbrella {
transform: rotate(0deg);
}
.umbrella .canopy {
position: absolute;
width: inherit;
height: 5.5em;
top: 2.5em;
transform-origin: top;
transform: scale(0.08, 4);
}
.toggle:checked ~ .umbrella .canopy {
transform: scale(1, 1);
}
.umbrella .canopy::before {
width: inherit;
height: 12.5em;
background: rgb(100, 100, 100);
border-radius: 12.5em 12.5em 0 0;
transform: scaleY(0.4);
top: -4em;
}
.umbrella .canopy::after {
width: inherit;
height: 1.5em;
background-color: #333;
top: 4em;
border-radius: 50%;
transform: scaleY(0);
}
.toggle:checked ~ .umbrella .canopy::after {
transform: scaleY(1);
}
.umbrella .shaft {
position: absolute;
width: 0.8em;
height: 18em;
background-color: rgba(100, 100, 100, 0.7);
top: 5.5em;
left: calc((100% - 0.8em) / 2);
}
.umbrella .shaft::before {
width: 6em;
height: 3em;
background-color: rgba(100, 100, 100, 0.7);
left: calc((100% - 6em) / 2);
top: -5.5em;
border-radius: 6em 6em 0 0;
transform: scaleX(0.1);
}
.umbrella .shaft::after {
box-sizing: border-box;
width: 4em;
height: 2.5em;
border: 1em solid #333;
top: 100%;
left: calc(50% - 4em + 1em / 2);
border-radius: 0 0 2.5em 2.5em;
border-top: none;
}
</style>
</head>
<body>
<input type="checkbox" class="toggle">
<figure class="umbrella">
<div class="canopy"></div>
<div class="shaft"></div>
</figure>
</body>
</html>
