js+css实现卷轴点击打开动画效果代码-html代码-BFW代码库

js+css实现卷轴点击打开动画效果代码

代码语言：html

所属分类：动画

代码描述：js+css实现卷轴点击打开动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body {
        margin: 0;
        padding: 0;
        font-family: 'Courgette', cursive;
        background-image: url("//repo.bfw.wiki/bfwrepo/image/640bef7be2aa5.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
}

.container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh; width: 100vw;
}

#poster {
        transition: 500ms;
        width: 70vw; height: 90vh;
        background: rgb(250, 139, 6);
        background-color: #e7ea9d;
        background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%235a5857' fill-opacity='0.49' fill-rule='evenodd'%3E%3Cpath d='M1 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid black;
        border-radius: 3rem;
        cursor: pointer;
}

#top {
        transition: 500ms;
        position: absolute;
        border: 1px solid black;
        border-bottom: 0px;
        background-color: #e7ea9d;
        background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%235a5857' fill-opacity='0.49' fill-rule='evenodd'%3E%3Cpath d='M10 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3.........完整代码请登录后点击上方下载按钮下载查看