移动web（01）
字体图标
优点
一 灵活 随时修改颜色和尺寸（color font-si
-
引入下载 www.iconfont.com
-
轻量级 体积小 渲染快 降低服务器请求次数
-
兼容性好
-
使用方便
<!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>
<link rel="stylesheet" href="./iconfo/iconfont.css">
<style>
span{
/* 设置字体家族引入iconfont样式 */
font-family: "iconfont";
}
.nav{
/* 调节大小和颜色和基础班一样一样的 */
color: yellow;
font-size: 50px;
}
.nav1{
color: blue;
font-size: 50px;
}
</style>
</head>
<body>
<!-- 引入Unicode里面的代码 -->
<span class="nav"></span>
<span class="nav1"></span>
</body>
</html>
二 ，font-class
<!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>
<!-- 导入iconfont样式表 -->
<link rel="stylesheet" href="./iconfo/iconfont.css">
<style>
/* 选择导入的类名*/
.si{
/* 调节大小和颜色都和基础班学的一样的 */
font-size: 50px;
color: red;
}
</style>
</head>
<body>
<!-- 导入iconfont样式表 里面的类名必须是iconfont样式表名称，第二个类名必须是iconfont里面的样式 -->
添加其他的类名
<span class="iconfont icon-icon-test1
si"></span>
</body>
</html>
如何使用svg上传生成对应的字体
平面转换
平面位移
-
使用transform属性实现元素的位移、旋转、缩放等效果
- 平面转换
- 改变盒子在平面内的形态（位移、旋转、缩放）
- 2D转换
- 平面转换属性
- transform
- 平面转换
-
使用 translate实现元素位移效果
-
语法
- transform：translate（水平移动距离，垂直移动距离）；
-
取值（正负均可）
- 像素单位数值px
- 百分比（参照物为盒子自身尺寸）
- 注意：x****轴正向为右，y轴正向为下
-
技巧
-
transform()如果只给出一个值，表示x轴方向移动距离
-
单独设置某个方向的移动距离：translateX() & translateY()
-
居中方法
<!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> .box{ position: relative; width: 500px; height: 500px; background-color: yellow; } .box1{ position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; background-color: blue; /* 位移translate 百分比单位 现象对于自身的宽度和高度 */ transform: translate(-50%,-50%); } </style> </head> <body> <div class="box"> <div class="box1"> </div> </div> </body> </html> -
使用translate实现元素位移效果
<!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;
}
.box{
position: relative;
margin: 100px auto;
width: 1366px;
height: 600px;
background-color: yellow;
/* 不让子元素超出父元素 */
overflow: hidden;
background-image: url("../../01-移动web/01-Day/01-课堂案例/02-平面转换/03-案例-双开门/images/bg.jpg");
}
.box1,.box2{
position: absolute;
width: 50%;
height: 600px;
/* 添加过度 */
transition: all 1s;
background-image: url("../../01-移动web/01-Day/01-课堂案例/02-平面转换/03-案例-双开门/images/fm.jpg");
}
.box1{
background-color: pink;
left: 0px;
}
.box2{
background-color: blue;
right: 0px;
/* 加right 让图片从右边对齐 */
background-position:right;
}
/* 鼠标移上去让盒子往左移动 */
.box:hover .box1{
/* 设置left往左移动 自身的宽度 - 刚好看不见 */
/* 位移自身宽度 用百分比单位比较方便 */
transform: translateX(-100%);
/*
设置盒子往左移动
1 定位
2.margin
3.位移 动态 酷炫效果 建议 位移 性能优化
*/
}
.box:hover .box2{
transform: translateX(100%);
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
<!--
思想
1 先实现主要（大概的位置 布局
1 大盒子和两个小盒子的位置摆放 （加上颜色）定位
2 再去实现次要的
1 特效 位移 translate 过度
2 背景图片效果等
-->
旋转
目标：使用rotate实现元素旋转效果
- 语法
- transform: rotate(角度);
- 注意：角度单位是deg
- 技巧：取值正负均可
- 取值为正, 则顺时针旋转
- 取值为负, 则逆时针旋转
目标：使用transform-origin属性改变转换原点
-
语法
- 默认圆点是盒子中心点
- transform-origin: 原点水平位置原点垂直位置;
-
取值
-
方位名词（left、top、right、bottom、center）
-
像素单位数值
-
百分比（参照盒子自身尺寸计算）
源代码
<!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> img{ display: block; border: 1px solid red; height: 500px; width: 500px; margin: 50px auto; /* all可以省略 */ transition: 2s; /* transform-origin:像素单位 px */ /* transform-origin：方位代码 */ /* transform-origin：百分比 */ transform-origin: left bottom; } img:hover{ transform: rotate(720deg); } </style> </head> <body> <img src="../../01-移动web/01-Day/01-课堂案例/02-平面转换/images/rotate.png" alt=""> </body> </html> -
-
transform复合属性实现多形状态转换
- 示例
transform：translate（） rotate（）； -
使用transform复合属性实现多形态转换
- 多重转换原理
- 旋转会改变网页元素的坐标轴向
- 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
- 多重转换原理
缩放
使用scale改变元素的尺寸
- 思考:改变元素的width或height属性能实现吗？
- 语法
- transform: scale(x轴缩放倍数, y轴缩放倍数);
- 技巧
- 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
- transform:scale(缩放倍数);
- scale值大于1表示放大, scale值小于1表示缩小
- 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
和平精英案例示例
<!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;
box-sizing: border-box;
}
.box{
width: 250px;
border: 1px solid black;
margin: 100px auto;
position: relative;
overflow: hidden;
}
p{
padding: 10px 0;
}
.box .dd{
width: 100%;
}
.play{
position: absolute;
left: 50%;
top: 40px;
transform:translate(-50%) scale(5) ;
/* 透明 *//* 透明程度 */
opacity: 0;
/* 过度 */
transition: all 1s;
}
.box:hover .play{
transform:translate(-50%) scale(1);
opacity: 1;
}
</style>
</head>
<body>
<div class="box">
<img class="dd" src="../../移动web预习资料/day01/01-课堂案例/02-平面转换/08-和平精英-缩放/images/party.png" alt="">
<p>【和平精英】“初火”音乐概念片：四圣觉醒.....</p>
<img class="play" src="../../移动web预习资料/day01/01-课堂案例/02-平面转换/08-和平精英-缩放/images/play.png" alt="">
</div>
</body>
</html>
渐变
使用background-image属性实现渐变背景效果
-
渐变是多个颜色逐渐变化的视觉效果
-
一般用于设置盒子的背景
示例
