原理就是，先定义一个元素 ，然后定义动画XYZ轴偏移。
body > div > div:after {content: ""
position: absolute
top: -5px
box-shadow: 0 0 12px #fff
left: 50%
margin-left: -5px
width: 5px
height: 5px
border-radius: 50%
background-color: #fff
-webkit-animation: particle_ 2s infinite linear
animation: particle_ 2s infinite linear
} body > div:nth-of-type(4) > div, body > div:nth-of-type(4) > div:after {
-webkit-animation-delay: -1.5s
animation-delay: -1.5s
}
body > div > div {
width: 200px
height: 200px
position: relative
-webkit-transform-style: preserve-3d
-webkit-animation: trail_ 2s infinite linear
transform-style: preserve-3d
animation: trail_ 2s infinite linear
}
实施步骤：
建立一个BOX
在BOX中制作一个元素。
CSS动画定义BOX旋转按照你的轨迹。
通过。
-webkit-transform:rotateY( 0deg ) rotateZ( 0deg ) rotateX( 0deg )
-moz-transform:rotateY( 0deg ) rotateZ( 0deg ) rotateX( 0deg )
-o-transform:rotateY( 0deg ) rotateZ( 0deg ) rotateX( 0deg )
transform:rotateY( 0deg ) rotateZ( 0deg ) rotateX( 0deg )
来定义旋转方向，0是不旋转。0-360度是一圈。
-webkit-transition:transform 1s
transition:transform 1s
这是设置动画时间。
一个BOX完成后，复制box，摆在统一中心点后，设置Z轴的数字。
CSS 有 非常重要的 三个特性：层叠性、继承性、优先级。
相同选择器 给设置 相同的样式，此时一个样式就会 覆盖（层叠） 另一个冲突的样式。
层叠主要解决样式冲突的问题 。
层叠性原则：
CSS中的继承：子标签会继承父标签的某些样式，如 文本颜色 和 字号。
简单理解：子承父业。
当同一个元素指定多个选择器，就会有优先级的产生。
优先级注意点：
权重叠加 ：如果是复合选择器，则会有权重叠加，需要计算权重。
练习：
页面布局要学习三大核心： 盒子模型, 浮动 和 定位 .
学习好盒子模型能非常好的帮助我们布局页面.
网页布局过程：
网页布局的核心本质： <u> 就是利用 CSS 摆盒子 </u>。
所谓 盒子模型 ：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：<u>边框</u>、<u>外边距</u>、<u>内边距</u>、和 <u>实际内容</u>
border可以设置元素的边框。边框有三部分组成： 边框宽度(粗细)、 边框样式 、 边框颜色
语法：
CSS 边框属性允许你指定一个元素边框的 样式 和 颜色 。
语法
边框样式 border-style 可以设置如下值：
边框简写：
边框分开写法：
课堂要求：请给一个 200*200 的盒子，设置上边框为红色，其余边框为蓝色（提示：一定注意边框的层叠性）
border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
语法：
边框会额外增加盒子的实际大小。因此我们有两种方案解决:
padding 属性用于设置内边距，即 边框与内容 之间的距离。
padding 属性（简写属性）可以有一到四个值。
以上 4 种情况，我们实际开发都会遇到。
内边距会影响盒子实际大小
当我们给盒子指定 padding 值之后，发生了 2 件事情：
也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
解决方案：
<u>如果保证盒子跟效果图大小保持一致</u>，则 让 width/height 减去多出来的内边距大小 即可。
padding内边距可以撑开盒子,我们可以做非常巧妙的运用.
因为每个导航栏里面的字数不一样多,我们可以不用给每个盒子宽度了,直接给padding最合适。
相关取值:
padding内边距可以撑开盒子, 有时候,也会让我们去修改宽度。
现实开发时候，小米侧边栏，文字距离左侧的距离不能用text-indent调整，这样不精确，实际开发的做法是：给padding值，这样更加精确
如果盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小.
margin 属性用于设置外边距，即控制盒子和盒子之间的距离。
margin 简写方式代表的意义跟 padding 完全一致。
外边距可以让 块级 盒子 水平居中 ，但是必须满足两个条件：
① 盒子必须指定了宽度（width）。
② 盒子 左右的外边距 都设置为 auto 。auto----自动
常见的写法，以下三种都可以：
注意： 以上方法是让块级元素水平居中， 行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。
使用 margin 定义块元素的 垂直外边距 时，可能会出现外边距的合并。
主要有两种情况:
1. 相邻块元素垂直外边距的合并
2. 嵌套块元素垂直外边距的塌陷
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有 上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的 较大者这种现象被称为 相邻块元素垂直外边距的合并 。
解决方案：
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：
① 可以为父元素定义上边框。
② 可以为父元素定义上内边距。
③ 可以为父元素添加 overflow:hidden。
还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题，后面再总结。
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
注意： 行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距(因为设置了也不起作用)。但是转换为块级和行内块元素就可以了。
因为网页美工大部分效果图都是利用 PS（Photoshop） 来做的，所以以后我们大部分切图工作都是在 PS 里面完成。
因为网页美工大部分效果图都是利用 PS（Photoshop） 来做的，所以以后我们大部分切图工作都是在 PS 里面完成。
总结
标签都是有语义的, 合理的地方用合理的标签。比如产品标题 就用 h, 大量文字段落就用p
类名就是给每个盒子起了一个名字,可以更好的找到这个盒子, 选取盒子更容易,后期维护也方便。
大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现。
布局有很多种实现方式，同学们可以开始先模仿我的写法，然后再做出自己的风格。
最后同学们一定多运用辅助工具,比如屏幕画笔,ps等等
去掉 li 前面的 项目符号（小圆点）
语法：
圆角边框、盒子阴影、文字阴影
（重点记住前两个，文字阴影做了解）
在 CSS3 中，新增了 圆角边框 样式，这样我们的盒子就可以变圆角了。
border-radius 属性用于设置元素的外边框圆角。
语法：
radius 半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果
CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。
语法：
注意 ：
在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。
语法：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<title>fullpage</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Jesse">
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.js"></script>
</head>
<body>
<!-- <ul id="fullpageMenu" style="position:fixedtop:100pxright:20pxz-index:999">
<li data-menuanchor="page1" class="active"><a href="#page1">1</a></li>
<li data-menuanchor="page2" ><a href="#page2">2</a></li>
<li data-menuanchor="page3"><a href="#page3">3</a></li>
<li data-menuanchor="page4" ><a href="#page4">4</a></li>
<li data-menuanchor="page5" ><a href="#page5">5</a></li>
</ul>-->
<div id="header" style="position:fixedtop:20pxright:20pxfont-size: 30pxcolor:#fff">123</div>
<div id="fullpage">
<div class="section">section1</div>
<div class="section">section2</div>
<div class="section">
<div class="slide">Slide 1 </div>
<div class="slide">Slide 2 </div>
<div class="slide active">Slide 3 </div>
<div class="slide">Slide 4 </div>
</div>
<div class="section">section4</div>
<div class="section">section5</div>
</div>
<script>
$(document).ready(function() {
$(‘#fullpage‘).fullpage({
//配置项介绍
//sectionsColor为每个section设置background-color属性
sectionsColor:[‘green‘,‘orange‘,‘gray‘,‘red‘,‘yellow‘],
//controlArrows定义是否通过箭头来控制slide,默认true
controlArrows:false,
//verticalCentered定义每一页的内容是否垂直居中，默认true
verticalCentered:false,
//resize字体是否随窗口缩放而缩放，默认false
resize:true,
//scrollingSpeed设置滚动速度，单位毫秒，默认700
scrollingSpeed:1000,
//anchors定义锚链接，默认为[],定义锚链接时，值不要和页面中的任何ID或name相同，且不需要加#
anchors:[‘page1‘,‘page2‘,‘page3‘,‘page4‘,‘page5‘],
//lockAnchors是否锁定锚链接，默认为false,设为true后链接地址不会改变
// lockAnchors:true,
//easing定义页面section滚动的动画方式，默认为easeInOutCubic,若修改此项需引入jquery.easing插件
//css3是否使用CSS3 transforms来实现滚动效果，默认为true。若浏览器不支持CSS3，则会用Jquery来实现
//css3:false,
//loopTop滚动到最顶部后是否连续滚动到底部，默认为false
//loopBottom滚动到最低部后是否连续滚动到顶部，默认为false
//loopHorizontal横向slide幻灯片是否循环滚动，默认为true
//autoScrolling是否使用插件的滚动方式，默认为true,若为false则会出现浏览器自带滚动条
//scrollBar是否包含滚动条，默认为false,若为true浏览器自带滚动条出现
//paddingTop/paddingBottom设置每一个section顶部和底部的padding,默认为0
//fixedElements固定元素，默认为null,需要配置一个jquery选择器，在页面滚动时，fixElements设置的元素不滚动
fixedElements:"#header",
//keyboardScrolling是否可以使用键盘方向键导航，默认为true
//touchSensitivity在移动设备中滑动页面的敏感性，默认为5最高100，越大越难滑动
//continousVertical是否循环滚动，默认为false,注意这个属性和loopTop loopBottom不兼容，不能同时设置
//animateAnchor锚链接是否可以控制滚动动画，默认为true,若为false则锚链接定位失效
//recordHistory是否记录历史，默认为true,通过浏览器的前进后退来导航。若设置autoScrolling:false,那么这个属性将被关闭
//menu绑定菜单，设定的相关属性与anchors的值对应后，菜单可以控制滚动条，默认为false。可设置为菜单的jquery选择器
//menu:"#fullpageMenu",
//navigation是否显示导航，默认为false
navigation:true,
//navigationPosition导航小圆点的位置
navigationPosition:"right",
//navigationTooltips导航小圆点的提示，注意按顺序设置
navigationTooltips:[‘page1‘,‘page2‘,‘page3‘,‘page4‘,‘page5‘],
//showActiveTooltip是否显示当前页面的tooltip信息，默认为false
//slidesNavigation 是否显示横向幻灯片的导航，默认为false
slidesNavigation:true,
//slidesNavPosition横向导航的位置，默认为bottom，可以设置为top或bottom
slidesNavPositon:"top",
//scrollOverflow内容超过满屏后是否显示滚动条，默认为false,如果为true则会显示滚动条，若需滚动查看内容还需要jquery.slimscroll插件的配合
//sectionSelector:section选择器。默认为.section
//slideSelector:slide选择器，默认为.slide
//方法介绍
//$.fn.fullpage.***()
//moveSectionUp()向上滚动一页
//moveSectionDown()向下滚动一页
//moveTo(section,slide)section从1开始，slide从0开始
//silentMoveTo(section,slide)和moveTo一样，但是没有滚动效果
//moveSlideRight()幻灯片向右滚动
//moveSlideLeft()幻灯片向左滚动
//setAutoScrolling(boolean):动态设置autoScrolling
//setLockAnchors(boolean):动态设置lockAnchors
//setRecordHistory(boolean):动态设置recordHistory
//setScrollingSpeed(milliseconds):动态设置scrollingSpeed
//destory(type)销毁fullpage,type可以不写或者使用all
//reBuild()重新更新页面和尺寸，用于ajax请求改变页面结构后重建效果
//lazyLoading
})
})
</script>
</body>
</html>
