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

要求：

1.用html和css实现上图整体布局效果

2.当鼠标悬停在时，其字体变为原来的1.2倍，同时字体颜色发生变化。

3.当鼠标悬停在时，其字体旋转360度。

4.当鼠标移动到时，其图标渐变为（由之前的透明变为白底黑字），当鼠标再次移出时图标渐变为原来的样子。

5.当鼠标移动到“手机图片”上时，手机图片顺时针倾斜25度。

6.当尺寸调到PAD或更小尺寸时，右边的手机图片移动到下边

代码：

   

       

       

Blue App Template

        
       

           

One page Responsive HTML5 parallax

           

business landing page

       

        
       

           

consectetur adipisicing elit. Similique autem,

           

atque in voluptatibus repellat nostrum iusto architecto vel placeat

           

  numquam omnis assumenda.

       

       

       

       

           
 

   

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