LVS mysql 电力杆 服务注册中心 微服务 方法 WorldCloud php forms search flowjs vue插件库 郑州普通话考试 jquery选择子元素 hadoop源码 map删除指定元素 matlab取绝对值 js数组截取前5个 docker保存镜像 mysql数据库 python支持中文 python返回函数 java简介 java程序实例 java编程学习入门 java中数据类型 java读取文件内容 java线程死锁 java异常处理 java定义 java获取文件 vs2010sp1 销售清单打印软件 php购物车 微信公众号点餐系统 ps反向选择的快捷键 js取余数 ps平面广告设计教程 华为杂志锁屏怎么设置 jquery添加样式
当前位置: 首页 > 学习教程  > 编程语言

面试官:知道用CSS3玩转旋转卡片的正确姿势吗?

2020/10/16 18:26:13 文章标签:

文章目录思路demo1 旋转少女效果代码实现demo2 旋转表单效果关键思路代码面试官:知道用CSS3玩转旋转卡片的正确姿势吗? 我:这个当然知道啊,我精通css3,这可难不倒我 面试官:好,那你实现一个旋…

文章目录

  • 思路
  • demo1 旋转少女
    • 效果
    • 代码实现
  • demo2 旋转表单
    • 效果
    • 关键思路
    • 代码



  • 面试官:知道用CSS3玩转旋转卡片的正确姿势吗?

  • 我:这个当然知道啊,我精通css3,这可难不倒我

  • 面试官:好,那你实现一个旋转卡片效果,这里有两张图片,你搞成旋转开包的样子

  • 我:好家伙,你要说到开包,这我可不困了,tnnd黑心游戏厂商,@#@#*@#!为了坑我们这些肥宅游戏玩家氪金开包,各种花里胡哨的下三滥手段都玩个遍,我咒它们早日倒闭!

  • 面试官:好家伙,我也这么觉得的,同是天涯沦落人,小伙子,明天来我这上班吧,今后带你吃香的喝辣的玩男人都爱玩的(游戏),一起搞大事业,干趴黑心厂家,这下割玩家韭菜的就是我们了,岂不美哉…



思路

  • 父div使用相对定位包裹着两个子div(名为son1,son2)

  • 两个子元素使用绝对定位定位在同一个位置

  • 初始时一个div翻转到后面隐藏,另一个在前面显示

  • 当鼠标悬停或点击触发旋转时,前面的子元素旋转180度,到背面隐藏;背面的元素旋转360度,转到前面显示

  • 核心:

    .前者, .后者{
        /*谁在后面谁就被隐藏起来,即背面不可见*/ 
        backface-visibility: hidden;
        transition: all 1.5s;
    }
    
    .后者{
        /*刚开始让后者转到后面去*/
        transform: rotateY(180deg);
    }
    
    触发旋转时 前者{
        /*鼠标悬浮在元素上时,前面一层的元素正旋转180度,实现前者旋转到背面,达到隐藏的效果*/
        transform: rotateY(180deg);
    }
    
    
    触发旋转时 后者{
         /*鼠标悬浮在元素上时,前面一层的元素正旋转360度,实现前者旋转到前面,达到显示的效果 */
         transform: rotateY(360deg);
    }
    
  • 如果想附加一些角度效果,形成仰视旋转的样子,可使用perspective属性。

demo1 旋转少女

开包游戏都玩过吧?卡片转啊转,开出几个老婆出来,好家伙,转来转去真可爱。

效果

img



代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>卡片翻转</title>
    <style>
        .outside {
            width: 220px;
            height: 276px;
            cursor: pointer;
            margin: 50px auto;
            position: relative;
            perspective: 500px;
        }

        .outside img {
            max-width: 220px;
        }

        .front_img, .back_img {
            width: 100%;
            height: 100%;
            position: absolute;

            /* 子元素相对于父元素使用绝对定位,两个子元素都定位到同一个位置,实现重叠的效果 */
            top: 0;
            left: 0;
            perspective: 1000px;
            backface-visibility: hidden;
            transition: all 1.5s;
        }

        .back_img {
            transform: rotateY(180deg);
        }

        .outside:hover .front_img {
            transform: rotateY(180deg);
        }

        .outside:hover .back_img {
            /*鼠标悬浮在元素上时,前面一层的图片正旋转360度,实现前面的图片旋转到前面,达到显示的效果 */
            transform: rotateY(360deg);
        }
    </style>
