How to use css to achieve zoom in and out effect

Let’s take a look at the renderings first:

(Recommended tutorial: CSS tutorial)

Code examples are as follows:

<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>

Recommended related video tutorials: css video tutorial

The above is the detailed content of How to use css to achieve zoom in and out effect. For more information, please follow other related articles on the PHP Chinese website!