HTML放大旋转变色扭曲

来源：互联网发布：多文件上传java 编辑：程序博客网时间：2024/05/16 17:01

HTML

<title>无标题文档</title>
<link href="Untitled-2.css" rel="stylesheet" />
</head>

<body>
<div class="div1">
<div class="div2"><h1 class="h1">Blue App <span class="span">Template</span></h1><br />
<p id="d2">One page Responsive HTML5 parallax business landing page</p>
<p class="d3">
Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Similique autem,
atque in voluptatibus repellat nostrum iusto
architecto vel placeat numquam omnis assumenda.</p>
<br />
<img class="img"/>
</div>
<img src="phone.png" class="img3"/>
</div>
</body>

CSS

.div1{
background:url(file:///C|/Users/%E4%B8%80%E8%88%AC%E4%B8%80%E5%8D%8A%EF%BC%8C%E4%B8%96%E7%95%8C%E7%AC%AC%E4%B8%89/Desktop/H5/MyHTML/%E5%91%A8%E8%80%83%E7%BB%83%E4%B9%A0/bg.jpg);
width:100%;
height:1132px;
float:left;

}
.div2{
width:649px;
height:579px;

float:left;
margin-top:93px;
margin-left:72px;

}
.h1{
color:#FFF;
margin-left:72px;
font-size:56px;

}
.span{
font-weight:lighter;
color:#CCC;
}

.h1:hover{
transform:scale(1.2,1.2);
color:#F00;

}
#d2{
width:535px;
height:150px;
color:#FFF;
margin-left:72px;
font-size:27px;
margin-top:-33px;

}
#d2:hover{

transform:rotate(360deg);
transition-duration:1s;
}
.d3{
margin-left:72px;
color:#FFF;
font-size:14px;
width:535px;
margin-top:-46px;
}
.img{
margin-left:72px;
margin-top:80px;
width:277px;
height:65px;
border:0;
background:url(file:///C|/Users/%E4%B8%80%E8%88%AC%E4%B8%80%E5%8D%8A%EF%BC%8C%E4%B8%96%E7%95%8C%E7%AC%AC%E4%B8%89/Desktop/H5/MyHTML/%E5%91%A8%E8%80%83%E7%BB%83%E4%B9%A0/003.png);
}
.img:hover{
background:url(file:///C|/Users/%E4%B8%80%E8%88%AC%E4%B8%80%E5%8D%8A%EF%BC%8C%E4%B8%96%E7%95%8C%E7%AC%AC%E4%B8%89/Desktop/H5/MyHTML/%E5%91%A8%E8%80%83%E7%BB%83%E4%B9%A0/001.png);
}
.img3{
margin-left:149px;
margin-top:33px;
}
.img3:hover{
transform:skew(-25deg);

阅读全文

0 0