HTML5 CSS3

conversión 3D

[Cubo]

papel [Efecto]

Figura Case Carousel [Cut]

Caso de belleza [Álbum]

animación

La animación puede ser controlada con precisión por uno o un grupo de una pluralidad de nodos de animación utiliza para implementar animaciones complejas.

Animación y transición diferencia:

1. 过渡必须触发，需要两个状态的改变。
2. 动画可以一直运行下去，不需要触发。实现效果与过渡差不多

Los pasos básicos para una película:

//1.通过@keyframes指定动画序列
//2.通过百分比或者from/to将动画分割成多个节点（from to 只能设置两个状态的变化，满足不了复杂动画的要求，复杂使用百分比）from to 等于 0% 100%
//3.在各个节点中分别定义样式
//4.通过animation将动画应用于相应的元素

animación detallada

animación es un atributo compuesto, un total de ocho parámetros

animation-name:动画名称，由@keyframes定义的
animation-duration：动画的持续时间
animation-timing-function：动画的过渡类型
animation-delay：动画的延迟时间
animation-iteration-count：动画的循环次数（infinite无限次）
animation-direction：设置动画在循环中是否反向运动
animation-fill-mode：设置动画时间之外的状态，动画的最终状态（forwards 停留在最终状态）
animattion-play-state:设置动画的状态。动态状态配合：hover使用

biblioteca de animación

https://daneden.github.io/animate.css/

icono Fuentes

A continuación, a menudo las páginas usadas comúnmente pequeño icono, hecho sprite, y luego ajustar la posición por el background-position, pero la necesidad de introducir la imagen, y los cambios de tamaño de imagen si la distorsión. Puede utilizar la imagen de la fuente en CSS 3, es decir, usando el icono con el uso del mismo texto.

ventajas:

1, todo empaquetado en un icono de bibliotecas de fuente, la reducción de la solicitud;

2, tiene un vector propio, puede garantizar la claridad;

3, flexible, fácil de mantener;

Alibaba iconos vectoriales :( puede personalizar) http://www.iconfont.cn/plus/collections/index?type=1

Fuente utilización impresionante http://fontawesome.dashgame.com/

diseño elástico (diseño de estiramiento)

Diseño: de hecho, el diseño elemento de ajuste en las direcciones horizontal y vertical.

diseño CSS3 ha hecho una mejora muy grande, que nos convierte en la disposición de los elementos en bloque de la disposición se vuelve muy flexible, muy adaptable, su potente escalabilidad, puede desempeñar un papel significativo en el receptivo abierto.

[Demo: 01- diseño estiramiento primera experiencia .html]

Cuando se proporciona una caja a la pantalla: después de la flexión, la caja tendrá un eje principal y el eje de lado el concepto.
Del husillo: contenedor principal husillo proyecto Flex Flex para configurar la orientación predeterminada es horizontal
eje lateral: eje perpendicular al lado del eje del husillo que se conoce, por verticales predeterminado
dirección: default husillo de izquierda a derecha , el valor predeterminado del eje lateral desde la parte superior a la inferior

[Volcar imagen no pasa la cadena, la estación de origen puede tener mecanismo de cadena de seguridad, se recomienda guardar la imagen abajo subido directamente (img-wpUM2YAR-1583941642738) (imágenes / flex01.png)]

flex-dirección

flex-diretion utiliza principalmente para ajustar la dirección del husillo, el valor predeterminado es una dirección horizontal

Es capaz de comprender, en general, muy poco sentido del cabezal de ajuste.

valor opcional

row：主轴方向为水平向右
column：主轴方向为竖直向下
row-reverse:主轴方向为水平向左
column-reverse:主轴方向是竖直向上。

justificar el contenido (Key)

justificar de contenido se utiliza principalmente para ajustar la dirección principal de la alineación , los valores opcionales son:

Los valores opcionales:

flex-start: 弹性盒子元素将向起始位置对齐
flex-end: 弹性盒子元素将向结束位置对齐。
center: 弹性盒子元素将向行中间位置对齐
space-around: 弹性盒子元素会平均地分布在行里
space-between:第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的。

align-artículos (Key)

align-artículos para el ajuste de su eje lateral de la realización , los valores son opcionales:

flex-start： 元素在侧轴的起始位置对其。 
flex-end： 元素在侧轴的结束位置对其。
center： 元素在侧轴上居中对其。
stretch： 元素的高度会被拉伸到最大（不能给死高度）。

flex-wrap

recipiente flex-wrap ser flex control de atributo único o más líneas, el valor predeterminado no se ajusta

nowrap： 不换行（默认），会压缩子盒子的宽度。
wrap： 当宽度不够的时候，会换行。

align-contenido

se proporciona align-contenido para flexionar la disposición de la pluralidad de filas del recipiente.

flex-start： 各行向侧轴的起始位置堆叠。 
flex-end： 各行向弹性盒容器的结束位置堆叠。
center： 各行向弹性盒容器的中间位置堆叠。
space-between： 各行在侧轴中平均分布。 
space-around： 第一行贴上边，最后一个行贴下边,其他行在弹性盒容器中平均分布。 
stretch：拉伸，不设置高度的情况下。

Diferencia align-artículos de la alineación de contenido

align-items调整的是侧轴的对其方式，不换行一般用align-items
align-content:必须是多行才生效，如果单行，没有效果。换行了就用align-content。

propiedades de flexibilidad

Estas propiedades están hablando con el sistema de la caja de los padres, los próximos atributos se proporcionan a la sub-cuadro.

atributo flex se utiliza para establecer cómo asignar el espacio cartucho sub-husillo

flex:1

propiedad de orden

atributo de orden define la posición de pedido. Cuanto menor sea el valor, la disposición más adelante, el valor predeterminado es 0.

order:1;

align-auto-align artículos:

align-self se proporciona en una posición del lado del eje, pero el sub-elemento de conjunto align-yo, prioridad más alta que la prioridad de los align-artículos.

取值与align-items的取值一样。

el blog de Ruan Yifeng http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

[Ejercicio: dados de seis caras Dios]