移动Web第一天
字体图标
优点
1.灵活 随时可修改颜色和尺寸
（color 可修改颜色 font-size 修改尺寸）
2.体积小，轻量低
3更容易兼容
使用方式
1.Unicode （图标名引入方法）
图标引入方法 必须要加 font-family:"iconfont"
如还需加 颜色 图标大小 添加代码即可：
<link rel="stylesheet" href="./icongont图标/iconfont图库/iconfont.css">
<style>
div {
font-family: "iconfont";
}
</style>
</head>
<body>
<div></div>
</body>
-
Font-class （类名引入方法）{常用方法}
类名引入 得设置两个类名，编码如下：
<link rel="stylesheet" href="./icongont图标/iconfont图库/iconfont.css"> </head> <body> <div class="iconfont icon-ceshi"></div> </body>
3.在线使用方法 (引入线上在线链接){需理解常理即可}
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3243645_8568gh9eemr.css">
<!-- link 引入的是线上在线链接 -->
平面转换(2D转换)
分类
1.平移 (单位名称：px)
2.旋转（单位名称：deg)
3.缩放 单位名称：px)
平移
鼠标悬停在盒子时 盒子会移动
（transition:all 1s) 过渡时间为一秒 谁平移 给谁加
.box {
width: 1000px;
height: 265px;
border: 1px solid #000;
margin: 100px auto;
}
.lift {
width: 180px;
height: 265px;
transition: all 1s;
}
.box:hover .lift {
transform: translate(600px);
}
</style>
</head>
<body>
<div class="box">
<div class="lift"> <img src="./dy3.png" alt=""></div>
</div>
旋转
鼠标悬停 盒子时 图片会旋转
（transition:all 2s) 过渡时间为一秒 谁旋转给谁加
.box {
width: 300px;
border: 1px solid #000;
transform-origin: right bottom;
transition: all 2s;
}
.box:hover {
transform: rotate(1072deg);
}
</style>
</head>
<body>
<div class="box">
<img src="./dy1.jpg" class="zhuan">
</div>
缩放
鼠标悬停盒子时 图片会变大 会缩小 （取值大于“1” 图像变大 取值小于“1” 图像变小）
（transition:all 1s) 过渡时间为一秒 谁缩放 给谁加
.box {
width: 300px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
/* 溢出 隐藏 */
}
.box img {
width: 300px;
height: 300px;
transition: all 2s;
}
.box img:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="box">
<img src="./dy5.png"alt="">
</div>
平移+旋转 案例
.box {
width: 1000px;
height: 285px;
border: 1px solid #000;
}
.box img {
transition: all 5s;
}
.box:hover img {
transform: translate(700px) rotate(360deg);
}
</style>
</head>
<body>
<div class="box">
<img src="./dy2.jpg" alt="">
</div>
旋转+缩放 案例
.box {
width: 600px;
height: 100px;
margin: 50px auto;
}
.box ul {
list-style: none;
}
.box li {
float: left;
width: 50px;
height: 50px;
margin-right: 20px;
border: 1px solid pink;
line-height: 50px;
text-align: center;
border-radius: 50%;
transition: all 2s;
cursor: pointer;
}
.box li:hover {
transform: scale(1.4) rotate(360deg);
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
渐变
渐变 案例
(z-index:2) 注意定时的优先级 添加编码 取值越大 优先级越高
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
margin: 100px;
}
.box .img {
width: 400px;
}
.box .wenzi {
position: absolute;
left: 20px;
bottom: 20px;
color: white;
z-index: 2;
}
.box .wenzi span {
font-weight: 700;
}
.box .mask {
position: absolute;
left: 0;
top: 0;
width: 350px;
height: 247px;
background-image: linear-gradient(
transparent,
rgba(0,0,0,.5)
);
opacity: 0;
transition: all 2s;
}
.box:hover .mask {
opacity: 1;
}
</style>
</head>
<body>
<div class="box">
<img src="./pic.png" alt="">
<div class="wenzi">
<p>智能体<br><span>打造行业智能体，共建全程景智慧</span></p>
</div>
<div class="mask"></div>
</div>
综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
color: white;
text-decoration: none;
}
.box {
width: 1200px;
margin-top: 50px;
margin-left: 50px;
}
.box li {
display: inline-block;
float: left;
margin-right: 50px;
width: 350px;
height: 247px;
position: relative;
overflow: hidden;
}
.box .wenzi {
position: absolute;
left: 20px;
bottom: -20px;
z-index: 1;
transition: all 2s;
}
.box .wenzi h2{
font-weight: 400;
font-size: 16px;
}
.box .wenzi h3 {
font-size: 16px;
margin: 5px 0 20px;
}
.box .mask {
position: absolute;
left: 0;
top: 0;
width: 350px;
height: 247px;
background-image: linear-gradient(
transparent,
rgba(0,0,0,.5)
);
opacity: 0;
transition: all 1s;
}
.box li:hover .mask {
opacity: 1;
}
.box li:hover .wenzi {
transform: translateY(-40px);
}
.box img {
transition: all 2s;
}
.box li:hover img {
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<a href="#">
<img src="./pic.png" alt="">
<div class="wenzi">
<h2>行业洞察</h2>
<h3>行致远，共建具有获得感，幸福美好<br>的智慧城市</h3>
<p>了解更多 ></p>
</div>
<div class="mask"></div>
</a>
</li>
<li>
<a href="#">
<img src="./pic.png" alt="">
<div class="wenzi">
<h2>行业洞察</h2>
<h3>行致远，共建具有获得感，幸福美好<br>的智慧城市</h3>
<p>了解更多 ></p>
</div>
<div class="mask"></div>
</a>
</li>
<li>
<a href="#">
<img src="./pic.png" alt="">
<div class="wenzi">
<h2>行业洞察</h2>
<h3>行致远，共建具有获得感，幸福美好<br>的智慧城市</h3>
<p>了解更多 ></p>
</div>
<div class="mask"></div>
</a>
</li>
</ul>
</div>
</body>
</html>
像素大小在网页上调试方式：
图片与图片之间的渐变：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>渐变-过渡.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 400px;
height: 400px;
margin: 100px auto;
position: relative;
/* 默认的方向 上下到下 */
/* background-image: linear-gradient(black, red); */
/* transition: 1s; */
/* background-image: url(./images/pic1.png); */
}
div:hover {
/* 渐变颜色 上下 red black */
/* background-image: linear-gradient(red, black); */
/* background-image: url(./images/pic2.png); */
}
div:hover .i1 {
opacity: 0;
}
div:hover .i2 {
opacity: 1;
}
div img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.i1 {
transition: 1s;
}
.i2 {
/* display: none; */
transition: 1s;
opacity: 0;
}
</style>
</head>
<body>
<div>
<img class="i1" src="./images/pic1.png" alt="" />
<img class="i2" src="./images/pic2.png" alt="" />
</div>
</body>
</html>
<!--
演示 得出什么结论
1 渐变没有过渡效果的！！！
2 背景图片 渐变效果 不是完善 工作中 要慎用 （浏览器的支持不够好 ）
3 不管 就想要实现 鼠标移入 图片切换的渐变的过程！！
1 换另外的思路来实现这个功能！！
div 里面包装两个图片标签
1 先让一个图片隐藏 一个图片显示
2 div hover 再让另外一个图片隐藏 另外一个图片显示！
3 定位加透明度来实现 透明度有过渡
4 display:none 渐变 背景图片 没有过渡效果
none black
-->
\
