css实现悬浮信封并从中弹出照片动画效果代码-html代码-BFW代码库

css实现悬浮信封并从中弹出照片动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现悬浮信封并从中弹出照片动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        body {
        padding:0;
        margin:0;
}
.container {
        width:100%;
        height:100vh;
        position:relative;
}
.beauty-container {
        position:absolute;
        top:35%;
        left:6%;
        width:300px;
        height:200px;
        background-color:burlywood;
        box-shadow:inset 100px 0 10px 5px rgba(0,0,0,0.4);
        border-top-right-radius:25px;
        border-bottom-right-radius:25px;
        perspective:1000px;
        perspective-origin:bottom;
}
.beauty-container:hover .beauty-card-parent {
        left:-20px;
}
.beauty-container:hover .beauty-card-parent .beauty-card-cover {
        opacity:0;
        right:-20px;
        transform:rotateY(180deg);
}
.beauty-container:hover .beauty-card:nth-child(3) {
        left:350px;
        top:-40px;
        transition-delay:1.5s;
}
.beauty-container:hover .beauty-card:nth-child(2) {
        left:550px;
        top:-50px;
        transition-delay:1.25s;
}
.beauty-container:hover .beauty-card:nth-child(1) {
        left:750px;
        top:-60px;
        transition-delay:1s;
}
.beauty-container:hover .beauty-card {
        height:280px !important;
        box-shadow:0 10px 15px 1px rgba(31,56,108,0.4);
}
.beauty-container:hover .beauty-card:hover {
        transition:.1s all;
        z-index:1;.........完整代码请登录后点击上方下载按钮下载查看