如何利用css实现放大缩小关闭效果


本文摘自PHP中文网,作者V,侵删。

先来看一下效果图:

d8b755ae83fb91d17c4f07398e87d2b.png

(推荐教程: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

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

<template> <div> <button>缩小</button> <button>放大</button> <button>关闭</button> </div></template> <script>export default {

data() {

return {

flag_fullpageWebView: 1

}

;

}

};

</script> <style scoped>.windowAction {

margin-top: -5px;

-webkit-app-region: no-drag;

min-width: 70px;

text-align: right;

button {

&:hover {

color: #a8aabd;

}

} .min {

width: 14px;

height: 14px;

background-color: transparent;

font-size: 0;

margin-right: 18px;

position: relative;

color: #878896;

&:after {

content: "";

width: 100%;

position: absolute;

left: 0;

bottom: 0;

border-bottom: 2px solid;

}

} .fullpage {

width: 16px;

height: 16px;

color: #878896;

border: 2px solid;

background-color: transparent;

font-size: 0;

margin-right: 18px;

}

.close {

width: 18px;

height: 18px;

font-size: 0;

background-color: transparent;

position: relative;

color: #878896;

transform: rotate(45deg) translate(-2px, 2px);

&:before, &:after {

content: "";

position: absolute;

}

&:before {

width: 100%;

left: 0;

top: 50%;

transform: translateY(-50%);

border-top: 2px solid;

}

&:after {

height: 100%;

left: 50%;

top: 0;

transform: translateX(-50%);

border-left: 2px solid;

}

}

}

</style>

相关视频教程推荐:css视频教程

以上就是如何利用css实现放大缩小关闭效果的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

css background为什么不显示

html中文本标签,超链接标签以及图像标签的简单介绍

css怎么设置超链接不可点击

css怎么设置div的透明度

css如何实现表格实线

推荐一个chrome devtools实用小插件:css overview panel

css什么是圣杯布局?

html5 border属性怎么设置?html5 table中的border属性介绍

css层叠样式表是什么

css实现一个简单的扁平化按钮

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...