css+js实现书架上鼠标悬浮抽出书本动画效果代码-html代码-BFW代码库

css+js实现书架上鼠标悬浮抽出书本动画效果代码

代码语言：html

所属分类：悬停

代码描述：css+js实现书架上鼠标悬浮抽出书本动画效果代码

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bookshelf.css">
    <style>
        html,*{font-family:'Inter';box-sizing:border-box}body{background-color:#222;line-height:1.6}h1,h2{color:#fff}.lead{font-size:1.5rem;font-weight:300;color:#fff;margin:3rem auto}.container{margin:150px auto;max-width:960px}
    </style>
</head>

<body>
    <div class="container">
        <div class="bookshelf">
            <!-- Add Books To The Bookshelf -->
            <div class="book"><span id="ezoic-pub-ad-placeholder-141" class="ezoic-adpicker-ad"></span>
                <div class="side spine"><span class="spine-title">Book Title </span><span class="spine-author">PG </span></div>
                <div class="side top"></div>
                <div class="side cover"></div>
            </div>
            <div class="book">
                <div class="side spine"><span class="spine-title">Book Title </span><span class="spine-author">PG </span></div>
                <div class="side top"></div>
                <div class="side cover"></div>
            </div>
            <div class="book">
                <div class="side spine"><span class="spine-title">Book Title </span><span class="spine-author">PG </span></div>
                <div class="side top"></div>
                <div class="side cover"></div>
            </div>
            <div class="book">
                <div class="side spine"><span class="spine-title">Book Title </span><span class="spine-author">PG </span></div>
                <div class="side top"></div>
                <div class="side cover"></div>
            </div>
            <div class="book">
                <div class="side spine"><span class="spine-title">Book Title </span><span class="spine-author">PG </span></div>
                <div class="side top"></div>
                <div class="side cover"></div>
            </div>
            <div class="book">
                <div class="side spine"><span class="spine-title">Book Title </span><span class="spine-author">PG </span></div>
                <div class="side top"></div>
                <div class="side cover"></div>
            </div>
            <div class="book">
                <div class="side spine"><span class="spine-title">Book Title </span><span class="spine-author">PG </span></div>
                &.........完整代码请登录后点击上方下载按钮下载查看