本文详细介绍了CSS3的应用，包括利用伸缩布局实现图片无缝轮播和立体导航栏，深入解析伸缩布局的工作原理，以及设置主轴和侧轴对齐方式。同时，讲解了如何使用自定义字体和图标，涵盖不同浏览器支持的字体格式，并提供了相关字体资源网站。此外，还提到了鼠标滚轮滚动事件和jQuery-fullPage全屏滚动插件的使用。
1.使用CSS3来DIY图片i无缝轮播效果：图片大小：126*86
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用css3动画制作自动无缝轮播图</title>
<style>
body, ul, li {
margin: 0;
padding: 0;
}
img {
border: 0 none;
vertical-align: top;
}
.warp {
width: 882px;
/*width: 126px;*/
height: 86px;
border: 1px solid #000;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
}
ul:hover {
/*动画的播放状态
使用这个属性能够改变动画的播放状态，
如动画正在播放时，
可以通过这个属性，
让动画暂停一下*/
animation-play-state: paused;
}
ul {
list-style: none;
width: 1800px;
/*动画名称 必写*/
animation-name: dong;
/*动画一次所持续的时间 必写*/
animation-duration: 2000ms;
/*动画执行的次数（动画重复的次数） 无数次:infinite;*/
animation-iteration-count: infinite;
/*动画的方向：normal 全正向，alternate 先正向再反向*/
animation-direction: normal;
/*动画结束后保持的状态 backwards(默认值)表示回退到原点
forwards表示不回到原点，backwards表示动画结束后 保持 动画开始前的状态，
forwards表示动画结束后 保持 动画结束后状态*/
animation-fill-mode: backwards;
/*动画的类型 也就是动画的运动曲线
linear 表示线性匀速
ease-in 表示慢慢变快
ease-in-out 表示先快后慢
steps(3) 表示每一次动画都是分三步完成(速度就像是一帧一帧的完成的)，
steps这个属性可以用来做时钟，
也能够用来做那些 很准确的一帧一帧完成的动画，
因为steps的每一帧都是瞬间完成的*/
animation-timing-function: linear;
/*动画每次执行时延迟的时间*/
animation-delay: 0s;
}
li {
float: left;
}
@keyframes dong {
from {
}
to {
transform: translate(-882px, 0);
}
}
</style>
</head>
<body>
<div class="warp">
<ul>
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
<li><img src="images/5.jpg"></li>
<li><img src="images/6.jpg"></li>
<li><img src="images/7.jpg"></li>
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
<li><img src="images/5.jpg"></li>
<li><img src="images/6.jpg"></li>
<li><img src="images/7.jpg"></li>
</ul>
</div>
</body>
</html>2.使用CSS3来DIY立体导航栏效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用css3中的transform制作立体导航栏</title>
<style>
body,ul,li {
margin: 0;
padding: 0;
}
body {
background-color: deeppink;
}
ul {
width: 900px;
margin: 100px auto;
height: 80px;
list-style: none;
position: relative;
}
ul li {
width: 180px;
height: 80px;
cursor: pointer;
float: left;
}
li span {
float: left;
height: 80px;
background-color: #ccc;
}
span.left {
width: 30px;
height: 80px;
transform-origin: left;
}
span.center {
width: 120px;
height: 80px;
text-align: center;
font: 500 20px/80px "Microsoft yehei";
/*color: white;*/
}
span.right {
width: 30px;
height: 80px;
transform-origin: right;
}
li:hover span.left {
transform: skew(0deg, -30deg);
background-color: #c0c0c0;
}
li:hover span.center {
transform: translateY(-18px);
text-shadow:5px 5px 3px #333;
box-shadow: 0 15px 20px -4px #666;
}
li:hover span.right {
transform: skew(0deg, 30deg);
background-color: #c0c0c0;
}
ul::before,ul::after {
content:"";
position: absolute;
z-index: -1;
/*width: 450px;*/
width: 30px;
height: 80px;
left: -30px;
/*background-color: #e0e0e0;*/
background-color: #ccc;
}
ul:after {
left: auto;
right: -30px;
}
</style>
</head>
<body>
<ul>
<li>
<span class="left"></span>
<span class="center">水晶女孩</span>
<span class="right"></span>
</li>
<li>
<span class="left"></span>
<span class="center">水晶女孩</span>
<span class="right"></span>
</li>
<li>
<span class="left"></span>
<span class="center">水晶女孩</span>
<span class="right"></span>
</li>
<li>
<span class="left"></span>
<span class="center">水晶女孩</span>
<span class="right"></span>
</li>
<li>
<span class="left"></span>
<span class="center">水晶女孩</span>
<span class="right"></span>
</li>
</ul>
</body>
</html>3.CSS3新增的伸缩布局，主轴方向是从左到右，侧轴方向是从上到下：
◆
display：flex;默认从左到右，从上到下
◆设置主轴排列方向的方式：，
flex-direction:row;（默认属性，表示从左至右的排列），
flex-direction:row-reverse;（表示从右至左的排列），
flex-direction:column;（表示从上到下的排列），
flex-direction:column-reverse;（表示从下到的排列），
最重要的是横向排列时，当所有子元素的宽小于父容器的宽时，子元素多宽就是多宽，但是如果所有子元素的宽大于父容器了，那么就会自适应父容器的宽，于是子元素原来的宽就无效了，子元素的宽度就变成父容器除以子容器的个数的值了，当然如果有外边距也会加进去用来计算，纵向排列也是如此，但是如果父容器没有设置高，那就不会自适应父容器的高了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3中的伸缩布局（主轴排列方向的方式）</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font: 400 22px "Microsoft yehei";
background-color: #eee;
}
h3 {
font-weight: normal;
}
section {
width: 1000px;
margin: 40px auto;
}
ul {
list-style: none;
border: 1px solid #ccc;
background-color: #fff; height:500px;
}
ul li {
width: 200px;
height: 200px;
background-color: #0ff;
box-sizing: border-box;
margin: 10px;
}
section:nth-child(1) ul {
overflow: hidden;
}
section:nth-child(1) ul li {
float: left;
}
section:nth-child(2) ul {
display: flex;
}
section:nth-child(3) ul {
display: flex;
flex-direction: row;
}
section:nth-child(4) ul {
display: flex;
flex-direction: row-reverse;
}
section:nth-child(5) ul {
display: flex;
flex-direction: column;
}
section:nth-child(6) ul {
display:flex;
flex-direction:column-reverse;
}
section:nth-child(7) ul {
text-indent:2em;
color:#daa520;
}
</style>
</head>
<body>
<section>
<h3>传统布局方式</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>伸缩布局方式 display:flex</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>伸缩布局方式(设置主轴方向的方式) flex-direction:row;（默认属性，表示从左至右的排列）</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>伸缩布局方式(设置主轴方向的方式) flex-direction:row-reverse;（表示从右至左的排列）</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>伸缩布局方式(设置主轴方向的方式) flex-direction:column;（表示从上到下的排列）</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>伸缩布局方式(设置主轴方向的方式) flex-direction:column-reverse;（表示从下到的排列）</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>小总结</h3>
<ul>
最重要的
是横向排列时，当所有子元素的宽小于父容器的宽时，子元素多宽就
是多宽，但是如果所有子元素的宽大于父容器了，那么就会自适应父
容器的宽，于是子元素原来的宽就无效了，子元素的宽度就变成父容
器除以子容器的个数的值了，当然如果有外边距也会加进去用来计算
，纵向排列也是如此，但是如果父容器没有设置高，那就不会自适应
父容器的高了。
</ul>
</section>
</body>
</html>◆设置主轴对齐的方式：
justify-content:flex-start（表示对齐方式是从主轴方向开始的地方对齐），
justify-content:flex-end（表示对齐方式是从主轴方向结束的地方对齐），
justify-content:center（表示对齐方式是从主轴方向中间的地方对齐），
justify-content:space-round（表示对齐方式是从主轴方向空间平分），
justify-content:space-between（表示对齐方式是从主轴方向两端对齐中间的居中）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3中的伸缩布局（设置主轴对齐的方式）</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font: 400 22px "Microsoft yehei";
background-color: #eee;
}
h3 {
font-weight: normal;
}
section {
width: 1000px;
margin: 40px auto;
}
ul {
list-style: none;
border: 1px solid #ccc;
background-color: #fff; height:500px;
}
ul li {
width: 200px;
height: 200px;
background-color: #0ff;
box-sizing: border-box;
margin: 10px;
}
section:nth-child(1) ul {
display: flex;
/*justify :整理*/
justify-content: flex-start;
}
section:nth-child(2) ul {
display: flex;
justify-content: flex-end;
}
section:nth-child(3) ul {
display: flex;
justify-content: center;
}
section:nth-child(4) ul {
display: flex;
/*space:空间*/
/*around:四周 周围*/
justify-content: space-around;
}
section:nth-child(5) ul {
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<section>
<h3>justify-content:flex-start（表示对齐方式是从主轴方向开始的地方对齐）</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>justify-content:flex-end（表示对齐方式是从主轴方向结束的地方对齐）</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>justify-content:center（表示对齐方式是从主轴方向中间的地方对齐）</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>justify-content:space-round（表示对齐方式是从主轴方向空间平分）</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>justify-content:space-between（表示对齐方式是从主轴方向两端对齐中间的居中）</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
</body>
</html>◆侧轴对齐的方式：
align-items:flex-start（表示对齐方式是从侧轴方向开始的地方对齐），
align-items:flex-end（表示对齐方式是从侧轴方向结束的地方对齐），
align-items:center（表示对齐方式是从侧轴方向中间的地方对齐），
align-items:baseline（表示对齐方式是从侧轴方向基线的地方对齐，与flex-start一样），
align-items:stretch（表示对齐方式是从侧轴方向的以拉伸的方式对齐，只要子元素的高度为auto，那么会自适应父容器的高度，既拉伸）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3中的伸缩布局（设置侧轴对齐的方式）</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font: 400 22px "Microsoft yehei";
background-color: #eee;
}
h3 {
font-weight: normal;
}
section {
width: 1000px;
margin: 40px auto;
}
ul {
list-style: none;
border: 1px solid #ccc;
background-color: #fff;
height: 500px;
}
ul li {
width: 200px;
height: 200px;
background-color: #0ff;
box-sizing: border-box;
margin: 10px;
}
section:nth-child(1) ul {
display: flex;
align-items: flex-start;
}
section:nth-child(2) ul {
display: flex;
align-items: flex-end;
}
section:nth-child(3) ul {
display: flex;
align-items: center;
}
section:nth-child(4) ul {
display: flex;
align-items: baseline;
}
section:nth-child(5) ul {
display: flex;
/*stretch:伸展*/
align-items:stretch;
}
section:nth-child(5) ul li{
height: auto;
}
</style>
</head>
<body>
<section>
<h3>align-items:flex-start（表示对齐方式是从侧轴方向开始的地方对齐）</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>align-items:flex-end（表示对齐方式是从侧轴方向结束的地方对齐）</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>align-items:center（表示对齐方式是从侧轴方向中间的地方对齐）</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>align-items:baseline（表示对齐方式是从侧轴方向基线的地方对齐，与flex-start一样）</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>align-items:stretch（表示对齐方式是从侧轴方向的以拉伸的方式对齐，只要子元素的高度为auto，那么会自适应父容器的高度，既拉伸）</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
</body>
</html>◆设置
display：flex;后，继续设置每个子盒子所占父盒子的比例，既伸缩比例，给子盒子设置
flex:number;，如果不参与伸缩比例的设置就不给那个子盒子写
flex:number;，当给一个子盒子设置
flex:auto;时，大小就是原来的大小 + flex:1。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3中伸缩布局（设置伸缩比例）</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font: 400 22px "Microsoft yehei";
background-color: #eee;
}
h3 {
font-weight: normal;
}
section {
width: 1000px;
margin: 40px auto;
}
ul {
list-style: none;
border: 1px solid #ccc;
background-color: #fff;
height: 500px;
}
ul li {
width: 200px;
height: 200px;
background-color: #0ff;
box-sizing: border-box;
margin: 10px;
}
/*
设置display：flex;后，继续设置每个子盒子所占父盒子的比例，
既伸缩比例，
给子盒子设置 flex:number;，
如果不参与伸缩比例的设置就不给那个子盒子写flex:number;，
当给一个子盒子设置flex:auto时，大小就是原来的大小 + flex:1
*/
section:nth-child(1) ul {
display: flex;
/*flex-direction:column;*/
}
section:nth-child(1) ul li:nth-child(1) {
flex:5
}
section:nth-child(1) ul li:nth-child(2) {
flex:1
}
section:nth-child(1) ul li:nth-child(3) {
/*就是原来的大小 + flex:1*/
flex:auto;
}
</style>
</head>
<body>
<section>
<h3>设置display：flex;后，继续设置每个子盒子所占父盒子的比例，既
伸缩比例，给子盒子设置 flex:number;，如果不参与伸缩比例的设置
就不给那个子盒子写flex:number;</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
</body>
</html>◆在移动端使用
box-sizing:border-box;非常的多
◆
meta:vp这个emmte表达式，用于告诉移动端浏览器，要自适应手机大小。
4.使用CSS3新增的伸缩布局来DIY：简单导航、移动端导航
◆简单导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用css3中的伸缩布局制作简单导航</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 600px;
margin: 100px auto;
}
ul {
list-style: none;
width: 600px;
height: 60px;
display: flex;
text-align: center;
line-height: 60px;
border: 1px solid #000;
box-sizing: border-box;
}
ul li {
flex: 1;
margin:0 5px;
background-color: pink;
}
.layout {
width: 600px;
height: 800px;
border: 1px solid #000;
margin-top: 10px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.header {
background-color: pink;
flex: 1;
}
.section {
flex: 5;
display: flex;
flex-direction: row;
}
.left {
background-color: #f00b;
flex: 1;
}
.right {
background-color: #0f0b;
flex: 3
}
.footer {
background-color: #000;
flex: 2;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>消息</li>
<li>通信录</li>
<li>发现</li>
<li>我的</li>
<li>空间</li>
</ul>
<div class="layout">
<div class="header"></div>
<div class="section">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</div>
</div>
</body>
</html>◆移动端导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用css3中的伸缩布局制作移动端导航</title>
<!--meta:vp这个emmte表达式，用于告诉移动端浏览器，要自适应手机大小-->
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #fff;
}
img {
border: 0 none;
vertical-align: top;
}
.layout {
width: 100%;
min-width: 320px;
}
.header img {
width: 100%;
}
.nav {
}
.nav section {
height: 90px;
display: flex;
border-radius: 10px;
margin-top: 10px;
}
.pub {
flex: 1;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
}
.sub {
flex: 2;
}
.sub a {
float: left;
width: 50%;
height: 45px;
text-align: center;
line-height: 45px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
box-sizing: border-box;
}
.nav section:nth-child(1) {
background-color: #f00b;
}
.nav section:nth-child(2) {
background-color: #0f0b;
}
.nav section:nth-child(3) {
background-color: #0ffc;
}
.nav section:nth-child(4) {
background-color: #ff0c;
}
.nav section:nth-child(4) > .pub {
display: flex;
flex-direction: column;
}
.nav section:nth-child(4) > .pub > a {
flex: 1;
text-align: center;
height: 45px;
line-height: 45px;
border-bottom: 1px solid #fff;
box-sizing: border-box;
}
section.other {
display: flex;
flex-direction: row;
}
.other a {
flex: 1;
}
.other a img {
width: 100%;
}
.footer {
text-align: center;
}
.footer a {
color: #000;
}
.footer nav {
display: flex;
flex-direction: row;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.footer nav a {
padding: 20px 0;
flex: 1;
}
.link {
margin: 10px auto;
}
.copyright {
text-align: center;
margin: 10px auto;
}
</style>
</head>
<body>
<div class="layout">
<header class="header">
<a href="javascript:;">
<img src="https://img-blog.csdnimg.cn/2022010610501343027.jpeg" alt="">
</a>
</header>
<nav class="nav">
<section>
<div class="pub"></div>
<div class="sub">
<a href="javascript:;">海外酒店</a>
<a href="javascript:;">团购</a>
<a href="javascript:;">特惠酒店</a>
<a href="javascript:;">客栈公寓</a>
</div>
</section>
<section>
<div class="pub"></div>
<div class="sub">
<a href="javascript:;">火车票</a>
<a href="javascript:;">汽车票船票</a>
<a href="javascript:;">国际机票</a>
<a href="javascript:;">自驾专车</a>
</div>
</section>
<section>
<div class="pub"></div>
<div class="sub">
<a href="javascript:;">攻略身边</a>
<a href="javascript:;">邮轮</a>
<a href="javascript:;">周末游</a>
<a href="javascript:;">保险签证</a>
</div>
</section>
<section>
<div class="pub">
<a href="javascript:;">门票玩乐</a>
<a href="javascript:;">礼品卡</a>
</div>
<div class="sub">
<a href="javascript:;">美食</a>
<a href="javascript:;">全球购</a>
<a href="javascript:;">出境WIFI</a>
<a href="javascript:;">更多</a>
</div>
</section>
</nav>
<section class="other">
<a href="javascript:;">
<img src="https://img-blog.csdnimg.cn/2022010610501376655.png" alt="">
</a>
<a href="javascript:;">
<img src="https://img-blog.csdnimg.cn/2022010610501369010.png" alt="">
</a>
</section>
<footer class="footer">
<nav>
<a href="javascript:;">电话预订</a>
<a href="javascript:;">下载客户端</a>
<a href="javascript:;">我的</a>
</nav>
<p class="link">
<a href="javascript:;">网站地图</a> |
<a href="javascript:;">ENGLISH</a> |
<a href="javascript:;">电脑版</a>
</p>
<p class="copyright">©8888 XXXXXX</p>
</footer>
</div>
</body>
</html>5.CSS3的自定义字体、自定义字体图标
◆开发人员可以为自己的网页指定特殊的字体（web字体、图标字体），无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。支持程度比较好，甚至IE低版本浏览器也能支持。
◆那些字体都是通过svg文件转换而成的，你可以通过AI来生成svg文件，然后拿svg文件到一些字体生成网站去转换一些就可以了，你也可以直接下载免费的字体文件。
◆当需要为不同浏览器准备不同格式的字体时，需要通过字体生成工具来生成各种格式的字体，于是无需在意字体格式间的区别差异，推荐字体下载的网站http://www.zhaozi.cn/（找字网）、http://www.youziku.com/ （有字库）、http://iconfont.cn/（阿里妈妈）、http://www.iconsvg.com/（SVG素材）、http://fontawesome.dashgame.com/（Font Awesome一套绝佳的图标字体库和CSS框架）
6.使用自定义字体说明注意，不同浏览器所支持的字体格式是不一样的
◆TureTpe(.ttf)格式
.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
◆OpenType(.otf)格式
.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；
◆Web Open Font Format(.woff)格式
woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
◆Embedded Open Type(.eot)格式
.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；
◆SVG(.svg)格式
.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；
7.引用特殊字体的语法
/* 如果要在网页中使用web字体（用户电脑上没有这种字体），*/
/* 声明字体*/
/* 告诉浏览器 去哪找这个字体*/
@font-fack{
font-family: 'webfont';
src: url('font/webfont.eot'); /* IE9*/
src: url('font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/webfont.woff') format('woff'), /* chrome、firefox */
url('font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
/* 定义一个类名，谁加这类名，就会使用webfont字体*/
.webfont{
font-family: 'webfont';
}//使用
<p class="webfont">谁使用就给谁加上这个类</p>◆使用自定义的web字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3-使用自定义的web字体</title>
<style>
@font-face {
font-family: 'webfont';
src: url('data:application/octet-stream;base64,ZA4AAHwNAAABAAIAAAAAAAIABQMAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAZI2qDgAAAAAAAAAAAAAAAAAAAAAAADAATgBvAHQAbwAgAFMAYQBuAHMAIABTACAAQwBoAGkAbgBlAHMAZQAgAFQAaABpAG4AAAAOAFIAZQBnAHUAbABhAHIAAAAWAFYAZQByAHMAaQBvAG4AIAAxAC4AMAAAADAATgBvAHQAbwAgAFMAYQBuAHMAIABTACAAQwBoAGkAbgBlAHMAZQAgAFQAaABpAG4AAAAAAAABAAAACwCAAAMAMEdTVUKw/rPtAAABOAAAAEJPUy8ypYhgvwAAAXwAAABWY21hcGkjPCEAAAH0AAAB9GdseWYed8WVAAAD/AAABeBoZWFkEI12DwAAAOAAAAA2aGhlYQe0A3kAAAC8AAAAJGhtdHgfQAAAAAAB1AAAACBsb2NhB1wFiAAAA+gAAAASbWF4cAEaAHYAAAEYAAAAIG5hbWWbc376AAAJ3AAAAypwb3N07j+2AgAADQgAAABzAAEAAANw/4gAWgPoAAAAAAPoAAEAAAAAAAAAAAAAAAAAAAAIAAEAAAABAAAOqo1kXw889QALA+gAAAAA1sMZGwAAAADWwxkbAAD/tAPoA0AAAAAIAAIAAAAAAAAAAQAAAAgAagAIAAAAAAACAAAACgAKAAAA/wAAAAAAAAABAAAACgAeACwAAURGTFQACAAEAAAAAAAAAAEAAAABbGlnYQAIAAAAAQAAAAEABAAEAAAAAQAIAAEABgAAAAEAAAAAAAED6AGQAAUACAJ6ArwAAACMAnoCvAAAAeAAMQECAAACAAUDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFBmRWQAQE9g/wwDcP+IAFoDcAB4AAAAAQAAAAAAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAAAAABQAAAAMAAAAsAAAABAAAAZAAAQAAAAAAigADAAEAAAAsAAMACgAAAZAABABeAAAAEAAQAAMAAE9gUiliEWWHcjGNPv8M//8AAE9gUiliEWWHcjGNPv8M//8AAAAAAAAAAAAAAAAAAAABABAAEAAQABAAEAAQABAAAAABAAIAAwAEAAUABgAHAAABBgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAABkAAAAAAAAAAcAAE9gAABPYAAAAAEAAFIpAABSKQAAAAIAAGIRAABiEQAAAAMAAGWHAABlhwAAAAQAAHIxAAByMQAAAAUAAI0+AACNPgAAAAYAAP8MAAD/DAAAAAcAAAAAAHoA5gGAAdACcgLSAvAAAAAEAAD/uAOzAzsACwA0ADwATQAAAR4DFwcuAy8BERQOAiMuAScWNjcyNREjDgEHJz4DNxcOAQchNxcPAQYHJzY/AQE+ATcXDgEHAwYHESMRDgEHLgEnPgM3AyAYLCYcBxwIHCUrF24MHTkuAgYEKDwKEcAUMhwZGzAoIQweCxwRAdQHEgsXBgUZCAkS/bAzThgfGlEyGy9AHSBEIwMOBShNRTsXAaopXFtXIwkjV1xbKbL9lhQSCgEHEAgCAQERAms4YSgRJV1pcToGM2EvAggzZRcSBh8tWP4CP7BhBma1QQLwdWn9ZgJrMFUkBQ8EJ2Bsdj0AAwAA/7sDggM4ABAAFABHAAABERQOAiMuAScWNzM+ATURBzMRIwEzFSMVFh8BFh8BBycmLwIRIxEOAwcmLwE+AzcjNTM1DgEHLwE+AzcXDgEHA4ISI0pFAgcEOSo2Dg3WHR3+tOrqEB8/IR0pEyUYHDgxHRU2PUAeBAYLIEVBOBPe6DhvNQQHOHp0ZCIaJmM5Azj8vhkTCgEGEAcCAQIKDwNCbv3hAWIdFBAgRCMgLhUqGx89NP4EAgM0aWBTHQYHCx9YaHE3HdgLEQcODAcTGBoPGA8bCwAAAgAA/7YDuAM2AFwAaAAAAQ4BBx4BMzI2Nx4BFw4DIyImJw4BBy8BPgE3LgEnIRU3FwcRFA4CLwEWPgI1EQcGByc2PwE1IzUzNQ4BByc+AzcXDgEHFSEuASczHgEXIRUhHgEXPgE/AS4DJzceAxcDbSJfOSNaNxkXBQUQBwMKEx0WQGQkNnhBCwxFfjgUHgv+9coDzREiSz8MNlEbCn48Mg4yQIjv7zVrMws0cWpdIRkjVzEBCAYIAR4BBwYBPf7HCRwSM1QgGg0nLzEYGRcyLicOAadCgTtmb1loBAcCO1AxFnRoNFkhCwsjXTlCnlvRMhs1/u8ZFAkCAR4CAQIJDgEMIBAMHQsQIdgd0AwVCBgJFxoaDhcOGgvXRpVQUZVFHVWSPTd2PK8SLTAvFBAULi4sEQADAAD/vAO6A0AAHAAjAC8AAAEOAQceARcOAQcuAScOAQcuASc+ATcuAScjNSEVIR4BFz4BNycuAyc3HgMXAxExgVVa138FDAV/11pY1YMDDQWD1FdXhS6bA3v9Py2AVVF8LeUGExcaDRsNGxgTBgJogc5RVHkiBQ4HJHpVUHguBhEFK3ZPVdJ5HR1zxlNPxHkyDycqKxIJEikqJw8AAAAABAAA/8YDlAMyADIAOQBbAGkAACUOAQceARcOAQcuAScOAQcuASc+ATcuAScOAQcuASc+ATcjNTM2NxcOAQchFSEOAQchNwUeARc+ATclIzUzLgEnNx4BFzMuASc3HgEXMz4DNxcOAQczFSM1ISUOAwcmLwE+AzcDESFiPEikVgUKA1mrS0OWTQIIBEmOPzxkJDCCWAIMBXWYLdHbDwwdBgwIAbT+QwkWDAGXB/5tJWU8OFog/ZsdtAgZDhoQHAfDCBgMGw0aCHoMGxoXCB0UMRfZHf0TAtE/rcLIWwECBVrJwao7+zpaIyAtCwYPCA0zJSMxDwYQBQ4qHyBPMFuMNQUQBUHJjR43OQUdNBoeHTkaAh8tTB4dSy/OlB1FHgYgShwdTCAEIk8cESkqKhENJE4glHfoDBIOCQIGCA0CCg0TCwAACAAA/7YDoQMRAAsADwATABcAGwAnAC8APQAAARUhFTMVITUzNSE1EzM1IxczNSMzFTM1JyMVMwMeAxcHLgMnNxEhESMRIRElDgMHJyYnPgM3A6H+1+79G+f+3VnKyufW1vPR7tbWPTJkXVMgFSBQW2Q08/3rHQJP/uUKMmaiegYEA3idYS4IAxEdZ87OZx3+y5SUlJSUhGf9yRAiJCIQGBAiJCQRAgEJ/vcBJv7aylR2Ti8NDggFDCtIbE4AAAAAAQAA/7QBDQDkABAAABc+ATcGIyImNDYzMhYVFAYHbDo+AwsNGB4hFB8gU0EzHVJBBBk5GTMqTmobAAAAAAASAN4AAQAAAAAAAAAUAAAAAQAAAAAAAQAYABQAAQAAAAAAAgAHACwAAQAAAAAAAwAYADMAAQAAAAAABAAYAEsAAQAAAAAABQALAGMAAQAAAAAABgAYAG4AAQAAAAAACgArAIYAAQAAAAAACwATALEAAwABBAkAAAAoAMQAAwABBAkAAQAwAOwAAwABBAkAAgAOARwAAwABBAkAAwAwASoAAwABBAkABAAwAVoAAwABBAkABQAWAYoAAwABBAkABgAwAaAAAwABBAkACgBWAdAAAwABBAkACwAmAiYKQ3JlYXRlZCBieSB3ZWJmb250Ck5vdG8gU2FucyBTIENoaW5lc2UgVGhpblJlZ3VsYXJOb3RvIFNhbnMgUyBDaGluZXNlIFRoaW5Ob3RvIFNhbnMgUyBDaGluZXNlIFRoaW5WZXJzaW9uIDEuME5vdG8gU2FucyBTIENoaW5lc2UgVGhpbkdlbmVyYXRlZCBieSBzdmcydHRmIGZyb20gRm9udGVsbG8gcHJvamVjdC5odHRwOi8vZm9udGVsbG8uY29tAAoAQwByAGUAYQB0AGUAZAAgAGIAeQAgAHcAZQBiAGYAbwBuAHQACgBOAG8AdABvACAAUwBhAG4AcwAgAFMAIABDAGgAaQBuAGUAcwBlACAAVABoAGkAbgBSAGUAZwB1AGwAYQByAE4AbwB0AG8AIABTAGEAbgBzACAAUwAgAEMAaABpAG4AZQBzAGUAIABUAGgAaQBuAE4AbwB0AG8AIABTAGEAbgBzACAAUwAgAEMAaABpAG4AZQBzAGUAIABUAGgAaQBuAFYAZQByAHMAaQBvAG4AIAAxAC4AMABOAG8AdABvACAAUwBhAG4AcwAgAFMAIABDAGgAaQBuAGUAcwBlACAAVABoAGkAbgBHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAHMAdgBnADIAdAB0AGYAIABmAHIAbwBtACAARgBvAG4AdABlAGwAbABvACAAcAByAG8AagBlAGMAdAAuAGgAdAB0AHAAOgAvAC8AZgBvAG4AdABlAGwAbABvAC4AYwBvAG0AAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgBAgEDAQQBBQEGAQcBCAEJAAhjaWQxMDM2MQhjaWQxMTU4OAhjaWQxODkyNgd1bmk2NTg3CGNpZDI2MTY2CGNpZDM5MjE0CGNpZDU5MDAzAAAA'); /* IE9*/
src: url('font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/octet-stream;base64,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') format('woff'), /* chrome、firefox */ url('data:application/octet-stream;base64,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') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
.webfont {
font-family: webfont;
}
</style>
</head>
<body>
<p class="webfont">贾文利</p>
<p class="webfont">贾文丽</p>
</body>
</html>◆使用下载的字体图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@font-face {
font-family: 'iconfont';
src: url('data:application/octet-stream;base64,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sDIssAAWsAMlsAIlRyNHI2GwAFRYLiA8IyEbsAIlsAIlRyNHI2EgsAUlsAQlRyNHI2GwBiWwBSVJsAIlYbABRWMjIFhiGyFZY7ABRWJgIy4jICA8ijgjIVktsDMssAAWILAJQyAuRyNHI2EgYLAgYGawgGIjICA8ijgtsDQsIyAuRrACJUZSWCA8WS6xJAEUKy2wNSwjIC5GsAIlRlBYIDxZLrEkARQrLbA2LCMgLkawAiVGUlggPFkjIC5GsAIlRlBYIDxZLrEkARQrLbA3LLAuKyMgLkawAiVGUlggPFkusSQBFCstsDgssC8riiAgPLAEI0KKOCMgLkawAiVGUlggPFkusSQBFCuwBEMusCQrLbA5LLAAFrAEJbAEJiAuRyNHI2GwBkUrIyA8IC4jOLEkARQrLbA6LLEJBCVCsAAWsAQlsAQlIC5HI0cjYSCwBCNCsAZFKyCwYFBYILBAUVizAiADIBuzAiYDGllCQiMgR7AEQ7CAYmAgsAArIIqKYSCwAkNgZCOwA0NhZFBYsAJDYRuwA0NgWbADJbCAYmGwAiVGYTgjIDwjOBshICBGI0ewACsjYTghWbEkARQrLbA7LLAuKy6xJAEUKy2wPCywLyshIyAgPLAEI0IjOLEkARQrsARDLrAkKy2wPSywABUgR7AAI0KyAAEBFRQTLrAqKi2wPiywABUgR7AAI0KyAAEBFRQTLrAqKi2wPyyxAAEUE7ArKi2wQCywLSotsEEssAAWRSMgLiBGiiNhOLEkARQrLbBCLLAJI0KwQSstsEMssgAAOistsEQssgABOistsEUssgEAOistsEYssgEBOistsEcssgAAOystsEgssgABOystsEkssgEAOystsEossgEBOystsEsssgAANystsEwssgABNystsE0ssgEANystsE4ssgEBNystsE8ssgAAOSstsFAssgABOSstsFEssgEAOSstsFIssgEBOSstsFMssgAAPCstsFQssgABPCstsFUssgEAPCstsFYssgEBPCstsFcssgAAOCstsFgssgABOCstsFkssgEAOCstsFossgEBOCstsFsssDArLrEkARQrLbBcLLAwK7A0Ky2wXSywMCuwNSstsF4ssAAWsDArsDYrLbBfLLAxKy6xJAEUKy2wYCywMSuwNCstsGEssDErsDUrLbBiLLAxK7A2Ky2wYyywMisusSQBFCstsGQssDIrsDQrLbBlLLAyK7A1Ky2wZiywMiuwNistsGcssDMrLrEkARQrLbBoLLAzK7A0Ky2waSywMyuwNSstsGossDMrsDYrLbBrLCuwCGWwAyRQeLABFTAtAABLuADIUlixAQGOWbkIAAgAYyCwASNEILADI3CwDkUgIEu4AA5RS7AGU1pYsDQbsChZYGYgilVYsAIlYbABRWMjYrACI0SzCgkFBCuzCgsFBCuzDg8FBCtZsgQoCUVSRLMKDQYEK7EGAUSxJAGIUViwQIhYsQYDRLEmAYhRWLgEAIhYsQYBRFlZWVm4Af+FsASNsQUARAAAAA=='); /* IE9*/
src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/octet-stream;base64,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') format('woff'), /* chrome、firefox */ url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: iconfont;
font-size: 100px;
color: #f00b;
}
nav {
width: 500px;
margin: 150px auto;
}
section {
width: 300px;
margin:-120px auto;
font-size: 50px;
color: #f00b;
}
section::before {
/*图标字体是给伪元素的content属性赋值时，
需要去掉前面三个字符改用\替代才能够显示图标字体，
否则就会只显示编码*/
/*content: '';*/
content: '\e628';
color: #0f0b;
font-size: 80px;
font-family: iconfont;
}
section span {
line-height: 80px;
vertical-align:top;
}
</style>
</head>
<body>
<nav class=iconfont>
<span></span>
<span></span>
<span></span>
</nav>
<section>
<span>欢迎扫码</span>
</section>
</body>
</html>8.css3查询各种浏览器兼容性问题的网站：https://caniuse.com/，通过http://caniuse.com/ 可查询CSS3各特性的支持程度，一般兼容性处理的常见方法是为属性添加私有前缀，如不能解决，应避免使用，无需刻意去处理CSS3的兼容性问题，需要知道每个属性，能被那个版本的浏览器支持即可。
9.鼠标滚轮滚动的事件：
window.onmousewheel=function(){}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标滚轮滚动的事件（onmousewheel）</title>
<style>
body {
height: 2000px;
}
p {
position: fixed;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<p></p>
<script>
window.onload = function () {
var number = 0;
window.onmousewheel = function () {
number++;
document.querySelector("p").innerHTML = "鼠标滚动了" + number + "下";
}
}
</script>
</body>
</html>10.使用jQuery-fullPage全屏滚动插件来DIY
◆基本使用：jQuery fullPage全屏滚动插件：http://www.dowebok.com/77.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用jQuery-fullPage全屏滚动插件</title>
<link rel="stylesheet" href="css/javascript.fullPage.css">
<script src="js/jquery.min.js"></script>
<!--<script src="js/javascript.fullPage.min.js"></script>-->
<script src="js/jquery.fullPage.min.js"></script>
<style>
#dowebok {
text-align: center;
}
h3 {
width: 200px;
height: 200px;
background-color: #000;
text-align: center;
line-height: 200px;
transition: all 200ms linear 0s;
transform: translate(-200px, 0px);
color: #fff;
}
.section.current h3 {
transition: all 200ms linear 0s;
transform: translate(700px, 20px);
}
</style>
<script>
$(function () {
$('#dowebok').fullpage({
sectionsColor: ["#f00b", "#0f0b", "#ff0b", "#0ffb", "#f0fb"],
slidesColor: ["#fffb", "#000b", "#f0fb", "#00fb"],
loopBottom: true,
afterLoad: function (link, index) {
// console.log(link);
// console.log(index);
// setTimeout()
//开闭原则 移除所有的
$(".section").removeClass("current");
//再给当前的添加
setTimeout(function () { //延迟200ms添加类
$(".section").eq(index - 1).addClass("current");
}, 200)
}
});
});
</script>
</head>
<body>
<div id="dowebok">
<div class="section"><h3>第一屏</h3></div>
<div class="section"><h3>第二屏</h3></div>
<div class="section">
<div class="slide"><h3>第三屏的第一屏</h3></div>
<div class="slide"><h3>第三屏的第二屏</h3></div>
<div class="slide"><h3>第三屏的第三屏</h3></div>
<div class="slide"><h3>第三屏的第四屏</h3></div>
</div>
<div class="section"><h3>第四屏</h3></div>
<div class="section"><h3>第五屏</h3></div>
</div>
<!--<div id="dowebok">-->
<!--<div class="section">-->
<!--<h3>第一屏</h3>-->
<!--</div>-->
<!--<div class="section">-->
<!--<h3>第二屏</h3>-->
<!--</div>-->
<!--<div class="section">-->
<!--<h3>第三屏</h3>-->
<!--</div>-->
<!--<div class="section">-->
<!--<h3>第四屏</h3>-->
<!--</div>-->
<!--</div>-->
</body>
</html>◆360动画网页：这个很专业，很好看的，只不过素材有点多。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<meta name="viewport"-->
<!--content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-->
<title>使用css3配合全屏滚动插件制作360动画网页</title>
<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<style>
.section {
overflow: hidden;
position: relative;
}
/*第一屏*/
.first {
/*padding-top: 80px;*/
}
.first .logo {
width: 251px;
height: 186px;
margin: 0 auto;
background-image: url(images/logo.png);
}
.first .text {
text-align: center;
line-height: 1;
margin: 85px 0 45px;
}
.first img {
margin: 0 24px;
opacity: 0;
}
.first .info {
height: 49px;
background: url(images/info_1.png) center center no-repeat;
}
/* 第一屏的动画*/
.current.first .text > img {
transition: all 1s linear 0ms;
margin: 0 10px;
opacity: 1;
}
/*第二屏*/
.second {
padding: 0 100px;
}
.second > div {
display: flex;
justify-content: space-between;
align-items: center;
}
.second .shield {
width: 428px;
height: 498px;
}
.second img {
display: block;
float: left;
}
.second img:nth-child(1) {
transform: translate(35px, 78px) rotate(45deg);
}
.second img:nth-child(2) {
transform: translate(135px, 282px) rotate(15deg);
}
.second img:nth-child(3) {
transform: translate(187px, 62px) rotate(15deg);
}
.second img:nth-child(4) {
transform: translate(10px, 162px) rotate(30deg);
}
.second img:nth-child(5) {
transform: translate(465px, 522px) rotate(30deg);
}
.second img:nth-child(6) {
transform: translate(480px, 62px) rotate(90deg);
}
.second img:nth-child(7) {
transform: translate(180px, -305px) rotate(80deg);
}
.second img:nth-child(8) {
transform: translate(300px, -22px) rotate(70deg);
}
.second img:nth-child(9) {
transform: translate(280px, -322px) rotate(60deg);
}
.second .info {
width: 635px;
height: 309px;
background: url(images/info_2.png);
}
/*动画*/
.current.second img {
transition: all 1s linear 0ms;
transform: translate(0px, 0px) rotate(0deg);
}
/*第三屏*/
.third {
padding: 0 60px;
}
.third > div {
display: flex;
justify-content: space-between;
align-items: center;
}
.third .info {
width: 631px;
height: 278px;
background: url(images/info_3.png);
}
.third .circle {
width: 453px;
height: 449px;
background: url(images/circle.png);
animation: circle 2s infinite ease-in-out alternate 0ms;
}
.third .rocket {
position: absolute;
bottom: 0;
left: 0;
width: 204px;
height: 204px;
background: url(images/rocket.png);
transform: translate(500px, 210px);
}
/*动画*/
.current.third .rocket {
transition: all 1s ease-in-out 0s;
transform: translate(900px, -250px);
}
@keyframes circle {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/*第四屏*/
.fourth {
padding: 0 85px;
}
.fourth > div {
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
}
.fourth .search {
width: 529px;
height: 320px;
position: relative;
transform: translateX(-100%);
}
.fourth .input {
width: 529px;
height: 66px;
background: url(images/search.png);
}
.fourth .key {
position: absolute;
left: 20px;
top: 24px;
width: 0;
/*width: 100px;*/
height: 22px;
background: url(images/key.png) left center no-repeat;
}
.fourth .wrap {
width: 529px;
height: 393px;
transform: translateY(-13px);
overflow: hidden;
}
.fourth .result {
width: 100%;
height: 100%;
background: url(images/result.png) no-repeat;
transform: translateY(-100%);
}
.fourth .info {
width: 612px;
height: 299px;
background: url(images/info_4.png);
}
/*动画模块*/
.current.fourth .search {
transition: all 500ms ease-in-out 0ms;
transform: translateX(0);
}
.current.fourth .key {
transition: all 1500ms steps(5) 1000ms;
width: 100px;
}
.current.fourth .result {
transition: all 1s ease-in-out 2500ms;
transform: translateY(0);
}
/*第五屏*/
.fifth {
/*padding-top: 30px;*/
}
.fifth > div {
display: flex;
flex-direction: column;
}
.fifth .info {
height: 135px;
margin: 30px 0;
background: url(images/info_5.png) center center no-repeat;
}
.fifth .broswer {
width: 1004px;
margin: 0 auto;
flex: 1;
background-color: rgba(255, 255, 255, 0.15);
position: relative;
}
.fifth .toolbar {
height: 80px;
background: url(images/toolbar.png) left bottom no-repeat;
position: relative;
opacity: 0;
}
.leftline, .topline, .rightline, .bottomline {
position: absolute;
border-color: rgba(255, 255, 255, 0.5);
}
.leftline {
left: 0;
height: 100%;
border-left: 1px solid rgba(255, 255, 255, 0.5);
transform: translateY(-100%);
opacity: 0;
}
.topline {
top: 0;
width: 100%;
border-top: 1px solid rgba(255, 255, 255, 0.5);
transform: translateX(100%);
opacity: 0;
}
.rightline {
right: 0;
height: 100%;
border-right: 1px solid rgba(255, 255, 255, 0.5);
transform: translateY(100%);
opacity: 0;
}
.bottomline {
bottom: 0;
width: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.fifth .box {
position: absolute;
left: 70px;
top: 32px;
width: 0;
/*width: 920px;*/
height: 27px;
overflow: hidden;
}
.fifth .box span {
display: block;
width: 100%;
height: 100%;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 3px;
box-sizing: border-box;
}
.fifth .extra {
position: absolute;
right: 0;
bottom: 0;
width: 394px;
height: 29px;
background: url(images/extra.png);
/*opacity: 0;*/
}
.fifth .line {
width: 100%;
position: absolute;
bottom: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
/* 动画*/
/* 第一步：三条边 出现*/
.current.fifth .leftline,
.current.fifth .rightline,
.current.fifth .topline{
transition:all 1300ms ease-out 0ms;
transform:translate(0);
opacity:1;
}
/*工具栏出现*/
.current.fifth .box {
transition:width 800ms ease-in 1300ms;
width: 920px;
}
.current.fifth .toolbar,
.current.fifth .extra {
transition:opacity 500ms ease-in-out 2100ms;
opacity:1;
}
</style>
<script>
$(function () {
$("#dowebok").fullpage({
sectionsColor: ["#f00b", "#0f0b", "#ff0b", "#0ffb", "#00fb"],
afterLoad: function (link, index) {
$(".section").removeClass("current");
setTimeout(function () {
$(".section").eq(index - 1).addClass("current");
}, 100);
},
loopBottom: true,
loopTop: true
});
})
</script>
</head>
<body>
<div id="dowebok">
<!-- 第一屏 -->
<div class="section first">
<!-- LOGO -->
<div class="logo"></div>
<!-- 文字 -->
<div class="text">
<img src="./images/text_1.png" alt="">
<img src="./images/text_2.png" alt="">
<img src="./images/text_3.png" alt="">
<img src="./images/text_4.png" alt="">
<img src="./images/text_5.png" alt="">
<img src="./images/text_6.png" alt="">
<img src="./images/text_7.png" alt="">
<img src="./images/text_8.png" alt="">
</div>
<!-- 信息 -->
<div class="info"></div>
</div>
<!-- 第二屏 -->
<div class="section second">
<!-- 盾牌 -->
<div class="shield">
<img src="./images/shield_1.png" alt="">
<img src="./images/shield_2.png" alt="">
<img src="./images/shield_3.png" alt="">
<img src="./images/shield_4.png" alt="">
<img src="./images/shield_5.png" alt="">
<img src="./images/shield_6.png" alt="">
<img src="./images/shield_7.png" alt="">
<img src="./images/shield_8.png" alt="">
<img src="./images/shield_9.png" alt="">
</div>
<!-- 信息 -->
<div class="info"></div>
</div>
<!-- 第三屏 -->
<div class="section third">
<!-- 信息 -->
<div class="info"></div>
<!-- 圆环 -->
<div class="circle"></div>
<!-- 火箭 -->
<div class="rocket"></div>
</div>
<!-- 第四屏 -->
<div class="section fourth">
<!-- 搜索 -->
<div class="search">
<div class="key"></div>
<div class="input"></div>
<div class="wrap">
<div class="result"></div>
</div>
</div>
<!-- 信息 -->
<div class="info"></div>
</div>
<!-- 第五屏 -->
<div class="section fifth">
<!-- 信息 -->
<div class="info"></div>
<!-- 浏览器 -->
<div class="broswer">
<!-- 四边框 -->
<div class="leftline"></div>
<div class="topline"></div>
<div class="rightline"></div>
<div class="bottomline"></div>
<!-- 工具栏 -->
<div class="toolbar"></div>
<!-- 边框盒子 -->
<div class="box">
<span></span>
</div>
<div class="line"></div>
<!-- 其它 -->
<div class="extra"></div>
</div>
</div>
</div>
</body>
</html>11.两点注意事项
◆
seTimeout(function(),100);表示隔个100毫秒再执行一次，setTimeout只会执行一次，setInterval会循环执行。
◆子代选择器只能够针对元素选择器，不能够针对类选择器，后代选择器可以针对元素原则器和类选择器，如
.section.first.current>.text{}//是无效的，它使用的是 子代选择器；
但是.section.first.current .text{}//是有效的 ，它使用的是后代选择器；
.section.first.current .text>img{}//是有效的。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
