1.移动web学习路线图
2.今日知识点
iconfont
注解:incofont 我的项目路径(网页设计太烂,我的项目路径不好找)
1.使用Unicode
必须掌握的两种使用方式:
第一种:Unicode
第二步:定义使用iconfont的样式
@font-face {font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
第二步:定义使用iconfont的样式
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}
第三步:挑选相应图标并获取字体编码,应用于页面
<i class="iconfont">3</i>
注意此处也可使用伪元素:伪元素更加简单(推荐使用)
<div></div>
1.首先引入@font-face
2.编写伪元素
div:after {
content:"\e602" 此处注意格式
font-family:"iconfont" 必须引入字体格式
}
2.使用font-class
第一步:拷贝项目下面生成的fontclass代码:
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css
第二步:挑选相应图标并获取类名,应用于页面:
<i class="iconfont icon-xxx"></i>
3.上传字体图标
上传为svg格式的字体图标
平面位移:translate
平面的各种效果是要和transition配合使用的,才能看出来效果
style中的代码:
<style>
.f {
width: 600px;
height: 600px;
border:1px dotted #000000;
}
.s {
width: 100px;
height: 50px;
background-color: pink;
transition:all 1s linear 0.35s;
}
.f:hover .s {
width: 100%;
transform: translate(100px,100px);
}
</style>
body:
<body>
<div class="f">
<div class="s"></div>
</div>
平面旋转:rotate
旋转的参数还有一个transform-origin:旋转中心
旋转度数的单位为deg
此处注意:旋转的话,物体的x轴指向会随之变化的
<style>
img {
width: 100px;
transition: all 2s;
transform-origin:bottom center;
}
img:hover {
transform:rotate(360deg);
}
</style>
<body>
<img src="./images/rotate.png" alt="">
</body>
4.缩放:scale
5.渐变:
<style>
div {
width: 200px;
height: 200px;
background-color: #fff;
background-image: linear-gradient(#fff,pink,black);
}
</style>
注意:
透明度使用方法:
background-image: linear-gradient(transparent,rgba(0,0,0,.3));
3.今日随堂练习
位移:汽车开门
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 1366px;
height: 600px;
margin: 0 auto;
background: url('./images/bg.jpg');
overflow: hidden;
}
.box::before,
.box::after {
float: left;
content: '';
width: 50%;
height: 600px;
background-image: url(./images/fm.jpg);
transition: all .5s;
}
.box::after {
background-position: right 0;
}
/* 鼠标移入的时候的位置改变的效果 */
.box:hover::before {
transform: translate(-100%);
}
.box:hover::after {
transform: translateX(100%);
}
</style>
<body>
<div class="box">
</div>
</body>
缩放:和平精英案
隐藏元素:opacity 设置元素的透明度:1为显示:
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
img {
width: 100%;
}
.box {
width: 249px;
height: 210px;
margin: 50px auto;
overflow: hidden;
}
.box p {
color: #3b3b3b;
padding: 10px 10px 0 10px;
}
.box .pic {
position: relative;
}
.box .pic::after {
/* 播放按钮压在图片上面 - 居中 */
position: absolute;
left: 50%;
top: 50%;
/* margin-left: -29px;
margin-top: -29px; */
/* transform: translate(-50%, -50%); */
content: '';
width: 58px;
height: 58px;
background-image: url(./images/play.png);
/* 大图 */
transform: translate(-50%, -50%) scale(5);
/* 透明,看不见 */
opacity: 0;
transition: all .5s;
}
/* lihover的时候, 谁变小pic::after */
.box li:hover .pic::after {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
</style>
<div class="box">
<ul>
<li>
<div class="pic"><img src="./images/party.jpeg" alt=""></div>
<p>【和平精英】“初火”音乐概念片:四圣觉醒......</p>
</li>
</ul>
</div>
综合案例:华为官网
鼠标移入:背景图片放大,文字上移,渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>华为官网</title>
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3923027_mx80dk96ef.css">
<style>
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
a {
text-decoration: none;
}
ul li {
position: relative;
overflow: hidden;
width: 788px;
height: 549px;
}
.pic img{
width: 788px;
transition: all 0.5s;
}
.text {
position: absolute;
top: 0;
left:0;
margin-top: 400px;
color: white;
line-height: 40px;
padding: 40px;
transition: all 1s;
}
.more {
margin-top: 50px;
}
ul li:hover .text{
transform: translateY(-80px);
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(transparent,rgba(0,0,0,0.3));
opacity: 0;
}
ul li:hover .mask {
opacity: 1;
}
ul li:hover .pic img {
transform: scale(1.2);
}
</style>
</head>
<body>
<div>
<ul>
<li>
<a href="">
<div class="pic">
<img src="img.png" alt="">
</div>
<div class="text">
<h3>产品</h3>
<h1>HUAWEI WATCH GT 3 Pro</h1>
<div class="more">
<span>了解更多</span>
<i class="iconfont icon-arrow-right"></i>
</div>
</div>
<div class="mask"></div>
</a>
</li>
</ul>
</div>
</body>
</html>