移动端web第1天
字体图标
优点
1.灵活性 随便修改颜色和尺寸（color font-zi）
2.轻量级 体积小
3.兼容性好
4.使用方便
使用方法
1.unicode
<link rel="stylesheet" href="./font_3243741_gho2c3925i9/iconfont.css">
<style>
span {
font-family:"iconfont" ;
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<span></span>
<span></span>
</body>
2.iconfont icon-eye-close 类名选择器
<link rel="stylesheet" href="./font_3243741_gho2c3925i9/iconfont.css">
<style>
.s1 {
color: red;
font-family: "iconfont";
font-size: 100px;
}
span:nth-child(2) {
font-size: 50px;
color: pink;
}
</style>
</head>
<body>
<span class="iconfont icon-eye-close s1"></span>
<span class="iconfont icon-fabulous"></span>
</body>
3.字体图标购物车案例
使用方式
<link rel="stylesheet" href="./font_3243741_gho2c3925i9/iconfont.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 100px;
border: 1px solid #ccc;
margin: 100px auto;
}
/* 第一个字体图标 相机 红色 */
.s1 {
color: red;
}
</style>
</head>
<body>
<div class="box">
<!-- 2 使用iconfont 类名方式 两个类名 iconfont icon-xxx -->
<i class="iconfont icon-camera s1"></i>
<span>购物车</span>
<i class="iconfont icon-arrow-down"></i>
</div>
</body>
4.自己做的矢量图
<!-- 引入字体图标的样式文件 -->
<link rel="stylesheet" href="./iconfont.css">
<style>
span {
font-family: "iconfont";
color: pink;
}
/* 改文字大小要给个类名 */
.s1 {
font-size: 100px;
}
</style>
</head>
<body>
<span class="iconfont icon-delete s1"></span>
</body>
5.引入在线地址的字体图标地址
<!-- 1 引入在线地址的字体图标地址 -->
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3243645_8568gh9eemr.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
span {
font-family: "iconfont";
color: pink;
}
.s1 {
font-size: 100px;
}
</style>
</head>
<body>
<span class="iconfont icon-Dyanjing s1"></span>
<span class="iconfont icon-caidan s1"></span>
<span class="iconfont icon-dianzan s1"></span>
</body>
07-转换之平面位移
1位移 2转换 3缩放
1.位移 (translate(100px,100px))
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* 平面转换 位移 */
transform: translate(100px,100px);
}
</style>
</head>
<body>
<div></div>
</body>
8.盒子居中
<style>
.box {
position: relative;
width: 600px;
height: 600px;
background-color: pink;
}
.son {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
background-color: aqua;
/* 以前， 设置 margin值 移动 自身的宽度和高度一半 */
/* 现在 移动 translate 百分比单位 相对与自身的宽度和高度的一半 */
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
9-两侧开门案例
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.banner {
overflow: hidden;
position: relative;
width: 1200px;
height: 300px;
background-color: pink;
margin: 100px auto;
}
.box,
.div {
position: absolute;
width: 50%;
height: 100%;
}
.box {
top: 0;
left: 0;
background-color: aqua;
transition: all 1s;
}
.div {
bottom: 0;
right: 0;
background-color: red;
transition: all 2s;
}
.banner:hover .box {
transform: translatex(-100%);
}
.banner:hover .div {
transform: translateX(100%);
}
</style>
</head>
<body>
<div class="banner">
<div class="box"></div>
<div class="div"></div>
</div>
</body>
10-转换之旋转
1.transform: rotate
2.单位 deg
<style>
div {
position: relative;
width: 200px;
height: 200px;
background-color: pink;
border-radius: 50%;
transition: 2s;
margin: 100px auto;
}
div:hover {
/* 旋转 rotate*/
transform: rotate(11720deg);
}
span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 100px;
height: 100px;
background-color: #fff;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
</body>
11-转换之原点
transform-origin
1.可以加方位名词
2像素 px
3.百分比 %
<style>
.div {
height: 300px;
width: 300px;
background-color: pink;
margin: 100px auto;
transition: 2s;
/* transform-origin: top left; */
/* transform-origin: 0px 0px; */
transform-origin: right bottom;
}
.div:hover {
transform: rotate(120deg);
}
</style>
</head>
<body>
<div class="div">
</div>
</body>
12-多重转换
1.先移动后旋转
<style>
.top {
width: 800px;
height: 200px;
border: 1px solid #ccc;
margin: 20px auto;
}
.box {
position: relative;
width: 200px;
height: 200px;
background-color: pink;
border-radius: 50%;
transition: 5s;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
height: 100px;
width: 100px;
background-color: #fff;
}
.top:hover .box {
/* 先位移后旋转 */
transform: translateX(600px) rotate(700deg);
}
</style>
</head>
<body>
<div class="top">
<div class="box">
<div class="content"></div>
</div>
</div>
</body>
13-渐变
<style>
div {
width: 400px;
height: 400px;
margin: 100px auto;
/* 渐变 */
/* 1一定要给背景图片 不是 背景 颜色！！！ （渐变不是单指一种颜色） */
/* 2.最为常见的！！ */
/* background-image: linear-gradient(black , red); */
/* 设置多种渐变的颜色 */
/* background-image: linear-gradient(black,blue ,red); */
/* 分层的渐变效果 */
/* 盒子上下划分 高度 100%
0% ~ 30% black 黑色
30% ~ 50% black - red
50% ~ 80% pink
80 ~ 100% pink -blue
*/
/* background-image: linear-gradient(
black, 30%
red, 50%
pink , 80%
blue 100%
); */
/* 渐变的方向 */
/*
方位名词
to 方向
1 .默认值 to bottom 从上到下
2.上到下 to top
3. 右上角 to right top
*/
/* background-image: linear-gradient(to left bottom, blue, red); */
/* background-image: linear-gradient( to top left, pink, red ); */
/* 角度 deg */
background-image: linear-gradient(0deg , blue , pink);
}
</style>
</head>
<body>
<div></div>
</body>
