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前端相关的微信公账号交流平台,关注后回复你想要的东西,即可领取(请持续关注-会有更多的内容-并且这个公众号可接项目、学生作业等)。