CSS(四)——三个盒子的动画效果

最新推荐文章于 2022-12-03 19:30:58 发布

bounceii

最新推荐文章于 2022-12-03 19:30:58 发布

阅读量631

点赞数 1

分类专栏： # JavaScript 文章标签： css css3 html

本文链接：https://blog.csdn.net/rjlmylover_zyw/article/details/121711990

版权

CSS 动画过渡效果交互设计前端开发

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

三个盒子的动画效果

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            width: auto;
            background-color: #333;
        }
        
        .box {
            width: auto;
            height: 100vh;
            background-color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .one {
            /* position: relative; */
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            width: 280px;
            /* height: 100vh; */
            background-color: #333;
            margin: 20px;
        }
        
        .one .oone {
            position: relative;
            transform: translateY(100px);
            transition: transform 0.65s, background-color 0.65s;
            text-align: center;
            line-height: 200px;
            text-shadow: 2px 1px rgb(92, 97, 119);
            /* box-shadow: 0px rgb(0, 0, 0.5); */
            width: 190px;
            height: 200px;
            border: 1px solid rgb(71, 64, 64);
            background-color: #333;
            z-index: 1;
            font-size: 36px;
            color: rgb(105, 110, 126);
        }
        
        .one .otwo {
            position: relative;
            transform: translateY(-100px);
            transition: transform 0.5s;
            /* left: 20px; */
            width: 190px;
            height: 200px;
            background-color: rgb(120, 100, 175);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
        }
        
        .one:hover .oone {
            transform: translateY(0);
            opacity: 0.95;
            text-shadow: 0 0;
            font-size: 30px;
            color: rgb(214, 208, 185);
            background-color: rgb(80, 81, 139);
            box-shadow: 0;
        }
        
        .one:hover .otwo {
            transform: translateY(0);
        }
        
        .text {
            position: absolute;
            left: 10px;
            top: 50px;
            color: rgb(207, 202, 180);
        }
        
        .lianjie {
            position: absolute;
            display: inline-block;
            transition: color 0.3s, border 0.3s;
            left: 20px;
            bottom: 50px;
            border: 2px solid rgb(207, 161, 44);
            border-radius: 5px;
            width: auto;
            height: auto;
            text-align: center;
        }
        
        .lianjie:hover {
            background-color: rgb(89, 47, 122);
            border: 2px solid rgb(89, 47, 122);
            z-index: 1;
        }
        
        .zi {
            text-decoration: none;
            font-size: 18px;
            color: rgb(207, 161, 44);
        }
        /* .one .otwo::before {
            content: ""; */
        /* display: none; */
        /* background-color: rgb(177, 62, 27, );
        } */
        /* .one .otwo:hover::before {
            display: block;
        } */
    </style>
</head>

<body>
    <div class="box">
        <div class="one">
            <div class="oone">one</div>
            <div class="otwo">
                <div class="text">This is one</div>
                <div class="lianjie">
                    <a href="#" class="zi" target="black">one</a>
                </div>
            </div>
        </div>
        <div class="one">
            <div class="oone">two</div>
            <div class="otwo">
                <div class="text">This is two</div>
                <div class="lianjie">
                    <a href="#" class="zi" target="black">two</a>
                </div>
            </div>
        </div>
        <div class="one">
            <div class="oone">three</div>
            <div class="otwo">
                <div class="text">This is three</div>
                <div class="lianjie">
                    <a href="https://www.bilibili.com/" target=class="zi" target="black">three</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>