avatar

css早期练习 手风琴与粘性球

手风琴

效果

  • 背景1

  • 背景2

  • 背景3

  • 背景4

  • 背景5

样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 <style>
.accordion-container {
padding:0;
overflow: hidden;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}

.accordion-container .accordion-item {
list-style: none;
height: 500px;
transition: width 0.5s;
background-repeat: no-repeat;
/* background-size: cover;
background-position: center center; */
background-size: 500px;
background-position: 50%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}

.accordion-container .accordion-item:not(:hover) {
width: 20%;
}

.accordion-container .accordion-item:hover {
width: 500px;
}

.accordion-container .accordion-item:hover::after {
opacity: 1;
}

.accordion-container .accordion-item::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, .4);
z-index: 1;
opacity: 0;
transition: opacity 0.5s;
}

.accordion-container .accordion-item .accordion-title {
color: #fff;
font-size: 18px;
z-index: 2;
}
</style>
<ul class="accordion-container">
<li class="accordion-item" style="background-image: url('http://img.zhangaming.com/img/bg1.jpeg');">
<p class="accordion-title">背景1</p>
</li>
<li class="accordion-item" style="background-image: url('http://img.zhangaming.com/img/bg2.jpeg');">
<p class="accordion-title">背景2</p>
</li>
<li class="accordion-item" style="background-image: url('http://img.zhangaming.com/img/bg3.jpeg');">
<p class="accordion-title">背景3</p>
</li>
<li class="accordion-item" style="background-image: url('http://img.zhangaming.com/img/bg4.jpeg');">
<p class="accordion-title">背景4</p>
</li>
<li class="accordion-item" style="background-image: url('http://img.zhangaming.com/img/bg5.jpeg');">
<p class="accordion-title">背景5</p>
</li>
</ul>

粘性球

效果

样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<style>

.container {
margin: 0 auto;
padding: 100px 0;
}

.sticky-container {
background: #000;
overflow: hidden;
}

.sticky-container .blurfield {
height: 200px;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
filter: blur(10px) contrast(30);
}

.sticky-container .ball1,
.sticky-container .ball2 {
width: 80px;
height: 80px;
background-color: #fff;
position: absolute;
-webkit-animation: ball 10s infinite;
animation: ball 10s infinite;
border-radius: 100%;
}

.sticky-container .ball2 {
-webkit-animation-delay: -2s;
animation-delay: -2s;
}

@keyframes ball {
0% {
transform: translateX(-100px);
}

50% {
transform: translateX(100px);
}

100% {
transform: translateX(-100px);
}
}
</style>

<div class="container">
<div class="sticky-container">
<div class="blurfield">
<div class="ball1"></div>
<div class="ball2"></div>
</div>
</div>
</div>
文章作者: 张复明
文章鏈接: https://hexo.zhangaming.com/2020/04/07/css-accordion-stickyball/
版權聲明: 本博客所有文章除特別聲明外,均採用 CC BY-NC-SA 4.0 許可協議。轉載請註明來自 阿明的博客
打賞
  • 微信
    微信
  • 支付寶
    支付寶

評論