html和css实现字体变色旋转图标渐变

来源：互联网发布：阿里云cname绑定编辑：程序博客网时间：2024/05/24 06:01

要求：

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);
}

阅读全文

0 0

html和css实现 字体变色 旋转 图标渐变

html和css实现字体变色旋转图标渐变