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

最新推荐文章于 2021-07-05 14:25:24 发布

少年的舟

最新推荐文章于 2021-07-05 14:25:24 发布

阅读量2k

点赞数

文章标签： css html5

本文链接：https://blog.csdn.net/weixin_46113485/article/details/104254569

版权

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>

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

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
分享交流
1.有兴趣一起交流的，可以关注我的公众号：这里你能够学到很实用的技巧，不是常用的我不说，公众号回复提取码即可获取以下学习资料啦啦啦啦，喜欢就拿去吧！！
（链接时常会失效，若出现此类情况，可以加我微信：17722328325（加时请备注：学习资料））

Java web从入门到精通电子书
Python机器学习电子书
Python400集（北京尚学堂）
JavaScript项目案例、经典面试题
Java300集（入门、精通）
Java后端培训机构录集（同事培训内部提供）
java重要知识pdf文档（价值连城呀呀，不收藏你会后悔的）
喜欢就关注吧，点个赞吧

2.这个是web前端相关的微信公账号交流平台，关注后回复你想要的东西，即可领取(请持续关注-会有更多的内容-并且这个公众号可接项目、学生作业等)。
在这里插入图片描述
微信公众号搜：烟火男孩

少年的舟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css实现手机炫酷模板页面--无需js

index.html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .iphone{ margin: 100...
复制链接

扫一扫