css实现手机炫酷模板页面--无需js

index.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .iphone{
            margin: 100px auto;
            width: 260px;
            height: 460px;
            background: #000;
            /*透明渐变高光*/
            background: linear-gradient(56deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.3) 50%,rgba(255,255,255,0.5) 51%,rgba(255,255,255,0.1) 100%),url("img/phone.png") no-repeat;
            border-radius: 30px;
            border-top: 40px solid #000;
            border-bottom: 40px solid #000;
            /*设置固定盒子的大小*/
            box-sizing: border-box;
            /*固定背景图一样的大小*/
            background-size: cover;
            /*移动图片的位置*/
            background-position: 50% 50%;
            padding: 320px 20px 20px 60px;
            transform:rotateX(55deg) rotateY(5deg) rotateZ(-20deg);
            box-shadow: -25px 25px 28px #333 ,-15px 10px #555;
            transition: all 1s;
        }
        .iphone:hover{
            transform: rotateZ(0) rotateY(0) rotateX(0) scale(1.2);
            box-shadow: -25px 25px 28px #333 ,-8px 2px #555;
            background: linear-gradient(-56deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.3) 50%,rgba(255,255,255,0.5) 51%,rgba(255,255,255,0.1) 100%),url("img/4.jpg") no-repeat;
            border-radius: 30px;
            border-top: 40px solid #000;
            border-bottom: 40px solid #000;
            /*设置固定盒子的大小*/
            box-sizing: border-box;
            /*固定背景图一样的大小*/
            background-size: cover;
            /*移动图片的位置*/
            background-position: 50% 50%;
        }
    </style>
</head>
<body>
<div class="iphone">You are clever girl</div>
</body>
</html>

运行结果：
在这里插入图片描述

南下有你

发布了23 篇原创文章 · 获赞 0 · 访问量 556

私信关注

css实现手机炫酷模板页面--无需js

猜你喜欢