首页制作一个占2屏的圆形，随着浏览器的宽高变化而保持原型

制作一个占2屏的圆形，随着浏览器的宽高变化而保持原型

时间: 2023-05-29 20:07:15 浏览: 79

可以使用CSS3中的`transform: scale`属性来实现这个效果。具体步骤如下： 1. 设置一个占据2屏的容器，可以使用`width: 200vw; height: 200vh;`来实现； 2. 在容器内部创建一个圆形，可以使用`border-radius: 50%;`来实现； 3. 使用`position: absolute;`将圆形定位在容器中心； 4. 使用`transform: translate(-50%, -50%) scale(1);`将圆形水平垂直居中，并且保持原型； 5. 使用`transform-origin: center center;`将圆形的变换原点设置为中心点。完整的示例代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>占2屏的圆形</title> <style> body { margin: 0; padding: 0; } #container { width: 200vw; height: 200vh; background-color: #f0f0f0; position: relative; } #circle { width: 50%; height: 0; padding-bottom: 50%; border-radius: 50%; background-color: #ff0000; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); transform-origin: center center; } </style> </head> <body> <div id="container"> <div id="circle"></div> </div> </body> </html> ``` 其中，`#container`为容器的样式，`#circle`为圆形的样式。效果如下图所示： ![占2屏的圆形](https://i.imgur.com/5q5Jq9c.png)

阅读全文