Dois pequenos efeitos especiais feitos com base em html+css. É a primeira vez que escrevo um post de CSS, mas sinto que a escrita não é muito detalhada. Se não entender, pode deixar uma mensagem no comentário área abaixo e vamos fazer um intercâmbio acadêmico especializado no setor. Aprender sem pensar é inútil, pensar sem aprender é perigoso.
O último carrossel automático de League of Legends foi revisado
1. Os efeitos especiais das cartas de baralho
- 1. Renderizações de expansão de cartas de baralho
- Em segundo lugar, as configurações de plano de fundo da página
- 3. Recipientes para colocar fotos
- 3.1 Vídeo de cartas de baralho desdobrando efeitos especiais
- Quarto, a pequena noz gira para expandir o efeito especial
- 4.1 Renderizações de nogueira pequenas
- 4.2 O código central do efeito de rotação de noz pequena:
1. Renderizações de expansão de cartas de baralho
Em segundo lugar, as configurações de plano de fundo da página
/ limpar o espaçamento padrão da página da web /
*{
margin:0;
padding:0;
}
Defina a largura e a altura da imagem de fundo para facilitar a operação. Dê uma cor ao fundo (azul)
.wrap{
width:310px;
eight:438px;
/*background-color:skyblue;*/
A página de fundo é padronizada para o canto superior esquerdo, mas eu gosto que ela fique centralizada, existe alguma maneira de mover a posição padrão?
Podemos usar posicionamento relativo / margem: 0px auto; /
/posicionamento relativo*/
margin:0px auto;
Movendo para o centro, descobri que o fundo está muito alto, o que não favorece o efeito/beleza da tela. Minha ideia é mover um pouco para o centro e para baixo. Como mover? ? ?
A parte superior e inferior são 0 e a esquerda e a direita são iguais.
A tela central tem 200 pixels para cima e para baixo, e a esquerda e a direita são 0*/
margin:200px auto
O plano de fundo foi definido aqui (então você pode colocar suas fotos favoritas no container, você pode consultar o diretório onde as fotos são colocadas)
Coloque a exibição da imagem:
Escrevendo aqui vamos encontrar um problema? O fundo e a imagem são separados. O efeito que queremos é (o fundo e a imagem se sobrepõem/cobrem a cor de fundo) e
a posição:relativa; pode ser usada a tag. Para a beleza da imagem, a cor de fundo é anotada em normalmente, os quatro cantos da imagem têm cor de fundo mutilada
/ posicionamento absoluto /
position:relative;
Demonstração do ângulo de rotação
Girar 45 graus de rotação
transform:rotate(45deg);
/ O estilo da imagem precisa posicionar as imagens juntas! ! ! Quando você precisar cobrir, pense no posicionamento
position:absolute; o posicionamento absoluto não afeta outros elementos, e a posição é determinada de acordo com a esquerda e superior
Coordenadas padrão: o canto superior esquerdo da página /
img{ posição:absoluto; esquerda:0; topo:0;
animação de transição
transition:transform 1s;
/ ponto central de rotação /
transform-origin:right bottom;
}
/ Quando o mouse é colocado no recipiente, a imagem correspondente gira // Quando o mouse é colocado no recipiente , a imagem no Capítulo 4 gira em 60 graus
/
.wrap:hover img:nth-child(4){
transform:rotate(60deg);
}
/ Quando o mouse é colocado no recipiente, a terceira imagem é girada em 30 graus /
.wrap:hover img:nth-child(3){
transform:rotate(30deg);
}
/ Quando o mouse é colocado no recipiente, a segunda imagem gira em -30deg /
.wrap:hover img:nth-child(1){
transform:rotate(-30deg);
}
3. Recipientes para colocar fotos
<div class="wrap">
<img src="images/pk1.png"alt="">
<img src="images/pk1.png"alt="">
<img src="images/pk1.png"alt="">
<img src="images/pk1.png"alt="">
</body>
</html>
3.1 Vídeo de cartas de baralho desdobrando efeitos especiais
[CSS] Efeito de expansão rotativa de cartas de baralho
Quarto, a pequena noz gira para expandir o efeito especial
4.1 Renderizações de nogueira pequenas
4.2 O código central do efeito de rotação de noz pequena:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小胡桃</title>
<style>
*{
margin:0;
padding:0;
}
.wrap{
width:1346px;
height:1000px;
background-color:blue;
margin:1200px auto;
/*居中显示*/
position:relative;
/* 旋转45度 deg rotate 旋转 */
/* transform:rotate(45deg); */
}
/*图片的样式 需要将图片 定位到一起！！！ 需要覆盖的时候 想到定位
position:absolute; 绝对定位 不影响其他元素, 根据left和top来确定位置
默认的坐标:页面的左上角*/
img{
position:absolute;
right:0;
top:0;
transition:transform 1s;
transform-origin: right bottom;
}
/*当鼠标放入容器时,对应的图片发生旋转*/
/*当鼠标放到容器时,当第四章张图旋转60deg*/
.wrap:hover img:nth-child(4){
transform:rotate(60deg);
}
.wrap:hover img:nth-child(3){
transform:rotate(30deg);
}
.wrap:hover img:nth-child(1){
transform:rotate(-30deg);
}
</style>
</head>
<body>
<!-- 放置图片的容器 -->
<div class="wrap">
<img src="images/2.png"alt="">
<img src="images/2.png"alt="">
<img src="images/2.png"alt="">
<img src="images/2.png"alt="">
</body>
</html>