笔记本日记悬浮打开动画效果代码-html代码-BFW代码库

笔记本日记悬浮打开动画效果代码

代码语言：html

所属分类：悬停

代码描述：笔记本日记悬浮打开动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
@import url("https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap");
        body {
            background-image: linear-gradient(toright top, #c7ebe9, #b2f1e2, #a7f5cf, #adf7b2, #c1f690);
            color: black;
            font-family: "Syne Mono", monospace;
        }

        .wrapper {
            display: flex;
            justify-content: center;
            text-align: center;
            text-transform: uppercase;
            overflow: hidden;
            margin: 0 auto;
        }

        .notebook {
            height: 350px;
            width: 250px;
            margin: 112px;
            position: relative;
            transition: 0.5s ease-in-out;
            border-radius: 6px 17px 17px 6px;
            display: inline-block;
            perspective: 1200px;
        }
        .notebook:hover {
            transform: rotateZ(-20deg);
        }
        .notebook:hover .notebook-front {
            transform: rotateY(-60deg);
            z-index: 999;
            box-shadow: 3px 3px 3px black;
        }

        .notebook-front {
            height: 350px;
            width: 250px;
            background: #30C2E0;
            position: absolute;
            border-radius: 6px 17px 17px 6px;
            transition: 0.6s linear;
            transform-style: preserve-3d;
            transform-origin: left center 0px;
            z-index: 1;
        }
        .notebook-front:before {
            background: black;
            top: -1px;
            content: "";
            position: absolute;
        .........完整代码请登录后点击上方下载按钮下载查看