本篇文章给大家带来的内容是 CSS 如何绘制放大缩小关闭按钮效果?(附代码). 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
如图所示:
使用 CSS 绘制上述三个按钮:
- <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>
更多 Web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/css/17562.html