CSS 实例之如何实现打开大门的效果? 下面本篇文章就来给大家通过示例来介绍一下使用 CSS 实现打开大门效果的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
主要运用到了 3D 旋转和定位技术.
效果如下:
具体步骤如下:
- <div>
- <div></div>
- <div></div>
- </div>
2, 给外层盒子 (.door) 加上基本的属性, 背景, 视距以及相对定位(子盒子要用到绝对定位, 所以父盒子最好加上相对定位).
- .door {
- width: 450px;
- height: 450px;
- border: 1px solid #000000;
- margin: 100px auto;
- background: url(Images/men.PNG) no-repeat;
- background-size: 100% 100%;
- position: relative;
- perspective: 1000px;
- }
3, 给左右的门设置相关属性, 此处称为左盒子的相关属性. 右盒子只需将定位对准右边距离为 0, 以及将旋转轴替换正确即可.
- .door-l {
- width: 50%;
- height: 100%;
- background-color: brown;
- position: absolute;
- top: 0;
- transition: all 0.5s;
- left: 0;
- border-right: 1px solid #000000;
- transform-origin: left;
- }
4, 添加门上的小圆环, 在进行添加的之前在这里是使用伪元素.
(1), 设置大小与边框
(2), 设置边框半径为 50%让其变成圆形.
(3), 设置定位垂直居中并靠里面有一定距离.
- .door-l::before {
- content: "";
- border: 1px solid #000000;
- width: 20px;
- height: 20px;
- position: absolute;
- top: 50%;
- border-radius: 50%;
- transform: translateY(-50%);
- right: 5px;
- }
5, 最后设置旋转度数, 我这里是设置了 120 度(注意度数的正负代表旋转方向)
- .door:hover .door-l {
- transform: rotateY(-120deg);
- }
完整代码如下:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>
- Document
- </title>
- <style>
- .door { width: 450px; height: 450px; border: 1px solid #000000; margin:
- 100px auto; background: url(Images/men.PNG) no-repeat; background-size:
- 100% 100%; position: relative; perspective: 1000px; } .door-l, .door-r
- { width: 50%; height: 100%; background-color: brown; position: absolute;
- top: 0; transition: all 0.5s; } .door-l { left: 0; border-right: 1px solid
- #000000; transform-origin: left; } .door-r { right: 0; border-left: 1px
- solid #000000; transform-origin: right; } .door-l::before, .door-r::before
- { content: ""; border: 1px solid #000000; width: 20px; height: 20px; position:
- absolute; top: 50%; border-radius: 50%; transform: translateY(-50%); }
- .door-l::before { right: 5px; } .door-r::before { left: 5px; } .door:hover
- .door-l { transform: rotateY(-120deg); } .door:hover .door-r { transform:
- rotateY(120deg); }
- </style>
- </head>
- <body>
- <div>
- <div>
- </div>
- <div>
- </div>
- </div>
- </body>
- </HTML>
本文转载自: https://segmentfault.com/a/1190000017213065
更多 web 开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/css/16135.html