电子书图标点击打开书本动画效果-html代码-BFW代码库

电子书图标点击打开书本动画效果

代码语言：html

所属分类：动画

代码描述：纯css实现电子书图标点击打开书本动画效果雷克逊收音机效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
 width: 100vw;
 height: 100vh;
 overflow: hidden;
 display: flex;
 align-items: center;
 justify-content: center;
 background: black;
}

*,
*::before,
*::after {
 box-sizing: border-box;
}

.book {
 width: 200px;
 height: 200px;
 cursor: pointer;
 border-radius: 20px;
 background: white;
 padding: 0;
 margin: 0;
 border: none;
 transform-style: preserve-3d;
 transition: all 0.5s ease-out;
 color: transparent;
}

.book .text {
 overflow: hidden;
 width: 200px;
 height: 160px;
 padding: 0 15px 20px 15px;
 text-align: justify;
 line-height: 1.2em;
}

.book .text h1,
.book .text h2 {
 text-align: center;
}

.book::before {
 content: "";
 top: 0;
 display: block;
 position: absolute;
 border-radius: 20px;
 width: 200px;
 height: 200px;
 background: #1abc9c;
 box-shadow: 50px 0 10px 0 inset #05a070;
 transition: all 0.5s ease-out;
 transform-origin: 0 50%;
}

.book::after {
 content: "";
 display: block;
 position: absolute;
 width: 200px;
 height: 100px;
 border: 15px solid #05a070;
 border-right: 10px solid black;
 border-top: none;
 border-radius: 30px/50%;
 background: repeating-linear-gradient(
  to bottom,
  white 0,
  white 2px,
  #bdc3c7 2px,
  #bdc3c7 4px,
  white 4px
 );
 top: 140px;
 z-index: -1;
 opacity: 0;
 animation: closed 0.5s ease-out forwards;
}

@keyframes closed {
 70% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}

.book.open {
 height: 240px;
 border-bottom: 5px solid #05a070;
 border-right: 5px solid #05a070;
 border-top: 5px solid #05a070;
 border-radius: 0;
 color: black;
}

.book.open::before {
 transform: rotatey(-160deg) translatex(-20px);
 background: white;
 box-shadow: 50px 0 10px 0 inset lightgray;
 height: 235px;
 border-bottom: 5px solid #05a070;
 border-right: 5px solid #05a070;
 border-top: 5px solid #05a070;
 border-radius: 0;
 content: "...AAM AM";
 font-weight: bold;
 font-size: 1.3em;
 padding-top: 85px;
}

@keyframes opened {
 70% {
  opacity: 0;
 }
 100% {
  opacity: 1;
  border: none;
  height: 40px;
  width: 360px;
  border-radius: 0;
  transform: rotatex(60deg) translatey(120px) translatex(-165px);
  background: linear-gradient(
    to right,
    transparent 46%,
    #bdc3c7 47px,
    #bdc3c7 48px,
    transparent 49%
   ),
   repeating-linear-gradient(
    to bottom,
    white 0,
    white 2px,
    #bdc3c7 2px,
    #bdc3c7 4px,
    white 4px
   );
 }
}

.book.open::after {
 animation: opened 0.5s ease-out forwards;
}

.book.expanded {
 height: 95vh;
 width: 50vw;
 transform: translateX(45%);
}

.book.expanded::before {
 height: 94vh;
 width: 50vw;
 font-size: 3.5.........完整代码请登录后点击上方下载按钮下载查看