avatar

css早期练习 触摸与悬停

hover的触摸效果

所谓的触摸效果 实际上跟hover和过渡效果transition属性有关 要做出动画效果 我们了解的 就是过渡和帧动画

这里都用的过渡效果 帧动画 更多是做循环或者重复性的动作 当然你也可以做出跟过渡一样的效果

按钮触摸效果1

这里只写一个案例 其他其实触类旁通 举一反三

这里触摸的写法在我们之前做抛物线移动的时候已经实现过了

效果

hover me

代码实现

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

<style>
.button {
margin: 40px auto;
width: 200px;
height: 60px;
padding: 0 30px;
line-height: 60px;
text-align: center;
position: relative;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: #f72359;
border: none;
color: white;
font-size: 1.2em;
cursor: pointer;
outline: none;
overflow: hidden;
border-radius: 100px;
}

.button span {
position: relative;
}

.button::before {
--size: 0;
content: '';
position: absolute;
left: var(--x);
top: var(--y);
width: var(--size);
height: var(--size);
background: radial-gradient(circle closest-side, #4405f7, transparent);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

transition: width .2s ease, height .2s ease;
}

.button:hover::before {
--size: 400px;
}
</style>

<div class="button"><span>hover me</span></div>
<script>
document.querySelector('.button').addEventListener('mousemove', function (e) {
const x = e.pageX - this.offsetLeft;
const y = e.pageY - this.offsetTop;
this.style.setProperty('--x', `${x}px`)
this.style.setProperty('--y', `${y}px`)
})
</script>

按钮触摸效果2

效果

hover me

代码实现

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

<style>
.button1 {
width: 200px;
height: 60px;
position: relative;
background: #fff;
margin: 30px auto;
box-sizing: border-box;
cursor: pointer;
text-align: center;
line-height: 60px;
}

.button1::before {
content: '';
width: 0;
height: 0;
background: #00adb5;
position: absolute;
top: -1px;
right: -1px;
z-index: 1;
transition: width .5s, height .5s;
}

.button1::after {
content: '';
width: 0;
height: 0;
background: #00adb5;
position: absolute;
bottom: -1px;
left: -1px;
z-index: 1;
transition: width .5s, height .5s;
}

.button1:hover::before {
width: calc(100% + 2px);
height: calc(100% + 2px);
}

.button1:hover::after {
width: calc(100% + 2px);
height: calc(100% + 2px);
}
</style>

<div class="button1">hover me </div>

box盒子边框效果1

效果

代码实现

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

<style>
.bb {
position: relative;
width: 200px;
height: 200px;
border: 1px solid #69ca62;
background: url(http://demo.htmleaf.com/1505/201505221738/img/Button-White-Large.png) no-repeat 50%/70% rgba(0, 0, 0, 0.1);
color: #69ca62;
box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
margin: 30px auto;
}

.bb::before,
.bb::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.bb::before,
.bb::after {
content: '';
z-index: -1;
margin: -5%;
box-shadow: inset 0 0 0 2px;
animation: clipMe 8s linear infinite;
}

.bb::before {
animation-delay: -4s;
}

@keyframes clipMe {

0%,
100% {
clip: rect(0px, 220.0px, 2px, 0px);
}

25% {
clip: rect(0px, 2px, 220.0px, 0px);
}

50% {
clip: rect(218.0px, 220.0px, 220.0px, 0px);
}

75% {
clip: rect(0px, 220.0px, 220.0px, 218.0px);
}
}
</style>
<div class="bb"></div>

盒子边框特效

效果

代码实现

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

<style>
.bb1 {
position: relative;
width: 200px;
height: 200px;
background: #666666;
margin: 0 auto;
border: 1px solid #5EF75E;
}

.bb1:before {
content: " ";
display: block;
position: absolute;
width: 200px;
height: 200px;
top: -10px;
right: -10px;
border-top: 2px solid #00FF00;
border-right: 2px solid #00FF00;
z-index: 10;
box-sizing: border-box;
clip: rect(0px, 200px, 100px, 100px);
}

.bb1:after {
content: " ";
display: block;
position: absolute;
width: 200px;
height: 200px;
left: -10px;
bottom: -10px;
border-left: 2px solid #00FF00;
border-bottom: 2px solid #00FF00;
z-index: 10;
box-sizing: border-box;
clip: rect(100px, 100px, 200px, 0px);
}
</style>
<div class="bb1"></div>
文章作者: 张复明
文章鏈接: https://hexo.zhangaming.com/2020/04/09/css-hover/
版權聲明: 本博客所有文章除特別聲明外,均採用 CC BY-NC-SA 4.0 許可協議。轉載請註明來自 阿明的博客
打賞
  • 微信
    微信
  • 支付寶
    支付寶

評論