使用CSS3实现的卡通动画电子书

Favorite Book Character

CSS3, book

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2051
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(https://fonts.googleapis.com/css?family=NTR|Roboto+Slab:400,300|Gravitas+One);
body {
    background-color: rgba(91, 242, 36, 0.5);
    color: rgba(46, 124, 17, 0.5);
    font-family: sans-serif;
}
h1 {
    text-align: center;
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    font-size: 42px;
}
h2 {
    text-align: center;
    text-transform: uppercase;
    font-size: small;
    letter-spacing: 4px;
    font-family: 'NTR', sans-serif;
}
hr {
    width: 25%;
    height: 2px;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(46, 124, 17, 0.5);
    border: 0 none;
}
.number {
    text-align: center;
    text-transform: uppercase;
    font-size: 42px;
    font-family: 'Gravitas One', serif;
}
#book {
    height: 450px;
    width: 50%;
    position: relative;
    margin: 0 auto;
    margin-top: 100px;
    background-color: #fff;
    display: flex;
}
.booktitle {
    font-family: 'NTR', serif;
    color: #757576;
    font-size: 2em;
    line-height: 80px;
}
.textpage-1 {
    width: 30%;
    position: absolute;
    height: 100%;
    background-color: ;
    float: left;
    margin-top: 5%;
    color: rgb(35, 91, 244);
    text-align: center;
    padding: 50px;
}
.textpage-2 {
    width: 3%;
    height: 100%;
    position: relative;
    background-color: rgb(246, 246, 237);
    float: left;
    margin-left: 0px;
    text-align: center;
}
.textpage-3 {
    width: 3%;
    height: 100%;
    position: relative;
    background-color: rgb(236, 236, 217);
    float: left;
    margin-left: 0px;
    text-align: center;
}
.picpage-1 {
    margin-left: 495px;
    width: 50%;
    height: 100%;
    position: absolute;
    background-color: rgb(239, 193, 242);
    clear: both;
}
.picpage-2 {
    margin-left: 0px;
    width: 3%;
    height: 100%;
    position: relative;
    background-color: rgb(236, 236, 217);
    float: right;
}
.picpage-3 {
    margin-left: 0px;
    width: 3%;
    height: 100%;
    position: relative;
    background-color: rgb(246, 246, 237);
    float: right;
}
.linespace {
    width: .5%;
    margin: 0 auto;
    background-color: rgb(246, 246, 237);
    position: relative;
    margin-left: 45%;
    clear: both;
}
.illustration {
    background-color: rgba(255, 255, 255, 0.6);
    width: 30%;
    position: relative;
    z-index: 2;
    margin: 0 auto;
    text-align: center;
    float: right;
    clear: both;
    padding: 30px;
    overflow: hidden;
}
#owlcat {
    width: 130%;
    height: auto;
    margin: 0 auto;
    margin-left: -40px;
    position: absolute;
    animation: waterbob 5s ease-in-out 1s infinite alternate;
}
#owlcatwater-1 {
    margin-top: 280px;
    position: relative;
    clear: both;
    animation: watercrash1 5s linear 1s infinite alternate;
}
#owlcatwater-2 {
    position: relative;
    clear: both;
    animation: watercrash2 4s linear 1s infinite alternate;
}
@keyframes watercrash1 {
    0% {
        left: 0px;
        top: -20px;
    }
    50% {
        left: 50px;
        top: -20px;
    }
    100% {
        left: 0px;
        top: -20px;
    }
}
@keyframes watercrash2 {
    0% {
        left: -30px;
        top: -90px;
    }
    25% {
        left: -20px;
        top: -90px;
    }
    50% {
        left: 0px;
        top: -90px;
    }
    75% {
        left: 20px;
        top: -90px;
    }
    100% {
        left: 30px;
        top: -90px;
    }
}
@keyframes waterbob {
    0% {
        left: 15px;
        top: 20px;
    }
    25% {
        left: 5px;
        top: 0px;
    }
    50% {
        left: 15px;
        top: 20px;
    }
    75% {
        left: 5px;
        top: 0px;
    }
    100% {
        left: 15px;
        top: 20px;
    }
}

HTML

<div class="textpage-3"></div>
    <div class="textpage-2"></div>
    <div class="textpage-1">
        <div class="booktitle">The Owl
            <br><span style="font-family: 'Gravitas One', serif; font-size: 2em; color: rgba(72, 155, 181, 0.5);">&</span>
            <br> The Pussycat</div>
    </div>
    <div class="linespace">

