HTML5 CSS3

conversion 3D

[Cube]

[Effet] papier

[Cut] Carousel Figure Case

Beauty Case [Album]

animation

L'animation peut être contrôlée avec précision par une ou un groupe d'une pluralité de noeuds d'animation utilisé pour implémenter des animations complexes.

différence d'animation et de transition:

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

Les étapes de base pour un film:

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

animation détaillée

animation est un attribut de composé, un total de huit paramètres

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

bibliothèque d'animation

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

icône Polices

Ensuite, nous avons souvent des pages couramment utilisé petite icône, sprite fait, puis d'ajuster la position par la position de fond, mais la nécessité d'introduire l'image et la taille d'image change si la distorsion. Vous pouvez utiliser l'image de la police dans CSS3, à savoir l'aide de l'icône avec l'utilisation du même texte.

avantages:

1, tous regroupés dans un bibliothèques de polices d'icônes, ce qui réduit la demande;

2, a un vecteur de propriété, peut assurer la clarté;

3, flexible, facile à entretenir;

Alibaba icônes vectorielles :( peuvent personnaliser) http://www.iconfont.cn/plus/collections/index?type=1

Font d'utilisation impressionnant http://fontawesome.dashgame.com/

agencement élastique (layout stretch)

Disposition: en effet, la mise en page de l'élément de réglage dans les directions horizontale et verticale.

mise en page CSS3 a fait une très grande amélioration, nous faire la mise en page des éléments de niveau bloc de l'arrangement devient très souple, très adaptable, son évolutivité puissante, peut jouer un rôle important dans la réponse ouverte.

[Demo: 01- mise en page extensible première expérience .html]

Lorsqu'une boîte est fournie à l'écran: Après flex, la boîte aura un arbre principal et l' arbre côté concept.
La broche: récipient broche principale projet Flex Flex pour configurer l'orientation par défaut est horizontal
axe latéral: axe perpendiculaire au côté de l' axe de broche est appelé, par défaut vertical
direction: défaut broche de gauche à droite , la valeur par défaut arbre du côté de la partie supérieure de la inférieur

[Image vider la chaîne échoue, la station source peut avoir le mécanisme de la chaîne de sécurité, il est recommandé d'enregistrer l'image vers le bas directement téléchargé (img-wpUM2YAR-1583941642738) (images / flex01.png)]

-Direction flex

flex-diretion principalement utilisé pour ajuster la direction de la broche, la valeur par défaut est une direction horizontale

Peut comprendre, dans la direction générale, broche très peu d'ajustement.

valeur facultative

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

justify-contenu (Key)

justifier teneur est principalement utilisé pour définir la direction principale de l' alignement , les valeurs facultatives sont les suivantes :

Valeurs facultatives:

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

align-éléments (Key)

ALIGN-éléments pour le réglage de son arbre de côté du mode de réalisation , les valeurs sont facultatifs:

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

flex-wrap

conteneur enveloppe flexible est en bon état flex de contrôle d'attributs ou plusieurs lignes, la valeur par défaut ne revient pas

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

align contenu

align contenu est prévu pour fléchir l'agencement de la pluralité de rangées du conteneur.

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

Différence d'alignement-éléments de l'alignement contenu

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

propriétés flex

Les propriétés ci-dessus parlent à l'ensemble de la boîte de parent, les quelques attributs sont fournis à la sous-zone.

attribut flex est utilisé pour définir la façon d'allouer l'espace de la cartouche sous-broche

flex:1

propriété de commande

attribut arrêté définit l'élément de commande. Plus la valeur, l'arrangement plus en avant, la valeur par défaut est 0.

order:1;

align-auto align-éléments:

align soi est prévue à une position du côté de l'arbre, mais le sous-élément à aligner auto ensemble, la priorité supérieure à la priorité des ALIGN-éléments.

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

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

[Exercice: Dieu de dés à six faces]