电子书图标点击打开书本动画效果-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: #1.........完整代码请登录后点击上方下载按钮下载查看