翻牌
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FlipingCard</title>
</head>
<style type="text/css">
body{
height: 100vh;
display: flex;
justify-content: space-evenly;
align-items: center;
font-size: 2rem;
font-family: Arial, Helvetica, sans-serif;
background-image: radial-gradient( circle farthest-corner at 12.3% 19.3%, rgba(85,88,218,1) 0%, rgba(95,209,249,1) 100.2% );
}
.card-container{
width: 300px;
height: 400px;
position: relative;
perspective: 1000px;
}
.cover,.back{
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
transition: transform .2s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
border-radius: .4rem;
box-shadow: 0 .2rem .5rem rgba(0,0,0,.18);
color: #fff;
text-shadow: 0 .2rem .5rem rgba(0,0,0,.18);
}
.cover{
background-color: blue;
transform: rotateY(0deg);
background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(0,149,218,0.85) 9.9%, rgba(56,80,114,1) 100.3% );
}
.card-container:hover .cover{
transform: rotateY(180deg);
}
.back{
background-color: yellow;
transform: rotateY(-180deg);
background-image: radial-gradient( circle farthest-corner at 50.1% 52.3%, rgba(255,231,98,1) 58.2%, rgba(251,212,0,1) 90.1% );
}
.card-container:hover .back{
transform: rotateY(0deg);
}
</style>
<body>
<div class="card-container">
<div class="cover">
COVER
</div>
<div class="back">
BACK
</div>
</div>
<div class="card-container">
<div class="cover">
COVER
</div>
<div class="back">
BACK
</div>
</div>
<div class="card-container">
<div class="cover">
COVER
</div>
<div class="back">
BACK
</div>
</div>
</body>
</html>
折疊按鈕
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
width: 100px;
height: 100px;
background-color: #000;
}
#toggler {
display: none;
}
.hamburger-container {
display: block;
width: 20px;
height: 20px;
position: relative;
top: 16px
}
.hamburger-container span {
display: block;
height: 1px;
background-color: #fff;
position: relative;
transition: transform .3s ease-in-out, top .3s ease-in-out .3s;
top: 0;
}
.hamburger-container span:nth-child(2) {
margin-top: 7px;
}
#toggler:checked+label .hamburger-container span:nth-child(1) {
transform: rotate(45deg);
top: 4px;
transition: top .3s ease-in-out, transform .3s ease-in-out .3s;
}
#toggler:checked+label .hamburger-container span:nth-child(2) {
transform: rotate(-45deg);
top: -4px;
transition: top .3s ease-in-out, transform .3s ease-in-out .3s;
}
header {
background-color: #000;
height: 44px;
padding: 0 18px;
}
.nav-items {
background-color: darkgray;
width: 100%;
height: 100vh;
position: absolute;
top: 44px;
left: 0;
transform: scaleY(0);
transition: transform .3s ease-in-out .3s, opacity .3s ease-in-out .3s;
transform-origin: 50% 0;
opacity: 0;
}
#toggler:checked~.nav-items {
transform: scaleY(1);
opacity: 1;
}
body {
padding: 0;
margin: 0;
}
ul {
margin-top: 1em;
}
ul li {
color: #fff;
}
</style>
<title>HamburgerMenu</title>
</head>
<body>
<header>
<input type="checkbox" id="toggler">
<label for="toggler">
<div class="hamburger-container">
<span></span>
<span></span>
</div>
</label>
<div class="nav-items">
<ul>
<li>Home</li>
<li>iphone</li>
<li>iPad</li>
<li>Mac</li>
</ul>
</div>
</header>
</body>
</html>
