Video Animasi Tujuan Flip Love Cards dengan kod-tutorial js-php.cn

Video Animasi Tujuan Flip Love Cards dengan kod

Linda Hamilton

Lepaskan： 2025-01-17 14:32:10

asal

799 orang telah melayarinya

Flip Love Cards Purpose Animation Video with code

<!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);
}

Salin selepas log masuk

Atas ialah kandungan terperinci Video Animasi Tujuan Flip Love Cards dengan kod. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!