3D conversion
【cube】
[Effect] paper
[Cut] Carousel Figure Case
Beauty Case [Album]
Animation
Animation can be precisely controlled by one or a group of a plurality of animation nodes used to implement complex animations.
Animation and transition difference:
1. 过渡必须触发，需要两个状态的改变。
2. 动画可以一直运行下去，不需要触发。实现效果与过渡差不多The basic steps for a movie:
//1.通过@keyframes指定动画序列
//2.通过百分比或者from/to将动画分割成多个节点（from to 只能设置两个状态的变化，满足不了复杂动画的要求，复杂使用百分比）from to 等于 0% 100%
//3.在各个节点中分别定义样式
//4.通过animation将动画应用于相应的元素Detailed animation
animation is a compound attribute, a total of eight parameters
animation-name:动画名称，由@keyframes定义的
animation-duration：动画的持续时间
animation-timing-function：动画的过渡类型
animation-delay：动画的延迟时间
animation-iteration-count：动画的循环次数（infinite无限次）
animation-direction：设置动画在循环中是否反向运动
animation-fill-mode：设置动画时间之外的状态，动画的最终状态（forwards 停留在最终状态）
animattion-play-state:设置动画的状态。动态状态配合：hover使用Animation library
https://daneden.github.io/animate.css/
Fonts icon
Then we often pages commonly used small icon, made sprite, and then to adjust the position by the background-position, but the need to introduce the picture, and the picture size changes if distortion. You can use the font picture in CSS3, namely using the icon with the use of the same text.
advantage:
1, all packaged into an icon font libraries, reducing the request;
2, has a property vector, can ensure clarity;
3, flexible, easy to maintain;
Alibaba vector icons :( can customize) http://www.iconfont.cn/plus/collections/index?type=1
Font Awesome use http://fontawesome.dashgame.com/
Elastic layout (stretch layout)
Layout: in fact, the adjustment element layout in the horizontal and vertical directions.
CSS3 layout has done a very big improvement, making us the layout of the block-level elements of the arrangement becomes very flexible, very adaptable, its powerful scalability, can play a significant role in the responsive Open.
[Demo: 01- stretch layout first experience .html]
When a box is provided to the display: After flex, the box will have a main shaft and side shaft concept.
Spindle: container main spindle Flex Flex project to configure the default orientation is horizontal
side axis: axis perpendicular to the spindle axis side is referred to, by default vertical
direction: default spindle from left to right , the default side shaft from the upper to the under
[Image dump the chain fails, the source station may have security chain mechanism, it is recommended to save the picture down uploaded directly (img-wpUM2YAR-1583941642738) (images / flex01.png)]
flex-direction
flex-diretion mainly used to adjust the direction of the spindle, the default is a horizontal direction
Can understand, in general, very little adjustment spindle direction.
Optional value
row：主轴方向为水平向右
column：主轴方向为竖直向下
row-reverse:主轴方向为水平向左
column-reverse:主轴方向是竖直向上。justify-content (Key)
justify-content is mainly used to set the main direction of alignment , optional values are:
Optional values:
flex-start: 弹性盒子元素将向起始位置对齐
flex-end: 弹性盒子元素将向结束位置对齐。
center: 弹性盒子元素将向行中间位置对齐
space-around: 弹性盒子元素会平均地分布在行里
space-between:第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的。align-items (Key)
align-items for adjusting its side shaft of the embodiment , values are optional:
flex-start： 元素在侧轴的起始位置对其。
flex-end： 元素在侧轴的结束位置对其。
center： 元素在侧轴上居中对其。
stretch： 元素的高度会被拉伸到最大（不能给死高度）。flex-wrap
flex-wrap container be single attribute control flex or more lines, the default does not wrap
nowrap： 不换行（默认），会压缩子盒子的宽度。
wrap： 当宽度不够的时候，会换行。align-content
align-content is provided to flex the arrangement of the plurality of rows of the container.
flex-start： 各行向侧轴的起始位置堆叠。
flex-end： 各行向弹性盒容器的结束位置堆叠。
center： 各行向弹性盒容器的中间位置堆叠。
space-between： 各行在侧轴中平均分布。
space-around： 第一行贴上边，最后一个行贴下边,其他行在弹性盒容器中平均分布。
stretch：拉伸，不设置高度的情况下。Difference align-items of the align-content
align-items调整的是侧轴的对其方式，不换行一般用align-items
align-content:必须是多行才生效，如果单行，没有效果。换行了就用align-content。flex properties
The above properties are speaking to the parent box set, the next few attributes are provided to the sub-box.
flex attribute is used to set how to allocate the sub-spindle cartridge space
flex:1order property
Order attribute defines the order item. The smaller the value, the more forward arrangement, the default is 0.
order:1;align-self align-items:
align-self is provided at a position of the side of the shaft, but the sub-element to align-self set, higher priority than the priority of the align-items.
取值与align-items的取值一样。Ruan Yifeng's blog http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[Exercise: six-sided dice God]