定义一个标签的动画
首先给这个标签设定animation属性，例如：
animation: wh_rotate 8s linear infinite;
动画：动画名称 动画时间 动画方式（这里是线性） 动画结束（这里一直循环）
然后要单独给动画设置动作 使用
@keyframes wh_rotate{
from{transform: rotate(0deg)}
to{transform: rotate(-360deg)}
}
可以定义一个旋转的动画
那个标签使用了animation属性，名称为wh_rotate 的话就开始旋转
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
ps:这里的几个animation是针对不同浏览器的，使得一下几个浏览器都适用
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Safari and Chrome */
@keyframes especifica la animación.
animation Abreviatura de la propiedad animation, excepto la propiedad animation-play-state.
animation-name especifica el nombre de la animación @keyframes.
animation-duration especifica los segundos o milisegundos que tarda la animación en completar un ciclo. El valor predeterminado es 0.
animation-timing-function especifica la curva de velocidad de la animación. El valor predeterminado es "facilidad".
animation-delay especifica cuándo comienza la animación. El valor predeterminado es 0.
animation-iteration-count especifica el número de veces que se reproduce la animación. El valor predeterminado es 1.
animation-direction especifica si la animación se reproduce en la dirección inversa en el siguiente ciclo. El valor predeterminado es "normal".
animation-play-state especifica si la animación está en ejecución o en pausa. El valor predeterminado es "en ejecución".
animation-fill-mode especifica el estado fuera del tiempo de animación del objeto.
alt = "El archivo está dañado" se utiliza junto con la etiqueta de la imagen. Cuando no se encuentra la imagen, se muestra el texto "El archivo está dañado"
Prioridad de visualización del índice z, como z-index = -1 Será se muestra primero. Es fácil de ocluir y se le asigna un valor de 10, que es difícil de cubrir. Está más cerca del usuario.
transform: rotate (45deg); Hay muchas formas de mover elementos. Aquí, rotar es rotación , y hay traducción. 5px, 5px) es mover el elemento hacia abajo y hacia la izquierda. 5px
transform-origin: 20% 40%; el centro es la posición de la etiqueta, como 100%, 0, es la esquina superior derecha , 100%, 100%, es la
dirección de referencia de animación de la esquina inferior derecha https://www.runoob.com/cssref/css-animatable.html .
"<a href =" www.baidu.com "target =" _ blank "name =" # three ">" el objetivo es seleccionar qué ventana abrir el hipervínculo, _blank salta a este nombre en el nombre de la nueva ventana y otras etiquetas nombre Si es igual a tres, puede saltar directamente a esta y aquella etiqueta para indicar espacio br / nueva línea
Etiqueta, lo que significa mantener el formato predeterminado, no es necesario utilizar un carácter de espacio si escribe un espacio dentro, simplemente escriba un espacio directamente<dl> Lista de definición de declaración
<dt> Elemento de lista de declaración
<dd> Definir contenido de lista
</ dl>
Lista ordenada, después de salir, cada li tiene el número de serie 1, 2, 3
<ol>
<li>
<li>
</ol>
Lista desordenada, después de salir, cada li está precedido por un "·"
<ul>
<li>
<li>
</ul>
ps: lista ordenada que son todas etiquetas <li>, listas anidadas de palabras, lista anidada ul o la lista ol li que está escrita en
cursiva etiqueta negrita etiqueta de imagen puede agregar el atributo de título, apuntando a la información de la imagen se puede mostrar
~
Los elementos del conjunto de bloques ocupan una fila de forma independiente
Los elementos de nivel de línea no admiten la configuración de la longitud, el ancho y la altura, y la altura de la extensión del contenido <a> <strong> <em>
Pero los elementos de nivel de línea pueden establecer la altura de la línea.
ps: span es una etiqueta especial a nivel de línea, como div (etiqueta a nivel de bloque), sin semántica (estilo).
Generalmente se usa para resaltar una palabra en una línea de texto.
<img> Otros atributos son similares a los elementos de nivel de línea, pero el ancho y la altura se pueden establecer, por lo que no pertenece a elementos de nivel de línea u otros elementos. De lo contrario establecido, el contenido se expandirá.
<input> atributo de tamaño es para definir la longitud del cuadro de entrada maxlength es para definir la longitud de caracteres aceptable
<input type = "radio" name = "gender" value = "boy" / check> atributo de marca de verificación masculina, la opción predeterminada masculino debe escribirse antes de h5 check = "check"
Cuando se usa una tabla, colspan: el número de columnas de la tabla ocupadas por la celda
rowspan El número de filas ocupadas por la celda de la tabla
border-collapse: colapso; este atributo es para la tabla, lo que indica que cada elemento se puede combinar
<video src = "" controles de reproducción automática> Barra de control y reproducción automática
<audio src = "" controles de reproducción automática> Reproducir audio
<embed src = ""> Reproducir flash