</div>
    <div class="illustration">
        <svg id="owlcat" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 350 396.67">
            <defs>
                <style>
                    .cls-1,
                    .cls-3,
                    .cls-7,
                    .cls-9 {
                        fill: #fff;
                    }
                    .cls-1,
                    .cls-4,
                    .cls-5,
                    .cls-6,
                    .cls-7,
                    .cls-9 {
                        stroke: #757576;
                    }
                    .cls-1,
                    .cls-4,
                    .cls-6,
                    .cls-9 {
                        stroke-miterlimit: 10;
                    }
                    .cls-2 {
                        fill: #fbb040;
                        opacity: 0.7;
                    }
                    .cls-4,
                    .cls-5,
                    .cls-6 {
                        fill: none;
                    }
                    .cls-5,
                    .cls-6,
                    .cls-7,
                    .cls-9 {
                        stroke-linecap: round;
                    }
                    .cls-5,
                    .cls-7 {
                        stroke-linejoin: round;
                    }
                    .cls-8 {
                        fill: #757576;
                    }
                </style>
            </defs>
            <title>owlpussycat</title>
            <path class="cls-1" d="M189.6,193.24h51.31a0,0,0,0,1,0,0v0a51.31,51.31,0,0,1-51.31,51.31h0a0,0,0,0,1,0,0V193.24A0,0,0,0,1,189.6,193.24Z" />
            <circle class="cls-1" cx="216.16" cy="180.9" r="29.32" />
            <polyline class="cls-2" points="171.19 123.95 224.49 89.05 171.19 54.16 171.19 123.95" />
            <rect class="cls-3" x="149.19" y="67" width="75.3" height="10" transform="translate(383.4 33.81) rotate(147.93)" />
            <rect class="cls-3" x="162.79" y="80.7" width="75.3" height="10" transform="translate(415.8 51.91) rotate(147.93)" />
            <path class="cls-2" d="M235,252.52c0,47.88-38.81,54.69-86.69,54.69s-86.69-6.81-86.69-54.69H235Z" />
            <path class="cls-4" d="M241.49,245.3c0,47.88-38.81,54.69-86.69,54.69s-86.69-6.81-86.69-54.69H241.49Z" />
            <polyline class="cls-5" points="166.32 120.77 219.62 85.87 166.32 50.97 166.32 245.3" />
            <rect class="cls-6" x="87.13" y="179.75" width="45.12" height="65.55" />
            <polyline class="cls-5" points="87.93 121.92 96.73 106.73 105.53 121.92" />
            <polygon class="cls-7" points="237.99 178.59 231.94 189.03 225.89 178.59 237.99 178.59" />
            <polyline class="cls-5" points="104.22 121.92 113.02 106.73 121.82 121.92" />
            <rect class="cls-1" x="66.06" y="120.73" width="77.33" height="77.33" rx="31.91" ry="31.91" />
            <circle class="cls-5" cx="85.63" cy="168.03" r="8.63" />
            <circle class="cls-8" cx="85.62" cy="167.85" r="6.85" />
            <circle class="cls-8" cx="121.82" cy="167.85" r="6.85" />
            <circle class="cls-5" cx="121.82" cy="168.03" r="8.63" />
            <circle class="cls-8" cx="216.5" cy="179.24" r="5.16" />
            <circle class="cls-5" cx="216.5" cy="179.37" r="6.5" transform="translate(-48.12 84.39) rotate(-19.9)" />
            <circle class="cls-7" cx="247.41" cy="179.37" r="6.5" transform="translate(-46.28 94.91) rotate(-19.9)" />
            <circle class="cls-8" cx="247.41" cy="179.24" r="5.16" />
            <line class="cls-6" x1="100.85" y1="174.7" x2="106.82" y2="180.66" />
            <line class="cls-6" x1="107.11" y1="174.7" x2="101.14" y2="180.66" />
            <rect class="cls-1" x="76.83" y="229.15" width="13.5" height="20.5" rx="6.75" ry="6.75" />
            <rect class="cls-1" x="100.07" y="229.15" width="13.5" height="20.5" rx="6.75" ry="6.75" />
            <path class="cls-1" d="M154,184.8a14.25,14.25,0,0,0-14.25,14.25v46.42h7.13V199.63a8.85,8.85,0,0,1,7.52-8.75,3.07,3.07,0,0,0,3-3.09A3.34,3.34,0,0,0,154,184.8Z" />
            <path class="cls-8" d="M194.92,246.77a7.39,7.39,0,0,1,14.77,0" />
            <path class="cls-8" d="M212.3,246.77a7.39,7.39,0,0,1,14.77,0" />
            <line class="cls-9" x1="194.92" y1="201.45" x2="194.92" y2="244.22" />
            <line class="cls-9" x1="200.44" y1="206.25" x2="200.44" y2="244.22" />
            <line class="cls-9" x1="205.83" y1="208.65" x2="205.83" y2="240.28" />
            <line class="cls-9" x1="211.5" y1="209.82" x2="211.5" y2="245.3" />
            <line class="cls-5" x1="59.22" y1="162.43" x2="68.93" y2="162.43" />
            <line class="cls-5" x1="59.22" y1="162.43" x2="68.93" y2="162.43" />
            <line class="cls-5" x1="59.22" y1="167.08" x2="68.93" y2="167.08" />
            <line class="cls-5" x1="59.22" y1="172.08" x2="68.93" y2="172.08" />
            <line class="cls-5" x1="140.58" y1="162.43" x2="150.29" y2="162.43" />
            <line class="cls-5" x1="140.58" y1="162.43" x2="150.29" y2="162.43" />
            <line class="cls-5" x1="140.58" y1="167.08" x2="150.29" y2="167.08" />
            <line class="cls-5" x1="140.58" y1="172.08" x2="150.29" y2="172.08" />
        </svg>

</div>

Favorite Book Character

CSS3, book

编辑器支持Emmet

快捷键

Favorite Book Character

CSS3, book

使用CSS3 perspective变换实现的电影卡片悬停3D偏转动效

使用纯CSS3实现愤怒的小鸟卡通画像

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：