> For the complete documentation index, see [llms.txt](https://sherwinshen.gitbook.io/qian-duan-xue-xi/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sherwinshen.gitbook.io/qian-duan-xue-xi/frontend-basic/css/css-topics/css-demo.md). # CSS 案例 ## 1. 鼠标悬停弹出微信二维码 通过`transform: scale(0)`和`opacity: 0`实现二维码隐藏，再通过`:hover`更改对应元素的`transform: scale(1)`和`opacity: 1`实现二维码显示，其中二维码的隐藏变化的基准点可以通过`transform-origin`来设置。 ![](/files/-M_yYqoTzg_qyz2xJqGj) ```markup Document ``` ## 2. 切换按钮 ![](/files/-M_yTOVcDM6l3wLpD9OZ) ```markup Document ``` {% hint style="info" %} 如果你对内容有任何疑问，欢迎提交 [❕issues](https://github.com/MrEnvision/Front-end_learning_notes/issues) 或 [✉️ email](mailto:EnvisionShen@gmail.com) {% endhint %}