Este artículo es la secuela del artículo anterior del autor que usa css3 para realizar la animación de fondo de entrevistadores increíbles (avanzado con código fuente) . También es un artículo que presenta las habilidades de css3, porque no hay muchas dificultades en el conocimiento de css, y más es estar familiarizado con las nuevas características de css3 y Conocimientos teóricos básicos. Entonces, el propósito de escribir este artículo es resumir algunas habilidades CSS avanzadas en mi trabajo, por un lado, y por otro lado, espero enseñarle algunas habilidades prácticas y formas eficientes de desarrollar CSS, para mejorar la eficiencia de su trabajo.
Nosotros aprenderemos
Aplicación avanzada de box-shadow
Haz una elipse adaptativa
Pure css3 realiza la animación del progreso del gráfico circular
Usar borde para implementar un estilo de diálogo
Aplicación sencilla del filtro css3
El pseudoelemento css3 realiza una casilla de verificación personalizada
Una poderosa herramienta para hacer animaciones css3 en línea
texto
1. Aplicación avanzada de box-shadow
El uso de las nuevas funciones de css3 puede ayudarnos a lograr varios efectos especiales inesperados. En los próximos casos, utilizaremos css3 box-shdow para lograrlo. ¡Comencemos ahora!
Darse cuenta de la animación de ondas de agua
Puntos de conocimiento: caja-sombra
Piense en cómo podemos realizar la animación de la difusión de ondas de agua si no usamos css3. Se deben escribir muchos js para lograr los siguientes efectos:
css3 implementa el código central
<style>
.wave {
margin-left: auto;
margin-right: auto;
width: 100px;
height: 100px;
border-radius: 100px;
border: 2px solid #fff;
text-align: center;
line-height: 100px;
color: #fff;
background: #06c url(http://p3g4ahmhh.bkt.clouddn.com/me.jpg) no-repeat center center;
background-size: 100%;
animation: wave 4s linear infinite;
}
@keyframes wave {
0% {
box-shadow: 0 0 0 0 rgba(245, 226, 226, 1), 0 0 0 0 rgba(250, 189, 189, 1);
}
50% {
box-shadow: 0 0 0 20px rgba(245, 226, 226, .5), 0 0 0 0 rgba(250, 189, 189, 1);
}
100% {
box-shadow: 0 0 0 40px rgba(245, 226, 226, 0), 0 0 0 20px rgba(245, 226, 226, 0);
}
}
</style>
<div class="wave"></div>
Aquí usamos principalmente la sombra de varios niveles de la sombra de cuadro para lograr, la parte de animación que usamos @keyframes, ¿se siente bien?
Implementar la animación de carga
Puntos de conocimiento: caja-sombra múltiples sombras
La carga de animaciones ciertamente no es desconocida para todos. Aunque la carga de animaciones se puede implementar de muchas maneras, como pseudoelementos, gif y js, creo que es más elegante implementarlo directamente en css:
El código central es el siguiente:
<style>
.loading {
margin-left: auto;
margin-right: auto;
width: 30px;
height: 30px;
border-radius: 30px;
background-color: transparent;
animation: load 3s linear infinite;
}
@keyframes load {
0% {
box-shadow: -40px 0 0 rgba(250, 189, 189, 0),
inset 0 0 0 15px rgba(250, 189, 189, 0),
40px 0 0 rgba(250, 189, 189, 0);
}
30% {
box-shadow: -40px 0 0 rgba(250, 189, 189, 1),
inset 0 0 0 15px rgba(250, 189, 189, 0),
40px 0 0 rgba(250, 189, 189, 0);
}
60% {
box-shadow: -40px 0 0 rgba(250, 189, 189, 0),
inset 0 0 0 15px rgba(250, 189, 189, 1),
40px 0 0 rgba(250, 189, 189, 0);
}
100% {
box-shadow: -40px 0 0 rgba(250, 189, 189, 0),
inset 0 0 0 15px rgba(250, 189, 189, 0),
40px 0 0 rgba(250, 189, 189, 1);
}
}
</style>
<div class="loading"></div>
También utilizamos varios fondos de sombra de cuadro para lograr esto, que también es una dirección que pensé en ese momento.
Realizar cuadro de diálogo y proyección irregular del cuadro de diálogo
Puntos de conocimiento: filtro y pseudoelementos
El conocimiento del filtro css está involucrado aquí, pero también es muy simple. Puede comprenderlo en el sitio web oficial de css3. Veamos el efecto directamente:
Usaremos la sombra del filtro para lograr la sombra de los gráficos irregulares, y luego usaremos pseudo elementos y bordes para lograr el triángulo de la cabeza:
<style>
.odd-shadow{
margin-left: auto;
margin-right: auto;
width: 200px;
height: 80px;
border-radius: 8px;
color: #fff;
font-size: 24px;
text-align: center;
line-height: 80px;
background: #06c;
filter: drop-shadow(2px 2px 2px rgba(0,0,0,.8))
}
.odd-shadow::before{
content: '';
position: absolute;
display: block;
margin-left: -20px;
transform: translateY(20px);
width:0;
height: 0;
border: 10px solid transparent;
border-right-color: #06c;
}
</style>
<div class="odd-shadow">哎呦，猪先森</div>
Efecto de desenfoque
Puntos de conocimiento: filtro
Esto es relativamente simple, aquí estoy directamente encima de la imagen y el código:
filter: blur(20px);
2.Haz una elipse adaptativa
La aparición de border-radius nos ha proporcionado una gran comodidad para lograr esquinas redondeadas. También podemos lograr varios efectos gráficos a través de una mayor investigación sobre las características de Border-radius. ¡Echemos un vistazo a su poder!
Punto de conocimiento: border-radius: a / b; // a, b son el radio horizontal y vertical de las esquinas redondeadas respectivamente, si la unidad es%, significa que el análisis es relativo al ancho y alto
Código de núcleo:
<style>
.br-1{
width: 200px;
height: 100px;
border-radius: 50% /10%;
background: linear-gradient(45deg,#06f,#f6c,#06c);
}
.br-2{
width: 100px;
border-radius: 20% 50%;
}
.ani{
animation: skew 4s infinite;
}
.ani1{
animation: skew1 4s infinite 2s;
}
.ani2{
animation: skew2 4s infinite 3s;
}
@keyframes skew{
to{
border-radius: 50%;
}
}
@keyframes skew1{
to{
border-radius: 20px 20px 100%;
}
}
@keyframes skew2{
to{
transform: rotate(360deg);
}
}
</style>
<div class="br-1 black-theme"></div>
<div class="br-1 black-theme ani"></div>
<div class="br-1 black-theme ani1"></div>
<div class="br-1 br-2 black-theme ani2"></div>
Aquí usamos principalmente el degradado de fondo para lograr un fondo llamativo y usamos el radio de borde para lograr varias especificaciones de patrones elípticos.
3. Pure css3 realiza la animación del progreso del gráfico circular
Puntos de conocimiento: border-radius: abcd / efgh, animación de múltiples propiedades de animación;
El efecto es el siguiente:
Código de núcleo:
<style>
.br-31{
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(to right,#f6c 50%,#333 0);
}
.br-31::before{
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: #f6c;
transform-origin: left;
animation: skin 4s linear infinite,
bg 8s step-end infinite;
}
@keyframes skin{
to{
transform: rotate(.5turn);
}
}
@keyframes bg{
50%{
background: #333;
}
}
.br-32::before{
animation-play-state: paused;
animation-delay: inherit;
}
</style>
<div class="br-31 black-theme"></div>
<div class="br-31 br-32 black-theme" style="animation-delay:-1s"></div>
Para la realización de esta pieza, utilizamos principalmente un fondo degradado, que también es la clave para lograr avances en forma de abanico, incluyendo cómo bloquear el semicírculo en el código, cómo animar el semicírculo, cómo cambiar la posición del origen de rotación, etc. Aunque estos son muy técnicos, estamos un poquito Es posible hacer un dibujo.
Pseudoelementos 4.css3 para implementar casillas de verificación personalizadas
Todos sabemos que el estilo de control de casilla de verificación nativo es extremadamente difícil de personalizar, lo que aumenta la dificultad de los ingenieros para implementar el borrador del diseño. Con la llegada de css3, se ha agregado el selector: check, por lo que podemos usar: check y label para implementar una variedad de controles de selección de formularios, ¡echemos un vistazo a cómo implementarlo!
Echemos un vistazo a cómo implementar la casilla de verificación personalizada anterior:
<style>
.check-wrap{
text-align: center;
}
.checkbox{
position: absolute;
clip: rect(0,0,0,0);
}
.checkbox[type="checkbox"]:focus + label::before{
box-shadow: 0 0 .6em #06c;
}
.checkbox[type="checkbox"] + label::before{
content: '\a0'; /* 不换行空格 */
display: inline-block;
margin-right: .3em;
width: 2em;
height: 2em;
border-radius: .3em;
vertical-align: middle;
line-height: 2em; /* 关键 */
font-size: 20px;
text-align: center;
color: #fff;
background: gray;
}
.checkbox[type="checkbox"]:checked + label::before{
content: '\2713'; /* 对勾 */
background: black;
}
label{
margin-right: 40px;
font-size: 20px;
}
</style>
<div class="check-wrap">
<input type="checkbox" class="checkbox" id="check-1" />
<label for="check-1">生男孩</label>
<input type="checkbox" class="checkbox" id="check-2" />
<label for="check-2">生女孩</label>
</div>
Para ocultar el control de casilla de verificación nativo, usamos clip: rect (0,0,0,0) para interceptar, y luego usamos la pseudoclase de casilla de verificación: marcado para lograr la interacción.
A continuación, expandamos, implementemos un cambio personalizado:
El principio aquí es el mismo, excepto que se ha cambiado el estilo y el código directamente:
<style>
.check-wrap{
margin-bottom: 20px;
text-align: center;
}
.switch{
position: absolute;
clip: rect(0,0,0,0);
}
.switch[type="checkbox"] + label{
width: 6em;
height: 3em;
padding: .3em;
border-radius: .3em;
border: 1px solid rgba(0,0,0,.2);
vertical-align: middle;
line-height: 2em; /* 关键 */
font-size: 20px;
text-align: center;
color: #fff;
box-shadow: 0 1px white inset;
background-color: #ccc;
background-image: linear-gradient(#ddd,#bbb);
}
.switch[type="checkbox"]:checked + label{
box-shadow: 0.05em .1em .2em rgba(0,0,0,.6) inset;
border-color: rgba(0,0,0,.3);
background: #bbb;
}
label{
margin-right: 40px;
font-size: 14px;
}
.switch-an{
position: absolute;
clip: rect(0,0,0,0);
}
.switch-an[type="checkbox"] + label{
position: relative;
display: inline-block;
width: 5em;
height: 2em;
border-radius: 1em;
color: #fff;
background: #06c;
text-align: left;
}
.switch-an[type="checkbox"] + label::before{
content: '';
width:2em;
height: 2em;
position: absolute;
left: 0;
border-radius: 100%;
vertical-align: middle;
background-color: #fff;
transition: left .3s;
}
.switch-an[type="checkbox"] + label::after{
content: 'OFF';
margin-left: 2.6em;
}
.switch-an[type="checkbox"]:checked + label::before{
transition: left .3s;
left: 3em;
}
.switch-an[type="checkbox"]:checked + label::after{
content: 'NO';
margin-left: .6em;
}
</style>
<div class="check-wrap">
<input type="checkbox" class="switch" id="switch-1" />
<label for="switch-1">生男孩</label>
<input type="checkbox" class="switch" id="switch-2" />
<label for="switch-2">生女孩</label>
</div>
<div class="check-wrap">
<input type="checkbox" class="switch-an" id="switch-an-1" />
<label for="switch-an-1"></label>
</div>
¿Cree que css3 proporciona funciones personalizadas y animaciones más potentes? De hecho, podemos lograr efectos más geniales y prácticos, esperando que los pruebes.
5. Una poderosa herramienta para hacer animaciones CSS3 en línea
Finalmente, recomiendo una herramienta para hacer varias curvas Bezier en línea, que suelo usar cuando hago animaciones: cubic-bezier.