</head>
<body>
<div>
    <div class="outside">
        <div class="front_img">
            <img src="https://i0.hdslb.com/bfs/article/1e3c40b20b678715fc280a0d102589b3393526a9.jpg@1320w_1904h.webp" alt="front_picture"/>
        </div>
        <div class="back_img">
            <img src="https://i0.hdslb.com/bfs/article/9d34dd08bf746e07bcb55a08d504123cfd7cbb27.jpg@1320w_1980h.webp"
                 alt="back_ground"/>
        </div>
    </div>
</div>
</body>
</html>

demo2 旋转表单

实现一个好看地一批的登录表单?来,这就撸一个出来。

效果

img

关键思路

  • 通过js给父元素动态添加registering(或者叫其它)的类名
  • 有login在时,.registering下的.demo-login旋转180度到前后面去,.demo-register`旋转到前面来
  • 没login时,.registering .demo-register旋转180度到前后面去,.demo-login旋转到前面来
/* 关键部分 */
.registering .demo-login, .demo-register {
    /* translate按哪个轴进行移动 水平方向:正右负左 垂直:负上正下 元素中心和父元素中心保持对齐 水平垂直居中 */
    transform: perspective(1000px) translate(-50%, -50%) rotateY(180deg);
    backface-visibility: hidden;
    transition: all 1.5s;
}

.registering .demo-register, .demo-login {
    transform: perspective(1000px) translate(-50%, -50%) rotateY(0deg);
    backface-visibility: hidden;
    transition: all 1.5s;
}



代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1156682_y7tsfj12kx.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body, html {
            height: 100%;
        }

        body {
            font: 18px/1.5em Arial;
            color: #000;
            /*background: url("http://pic1.win4000.com/wallpaper/0/544b36fae2969.jpg") center center no-repeat;*/
            background-size: cover;
        }

        a {
            color: #000;
            /* 取消a标签的下划线 */
            text-decoration: none;
        }

        ul {
            /* 取消列表的点 */
            list-style: none;
        }

        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }


        header {
            height: 50px;
            position: relative;
        }


        header a {
            color: #000;
            border: 1px solid blue;
            border-radius: 50%;
            position: absolute;
            top: 15px;
            right: 20px;
        }

        .demo {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 500px;
            padding: 16px;
            background-color: #fff;
            box-shadow: 0 3px 4px 5px rgba(0, 0, 0, 0.2);
        }

        .demo-login, .demo-register {
            border: 2px solid #345dc2;
        }

        .demo .close {
            position: absolute;
            top: 9px;
            right: -13px;
        }


        .demo ul {
            /*border: 1px solid black;*/
            width: 40%;
            margin: 18px auto;
        }

        .demo ul li:first-child {
            float: left;
            margin: 5px 10px;
            text-align: center;
        }

        .demo ul li:last-child {
            float: right;
            margin: 5px 10px;
            text-align: center;
        }


        .demo li a {
            font-size: 20px;
            color: #666;
        }


        .demo li a.active {
            border-bottom: 3px solid #444;
        }

        .demo .info {
            color: #ff0037;
            font-size: 12px;
            margin: 0 62px;
        }

        .demo .username, .password {
            border: 1px solid #ccc;
            margin: 25px auto;
            width: 370px;
        }


        .demo span {
            display: inline-block;
            margin: 10px 8px;
        }

        .demo .text {
            /* 取消input的最外层框 */
            border: none;
            height: 46px;
            width: 330px;
        }


        .demo input {
            /* outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 */
            outline: medium;
            padding: 5px 12px;
        }

        .demo .input-field {
            width: 50%;
            /*border: 1px solid black;*/
            /*display: inline-block;*/
            background: #fff;
            margin: 0 auto 20px;
            box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
        }

        .demo input[type="submit"] { /* 按钮美化 */
            width: 100%; /* 宽度 */
            height: 100%; /* 高度 */
            border-width: 0; /* 边框宽度 */
            border-radius: 10px; /* 边框半径 */
            background: #1E90FF; /* 背景颜色 */
            cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
            outline: none; /* 不显示轮廓线 */
            color: white; /* 字体颜色 */
            font-size: 17px; /* 字体大小 */
        }

        .demo input[type="submit"]:hover { /* 鼠标移入按钮范围时改变颜色 */
            background: #5599FF;
        }


        /* 关键部分 */
        .registering .demo-login, .demo-register {
            /* translate按哪个轴进行移动 水平方向:正右负左 垂直:负上正下 元素中心和父元素中心保持对齐 水平垂直居中 */
            transform: perspective(1000px) translate(-50%, -50%) rotateY(180deg);
            backface-visibility: hidden;
            transition: all 1.5s;
        }

        .registering .demo-register, .demo-login {
            transform: perspective(1000px) translate(-50%, -50%) rotateY(0deg);
            backface-visibility: hidden;
            transition: all 1.5s;
        }
    </style>
</head>
<body>

<main>
    <div class="content">
        <div class="demo demo-login">
            <a href="#" class="iconfont icon-guanbi close"></a>
            <ul class="clearfix">
                <li><a href="#" class="login active">登录</a></li>
                <li><a href="#" class="register active">注册</a></li>
            </ul>
            <div class="info"></div>
            <form action="/login" method="post">
                <div class="username">
                    <span class="iconfont icon-login2"></span>
                    <label>
                        <input class="text" type="text" name="username" placeholder="请输入用户名">
                    </label>
                </div>
                <div class="password">
                    <span class="iconfont icon-mima"></span>
                    <label>
                        <input class="text" type="password" name="password" placeholder="请输入密码">
                    </label>
                </div>
                <div class="input-field">
                    <input type="submit" value="登录">
                </div>
            </form>
        </div>

        <!-- 注册 -->
        <div class="demo demo-register">
            <a href="#" class="iconfont icon-guanbi close"></a>
            <ul class="clearfix">
                <li><a href="#" class="login active">登录</a></li>
                <li><a href="#" class="register active">注册</a></li>
            </ul>
            <div class="info"></div>
            <form action="/register" method="post">
                <div class="username">
                    <span class="iconfont icon-login2"></span>
                    <input class="text" type="text" name="username" placeholder="输入用户名">
                </div>
                <div class="password">
                    <span class="iconfont icon-mima"></span>
                    <input class="text" type="password" name="password" placeholder="输入密码">
                </div>
                <div class="password">
                    <span class="iconfont icon-mima"></span>
                    <input class="text" type="password" name="password" placeholder="再次输入密码">
                </div>
                <div class="input-field">
                    <input type="submit" value="注册">
                </div>
            </form>
        </div>
    </div>
</main>

<script>
    function $(selector) {
        return document.querySelector(selector);
    }

    // 事件代理
    $('.content').addEventListener('click', function (e) {
        e.stopPropagation();

        console.log(e.target);

        // 切换到登录状态
        if (e.target.classList.contains('login')) {
            console.log("切换到登录状态")
            $('.content li .register').classList.remove('active');
            $('main').classList.remove('registering');
        }

        // 切换到注册状态
        if (e.target.classList.contains('register')) {
            console.log("切换到注册状态")
            $('.content .demo-register li .login').classList.remove('active');
            $('main').classList.add('registering');
        }

        if (e.target.classList.contains('close')) {
            $('.content').style.display = 'none';
        }
    })

    // 点击空白处关闭
    document.addEventListener('click', function (e) {
        e.stopPropagation();
        $('.content').style.display = 'none';
    })

    // 初始默认为登录状态
    $('.content li .register').classList.remove('active');

</script>
</body>
</html>

本文链接: http://www.dtmao.cc/news_show_300430.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?