CSS 实例之打开大门

番茄西红柿发布于2019-04-23 13:22 / 1617人阅读

摘要：本个实例主要的效果如下图所示本案例主要运用到了旋转和定位技术。给左右的门设置相关属性，这里给出左盒子的相关属性。右盒子只需将定位改为右边距离为，以及将旋转轴改为右侧即可。设置大小与边框设置为让其变成圆形。

本个实例主要的效果如下图所示

本案例主要运用到了3D旋转和定位技术。具体步骤如下：

1、首先在页面主体加三个很简单的div标签：

 <div class="door">
        <div class="door-l">div>
        <div class="door-r">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、添加门上的小圆环，在这里是使用伪元素 before 进行添加的。

　　（1）、设置大小与边框

　　（2）、设置border-radius 为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 lang="en">

<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>Documenttitle>
    <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 class="door">
        <div class="door-l">div>
        <div class="door-r">div>
    div>
body>

html>

View Code

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1775.html

LeetCode 之 JavaScript 解答第21题 —— 合并两个有序链表（Merge Two

摘要：什么意思呢比如上方合并链表的代码，分别明确函数的参数和返回值是什么参数是两个合并的链表结点头结点。返回值是合并后的链表。 Time：2019/4/9Title: Merge Two Sorted ListsDifficulty: EasyAuthor: 小鹿题目：Merge Two Sorted Lists Merge two sorted linked lists and re...

wdzgege 2019-08-23 16:51 评论0 收藏0
(十四)java多线程之死锁以及解决方案

摘要：本人邮箱欢迎转载转载请注明网址代码已经全部托管有需要的同学自行下载引言多线程如果设计的不合理的话很可能就会出现死锁当两个或者多个线程同事想要去获取共享资源的锁时但每个线程都要等其他线程把他们各自的锁给释放才能继续运行这就是死锁出现死锁必须具本人邮箱: 欢迎转载,转载请注明网址 http://blog.csdn.net/tianshi_kcogithub: https://github...

wendux 2019-08-14 18:10 评论0 收藏0
请行动2019 | 一切过往，皆是序章

摘要：当初月初怀揣着梦想踏入了这座陌生的城市北京，那时候的北京酷热难耐，而我依旧在外四处奔波。燥热的北京已经无法安放迫切的心灵，当面试一次次的从自己身边划走。北京的夜晚没有了白天的燥热，也少了几分嘈杂，凉风习习。人生苦短。新年的开端是一份可遇不可求的缘。一年等一回，当新岁的第一轮红日从东方升起时,它让我们格外欣喜,值得我们格外珍惜。回想起自己过去一年，所有的经历历历在目。当初7月初怀揣...

Tonny 2019-08-23 14:27 评论0 收藏0
Laravel 上手教程之实现用户注册和登录

摘要：在文件的标签中加上以下代码新手上路注册登陆上面只是引用了一些简单的的，也没什么难的，不用伤心。 Laravel身为最优雅的PHP框架，很多学习PHP的小伙伴造就对Laravel垂涎欲滴。今天就来实现你的愿望，让我们一起从零开始，利用Laravel实现Web应用最常见的注册和登录功能！所有的课程源码已放在Github上：laravel-start. Race Start ! 首先我们来...

stormgens 2019-06-27 11:04 评论0 收藏0