ホームページ >ウェブフロントエンド >jsチュートリアル >ラブカードを反転する目的のアニメーションビデオとコード
ラブカードを反転する目的のアニメーションビデオとコード
- Linda Hamiltonオリジナル
- 2025-01-17 14:32:10800ブラウズ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Love</title>
</head>
<body>
<h4><a href="" target="_blank">
<pre class="brush:php;toolbar:false">@import url("https://fonts.googleapis.com/css?family=Roboto+Mono");
* {
box-sizing: border-box;
font-weight: normal;
}
body {
color: #6c6b6b;
background: #222;
text-align: center;
font-family: "Roboto Mono";
padding: 1em;
}
h1 {
font-size: 2.2em;
}
.flip {
position: relative;
margin: 5px;
border-width: 2px white;
border: 3px white;
}
.flip > .front,
.flip > .back {
display: block;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-duration: 0.5s;
transition-property: transform, opacity;
}
.flip > .front {
transform: rotateY(0deg);
}
.flip > .back {
position: absolute;
opacity: 0;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
transform: rotateY(-180deg);
}
.flip:hover > .front {
transform: rotateY(180deg);
}
.flip:hover > .back {
opacity: 1;
transform: rotateY(0deg);
}
.flip.flip-vertical > .back {
transform: rotateX(-180deg);
}
.flip.flip-vertical:hover > .front {
transform: rotateX(180deg);
}
.flip.flip-vertical:hover > .back {
transform: rotateX(0deg);
}
.flip {
position: relative;
display: inline-block;
margin-right: 2px;
margin-bottom: 1em;
width: 400px;
}
.flip > .front,
.flip > .back {
display: block;
color: white;
font-size: large;
width: inherit;
background-size: cover !important;
background-position: center !important;
height: 220px;
padding: 1em 2em;
background: #313131;
border-radius: 10px;
}
.flip > .front p,
.flip > .back p {
justify-items: center;
justify-content: center;
font-size: large;
line-height: 160%;
color: #999;
}
.text-shadow {
text-shadow: 1px 1px rgba(0, 0, 0, 0.04), 2px 2px rgba(0, 0, 0, 0.04), 3px 3px rgba(0, 0, 0, 0.04), 4px 4px rgba(0, 0, 0, 0.04), 5px 5px rgba(0, 0, 0, 0.04), 6px 6px rgba(0, 0, 0, 0.04), 7px 7px rgba(0, 0, 0, 0.04), 8px 8px rgba(0, 0, 0, 0.04), 9px 9px rgba(0, 0, 0, 0.04), 10px 10px rgba(0, 0, 0, 0.04);
}
以上がラブカードを反転する目的のアニメーションビデオとコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。