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

html和css实现字体变色旋转图标渐变相关推荐

CSS之字体效果（含渐变和阴影效果）
之前看到这个效果感觉很不错,应用起来也不算复杂,下面是效果图和代码,有兴趣的同学可以尝试一下. <!DOCTYPE html> <html lang="zh-CN" ...
css中的代码图标,认识CSS中字体图标(示例代码)
前端之HTML,CSS(十一) 字体图标使用文字做出小图标的效果并超越了小图标应用精灵图,使得图标变得灵活,减少了请求次数,优化了界面的性能.字体图标本身为矢量图. 字体图标的使用过程 1.UI设计 ...
在php里让字体划过变色,鼠标划过字体时如何用css来实现字体变色？（代码实测）...
当我们在浏览网页时,鼠标划过某段文字会出现变色效果,这就是css字体变色,一方面是为了主动吸引人用户目光去点击,另一方面是为了防止用户点击错其他文字段落.其实这种css鼠标经过字体变色的效果是非常容易 ...
html css导航栏字体图标,HTML+CSS入门之两种图标字体库
本篇教程介绍了HTML+CSS入门之两种图标字体库,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < ## 0. 前言比较基础的图标加载:和块元素的背景background ...
【css】i标签icon图标旋转样式
[css]i标签icon图标旋转样式 [css]i标签icon图标旋转样式 [css]i标签icon图标旋转样式代码示例: <i class="el-icon-refresh&quo ...
html标题字体重叠,如何在HTML和CSS的段落标题上方显示堆叠的字体超棒图标？
在下图中,有文字显示为"堆叠的字体 - 真棒图标".这是我想显示堆叠字体的图标的地方.具体来说,我想在方形轮廓内显示一个字体真棒图标(即字体真棒图标),并且可以根据需要调整它的大小 ...
html中特殊字体图标,Awesome图标和css特殊字体的使用方法_html/css_WEB-ITnose
作为第一篇博文,写这个我快要被气炸,好吧,废话不说了昨天在项目中发现有很多这些Awesome图标也在网上找了下Font Awesome 下载后这些文件, 现在的版本是4.2,Font Aweso ...
奥森图标和CSS特殊字体使用方法
作为第一篇博文,写这个我快要被气炸,好吧,废话不说了昨天在项目中发现有很多这些Awesome图标也在网上找了下Font Awesome 下载后这些文件,现在的版本是4.2,Font Awesom ...
三、bootstrap4 组件（警告和提示框、徽章和面包屑、按钮按钮组、卡片、列表组、导航和选项卡、分页和进度条、巨幕和旋转图标、轮播图、折叠菜单、下拉菜单、导航条、滚动监听、轻量弹框、模态框、表单）
1.1 警告提示框 1.2 徽章和面包屑 1.3 按钮和按钮组 1.4 卡片 1.5 列表组 1.6 导航和选项卡 1.7 分页和进度条 1.8 巨幕和旋转图标 1.9 轮播图 1.10 折叠菜单 1 ...
在DW中实现鼠标移入字体变色
1.首先创建一个新的HTML,,再创建新的css,接着创建新的文件夹将它们分别放进不同的位置. 2.接着在head标签里面输入link点击Tab键再点击空格选择刚才css文件夹,然后body写下div ...

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

html和css实现字体变色旋转图标渐变相关推荐

最新文章

热门文章

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

html和css实现 字体变色 旋转 图标渐变相关推荐

最新文章

热门文章

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

html和css实现字体变色旋转图标渐变相关推荐