Two small special effects made based on html+css. It is the first time to write a blog post of CSS, but I feel that the writing is not very detailed. If you don’t understand, you can leave a message in the comment area below, and let’s have an academic exchange. Specialized in the industry. Learning without thinking is useless, thinking without learning is perilous.
The last League of Legends automatic carousel has been reviewed
1. The special effects of playing cards
- 1. Expansion renderings of playing cards
- Second, the page background settings
- 3. Containers for placing pictures
- 3.1 Video of playing cards unfolding special effects
- Fourth, the small walnut rotates to expand the special effect
- 4.1 Small walnut renderings
- 4.2 The core code of the small walnut rotation effect:
1. Expansion renderings of playing cards
Second, the page background settings
/ clear web page default spacing /
*{
margin:0;
padding:0;
}
Set the width and height of the background image for easy operation. Give the background a color (blue)
.wrap{
width:310px;
eight:438px;
/*background-color:skyblue;*/
The background page defaults to the upper left corner, but I like it to be centered, is there any way to move the default position?
We can use relative positioning / margin: 0px auto; /
/relative positioning*/
margin:0px auto;
Moving to the center, I found that the background is too high, which is not conducive to the display effect/beauty. My idea is to move it a little to the center and bottom. How to move it? ? ?
The top and bottom are 0 and the left and right are equal.
The center display is 200 pixels up and down, and the left and right are 0*/
margin:200px auto
The background has been set here (then you can put your favorite pictures in the container, you can refer to the directory where the pictures are placed)
Put the picture display:
Writing here we will find a problem? The background and the picture are separated. The effect we want is (the background and the picture overlap/cover the background color) and
the position:relative; tag can be used. For the beauty of the picture, the background color is annotated in advance. Normally, the four corners of the picture have mutilated background color
/ absolute positioning /
position:relative;
Rotation angle demonstration
Rotate 45 degrees deg rotate
transform:rotate(45deg);
/ The style of the picture needs to position the pictures together! ! ! When you need to cover, think of positioning
position:absolute; absolute positioning does not affect other elements, and the position is determined according to left and top
Default coordinates: the upper left corner of the page /
img{
position:absolute;
left:0;
top:0;
transition animation
transition:transform 1s;
/ rotation center point /
transform-origin:right bottom;
}
/ When the mouse is placed in the container, the corresponding picture rotates // When the mouse is placed in the container , the picture in Chapter 4 rotates by 60deg
/
.wrap:hover img:nth-child(4){
transform:rotate(60deg);
}
/ When the mouse is placed on the container, the third image is rotated by 30deg /
.wrap:hover img:nth-child(3){
transform:rotate(30deg);
}
/ When the mouse is placed on the container, the second image rotates by -30deg /
.wrap:hover img:nth-child(1){
transform:rotate(-30deg);
}
3. Containers for placing pictures
<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 Video of playing cards unfolding special effects
[CSS] Rotating expansion effect of playing cards
Fourth, the small walnut rotates to expand the special effect
4.1 Small walnut renderings
4.2 The core code of the small walnut rotation effect:
<!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>