CSS入门案例（6）：图形变换

最新推荐文章于 2022-05-10 22:26:37 发布

Rengarhunt

最新推荐文章于 2022-05-10 22:26:37 发布

阅读量269

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/Rengarhunt/article/details/110244555

版权

css 专栏收录该内容

18 篇文章

订阅专栏

在这里插入图片描述

	<div class="box">
        <p>Elsa</p>
        <h1></h1>
    </div>

		*{margin: 0;padding: 0;}
        .box{
            height: 309.29px;width: 400px;
            margin: 100px auto;
            position: relative;
        }
        .box p{
            height: 309.29px;width: 400px;
            background: #000;
            font-size: 38px;
            color: #fff;
            text-align: center;
            line-height: 309.29px;
            position: absolute;
            transform: rotate(0deg) scale(0);
            transition: 1.5s;
        }
        .box h1{
            height: 289.29px;width: 380px;
            background: url(/img/87D27FE8270E201A71097FE27101F6AA.jpg);
            background-size: cover;
            background-origin: border-box;
            border: 10px solid rgba(255, 255, 255, 0.5);
            position: absolute;
            transition: 1s;
        }
        .box:hover h1{transform: rotate(360deg) scale(0);}
        .box:hover p{transform: rotate(360deg) scale(1);}