avatar

css练习 抛物线与弹出气泡

抛物线

效果

点击会抛物线移动 应用场景:购物车购买效果

代码

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

<style>
.parabola-container {
position: relative;
height: 400px;
border: 1px solid #eee;
}

.parabola-container .parabola-item {
width: 30px;
height: 30px;
background: #00adb5;
position: absolute;
left: 0;
top: calc(100% - 30px);
--left: 0;
--top: calc(100% - 30px);
transition: left 0.5s ease-in, top 0.5s ease-out;
}

.parabola-container .parabola-item.active {
left: var(--left);
top: var(--top);
}
</style>

<div class="parabola-container">
<div class="parabola-item"></div>
</div>

这里样式里面使用了变量 然后点击会给–left; –top 赋值 去改变他的数值 因为有过渡效果transition 所以会有很好的体验效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<script>
function hasClassFun(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
document.querySelector('.parabola-container').addEventListener('click', function (e) {
let rect = e.target.getBoundingClientRect();
let offsetX = e.pageX - rect.left - window.pageXOffset;
let offsetY = e.pageY - rect.top - window.pageYOffset;
let item = document.querySelector('.parabola-item');
if (!hasClassFun(item, 'active')) {
item.className += ' active'; //在原来的后面加这个}
}
item.style.setProperty("--left", `${offsetX}px`);
item.style.setProperty("--top", `${offsetY}px`);
})
</script>

弹出气泡

效果看着简单 手写的话是挺多的
应用场景: 在超出内容 或者有额外信息的 元素上 常见于后台系统

效果

hover to popup

代码实现

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

<style>
.btn {
min-width: 100px;
width: 200px;
line-height: 1.5;
padding: 5px 10px;
color: #fff;
background: #00adb5;
border-radius: 4px;
text-align: center;
cursor: pointer;
}

.poptip {
position: relative;
z-index: 101;
}

.poptip::before,
.poptip::after {
visibility: hidden;
opacity: 0;
transform: translate3d(0, 0, 0);
transition: all 0.3s ease 0.2s;
box-sizing: border-box;
}

.poptip::before {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 8px 0 8px;
border-color: #30363d transparent transparent transparent;
left: calc(50% - 8px);
top: 0px;
transform: translateX(0%) translateY(-12px);
}

.poptip::after {
font-size: 14px;
color: #fff;
content: attr(aria-controls);
position: absolute;
padding: 6px 12px;
white-space: nowrap;
z-index: -1;
left: 50%;
bottom: 100%;
transform: translateX(-50%) translateY(-12px);
background: #30363d;
line-height: 1;
border-radius: 2px;
}

.poptip:hover::before,
.poptip:hover::after {
visibility: visible;
opacity: 1;
}
</style>

<div class="poptip btn" aria-controls="弹出气泡">hover to popup</div>
文章作者: 张复明
文章鏈接: https://hexo.zhangaming.com/2020/04/08/css-parabola-poptip/
版權聲明: 本博客所有文章除特別聲明外,均採用 CC BY-NC-SA 4.0 許可協議。轉載請註明來自 阿明的博客
打賞
  • 微信
    微信
  • 支付寶
    支付寶

評論