html和css實現 字型變色 旋轉 圖示漸變
要求：
1.用html和css實現上圖整體佈局效果
2.當滑鼠懸停在時，其字型變為原來的1.2倍，同時字型顏色發生變化。
3.當滑鼠懸停在時，其字型旋轉360度。
4.當滑鼠移動到時，其圖示漸變為（由之前的透明變為白底黑字），當滑鼠再次移出時圖示漸變為原來的樣子。
5.當滑鼠移動到“手機圖片”上時，手機圖片順時針傾斜25度。
6.當尺寸調到PAD或更小尺寸時，右邊的手機圖片移動到下邊
程式碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>週考1練習</title>
<link rel="stylesheet" href="css/zhoukao1.css">
</head>
<body>
<div>
<div class="divleft">
<div id="d1">Blue App Template</div>
<div id="d2">
<p>One page Responsive HTML5 parallax </p>
<p>business landing page</p>
</div>
<div id="d3">
<p> consectetur adipisicing elit. Similique autem,</p>
<p> atque in voluptatibus repellat nostrum iusto architecto vel placeat</p>
<p> numquam omnis assumenda.</p>
</div>
<div id="d4"></div>
</div>
<div class="phone">
<img src="img/phone.png">
</div>
</div>
</body>
</html>
Css檔案：
@charset "utf-8";
/* CSS Document */
*{
margin: 0;
padding: 0;
}
body{
background-image:url(../img/bg.jpg);
}
.divleft{
width:700px;
height:700px;
float:left;
}
.phone{
float: right;
width: 400px;
margin-top: 258px;
}
.phone:hover{
transform: rotate(25deg);
}
#d1{
width:500px;
height:40px;
text-align:center;
margin-top:100px;
font-weight:900px;
font-size:36px;
color:#FFF;
}
#d1:hover{
transform:scale(1,2);
color:#F00;
}
#d2{
margin-top:100px;
width:500px;
height:40px;
font-size:18px;
color:#FFF;
margin-left:80px;
}
#d2:hover{
transform:rotate(180deg);
}
#d3{
width:600px;
height:40px;
font-size:18px;
margin-top:50px;
margin-left:80px;
color:#FFF;
}
#d4{
width:280px;
margin-left:80px;
height:70px;
margin-top:100px;
background-image:url(../img/003.png);
}
#d4:hover{
background-image:url(../img/001.png);
}