CSS-动画
id:2-1.wheel{
width: 70px;
height: 70px;
border: 2px solid #000000;
border-radius: 50%;
background-color: #6a6a6a;
bottom: 0px;
position: absolute;
animation: move 3s linear infinite;
}
.wheel:before{
content: "";
width: 4px;
height: 35px;
display: block;
background-color: #000;
position: absolute;
left: 33px;
}
/*关键帧动画*/
@keyframes move{
100%{
transform: translateX(350px) rotate(859.4deg); /*--- 度数：移动距离/(π*r^2)*360 ---*/
}
}
CSS-模拟太阳系行星运动
id:2-2以地球🌏为基准10s绕太阳一周公转，其他行星按照地球比例绕太阳公转。
CSS-动画属性steps()
id:2-3
兔斯基为例CSS：
animation:test 400ms steps(4) infinite;
steps(4)表示让整个动画在4个关键帧之间切换。这个兔斯基揉脸的图片中包含了4帧，所以这里设置了4。而且我们的动画时长是400ms，也就是说每一帧停留100ms，这就和普通的GIF动图达到了一样的效果。而且animation可以控制播放状态，PNG可以提供Alpha通道。不过animation这东西的兼容性目前还不咋样，能否用于正式项目还有待考证。
CSS-clip-path属性
id:2-4
img{
-webkit-clip-path: circle(25% at 50% 50%);
clip-path: circle(25% at 50% 50%);
transition: clip-path .5s ease;
cursor: pointer;
}
img:hover{
-webkit-clip-path: circle(75% at 50% 50%);
clip-path: circle(75% at 50% 50%);
}
clip-path 暂时移动端浏览器部分支持 所以需要加-webkit-title
id:2-5面向对象编程原则：
1).把共性和特性或者会变和不变的分离出来；
2).少用继承，多用组合；
3).低耦高聚；
4).开闭原则；
5).单一职责原则。
---摘抄至《高效前端：Web高效编程与优化实践》
CSS-居中显示弹出框
id:2-6解决弹出框左右上下居中，使用relative定位，设置top为50%，在设置margin-top为元素高度的负一半。一开始设置的top为了让弹框起始位置在页面中间，然后设置margin-top为弹框高度的一半取负，这样使得弹框在页面中间位置再往上移一半自身的高度，这样就刚好在正中间了，左右居中也可以类似处理。
这种办法的缺点是需要知道高度，无法根据内容长短自适应。所以就有了transform的方法，将margin-top一个具体像素的负值改成，这里设置成transform:translate(-50%,-50%)，由于translate里面的百分比是根据元素本身的高度计算的，于是就可以达到自适应的效果。
PS:
word-wrap ： normal || break-word
(1)normal为默认值，当其值为normal控制连续文本换行(允许内容顶开容器的边界，换句话说内容可以撑破容器);
(2)break-word将内容在边界内换行。
自适应-分栏排列
id:2-7left
middle
right
flex-grow:1的作用是把middle的宽度设置为flex容器的剩余宽度，就达到了自适应的目的
自适应-多列等高
id:2-8HTML5
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。
CSS3
CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
JavaScript
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
.case2_8_1 {
display: table;
border-spacing: 20px;
}
.case2_8_1 > div {
display: table-cell;
width: 1000px;
padding: 0 6px;
border-radius: 5px;
text-align: left;
background-color: bisque;
border: 1px solid black;
}
前向选择器
id:2-9条件：当它是第一个元素，并且还是倒数第二个的时候就隐藏.这样就实现了有两个选项的时候隐藏第一个，只有一个的时候不隐藏的目的，case这里有两个元素所以第一元素满足条件就隐藏。
.case2_9_1:nth-of-type(1):nth-last-of-type(2){display: none;}
CSS伪元素计算
id:2-11你选中了 种饮品
.case2_11_1{
counter-reset: ff;
}
.case2_11_1 input:checked{
counter-increment: ff;
}
.count:before{
ontent: counter(ff);
}
CSS伪元素画分割线
id:2-11-1Or
.or:before, .or:after{
content: "";
width: calc((100% / 2) - 30px);
height: 2px;
background-color: darkorange;
position: absolute;
top: 15px;
}
.or:before{
left: 0;
}
.or:after{
right: 0;
}
CSS画三角形
id:2-12
点击或者鼠标悬浮这里
自适应-排名框
id:2-13
排名
1
你在本周好友逗逼榜中排名第1名
排名
99
你在本周好友逗逼榜中排名第99名
排名
999
你在本周好友逗逼榜中排名第999名
排名
999
你在本周好友逗逼榜中排名999名之后
END