CSS+JS动画名片轮播图#

前端练习：思路是全都利用transition添加过渡！

#html#

1
    <div class="container">
2
        <div id="slide">
3
            <div class="item" style="background-image: url('cg(16).png');">
4
                <div class="content">
5
                    <div class="name">我是谁？</div>
6
          <div class="des">我是王雪</div>
7
                </div>
8
            </div>
9
            <div class="item" style="background-image: url('cg(17).png');">
10
                <div class="content">
11
                    <div class="name">我是谁？</div>
12
                    <div class="des">我是王雪</div>
13
                </div>
14
            </div>
15
            <div class="item" style="background-image: url('cg(18).png');">
16
                <div class="content">
17
                    <div class="name">我是谁？</div>
18
                    <div class="des">我是王雪</div>
19
                </div>
20
            </div>
21
            <div class="item" style="background-image: url('cg(20).png');">
22
                <div class="content">
23
                    <div class="name">我是谁？</div>
24
                    <div class="des">我是王雪</div>
25
                </div>
26
            </div>
27
        </div>
28
        <div class="buttons">
29
            <div class="s_button" style="background-image: url('https://tonks-blog-1329849192.cos.ap-chengdu.myqcloud.com/AC8B5CA614DA0D9149A48648E1DF96C0.png');"></div>
30
            <div class="s_button"></div>
31
        </div>
32
    </div>

PS：可能有人需要箭头的图片，我上传到了腾讯云里，想要的点击链接自取。

#css#

1
body{
2
    background-color: aliceblue;
3
    overflow: hidden;
4
}
5
.container{
6
    width: 1000px;
7
    height: 600px;
8
    position: absolute;
9
    top: 50%;
10
    left: 50%;
11
    transform: translate(-50%,-50%);
12
    background-color: rgba(203, 203, 203, 0);
13
    padding: 50px;
14
    box-shadow: 0 30px 50px #bdbdbd00;
15

16
}
17
#slide{
18
    width: max-content;
19
    margin-top: 50px;
20

21
}
22
.item{
23
    width: 200px;
24
    height: 300px;
25
    background-position: 50%,50%;
26
    display: inline-block;
27
    background-size: cover;
28
    position: absolute;
29
    top: 50%;
30
    transform: translateY(-50%);
31
    box-shadow: 0 30px 30px #6b6565;
32
    border-radius: 20px;
33
    transition: 0.5s;
34

35
}
36
.item:nth-child(1),
37
.item:nth-child(2){
38
    top: 0;
39
    left: 0;
40
    width: 100%;
41
    height: 100%;
42
    /* 覆盖一下 */
43
    transform: translateY(0%);
44
    box-shadow: 0 0px 0px;
45

46
}
47
.item:nth-child(3){
48
    left: 70%;
49
}
50
.item:nth-child(4){
51
    left: calc(70% + 220px);/*+-号之前一定要有空格，否则在部分浏览器中不生效*/
52
}
53
/* .item:nth-child(n+5){以防万一你有更多图片添加
54
    left: calc(70% + 220px);
55
    opacity:0;
56
} */
57
.item .content{
58
    width: 300px;
59
    position: absolute;
60
    left: 100px;
61
    top: 50%;
62
    transform:translateY(-50%);
63
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
64
    color:aliceblue;
65
    display:none;
66
}
67
.item:nth-child(2) .content{
68
    display: block;
69

70
}
71
.item .name{
72
    font-size: 40px;
73
    font-weight: bold;
74
    opacity: 0;
75
    animation: showcontent 1s ease-in-out 0s 1 forwards;
76

77
}
78
.item .des{
79
    margin: 20px 0;
80
    opacity: 0;
81
    animation: showcontent 1s ease-in-out 0.3s 1 forwards;
82

83
}
84
/*css动画部分采用模糊+平移，缩放的部分将由JS完成*/
85
@keyframes showcontent{
86
    from{
87
        opacity: 0;
88
        transform: translateY(100px);
89
        filter: blur(20px);
90
    }to{
91
        opacity: 1;
92
        transform: translateY(0);
93
        filter:blur(0);
94
    }
95
}
96
.buttons{
97
    width: 100%;
98
    position: absolute;
99
    bottom: 50px;
100
    margin-left: -50px;
101
    text-align: end;
102
    /* 对下文的inlineblock生效 */
103
}
104
.s_button{
105
    display: inline-block;
106
    width: 50px;
107
    /* 垂直居中 */
108
    height: 50px;
109

110
    background-image: url('https://tonks-blog-1329849192.cos.ap-chengdu.myqcloud.com/8F3B9107EE0C04902D077E400AA09658.png') ;
111
    background-size: cover;
112
    opacity: 0.6;
113
    border: 1px solid #555;
114
    border-radius: 50%;
115
    margin: 0 24px;
116
    transition: 0.5s;
117
}
118
.s_button:hover{
119
    cursor: pointer;
120
    background-color: #ccc;
121
}

#js：其实没有几行代码#

1
    document.querySelectorAll(".s_button")[1].onclick = ()=>{
2
        let lists=document.querySelectorAll('.item');
3
        document.querySelector('#slide').appendChild(lists[0])
4
    }
5
    document.querySelectorAll(".s_button")[0].onclick = ()=>{
6
        let lists=document.querySelectorAll('.item');
7
        document.querySelector('#slide').prepend(lists[lists.length-1])
8
    }