前端每日挑战の雨伞toggle控件

最新推荐文章于 2019-09-09 15:54:11 发布

油炸果XnW

最新推荐文章于 2019-09-09 15:54:11 发布

阅读量262

点赞数

分类专栏：每日挑战学习

本文链接：https://blog.csdn.net/weixin_41223912/article/details/83178271

版权

每日挑战学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前端每日挑战の雨伞toggle控件

- 内容摘要
- 代码

内容摘要

伤心啊，写了好几天博客没人看~不过没关系，写博客的主要目的还是为了技术积累。在segmentFault上看到有前端每日专栏，觉得不错，正好css基础还不够巩固决定跟着该专栏每天跟着学习一些有趣的纯html+css制作的效果，动画出处：https://segmentfault.com/a/1190000016724029

最终效果预览：https://codepen.io/comehope/pen/pxLbjv

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雨伞toggle</title>
    <style>
        body{
            margin: 0;
            height: 100vh;
            /*width: 100vw;*/
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(skyblue,lightblue);
        }
        .umbrella *::before,.umbrella *::after{
            content: '';
            position: absolute;
        }
        :root{
            --font-size: 10px ;
        }
        .umbrella {
            position: relative;
            width: 25em;
            height: 26em;
            font-size: var(--font-size);
            /*border: 1px solid red;*/

            /*让伞倾斜*/
            transform: rotate(-30deg);
        }
        .umbrella .canopy{
            position: absolute;
            width: inherit;
            height: 5.5em;
            top: 2.5em;
            /*border: 1px solid red;*/

            /*伞盖合上*/
            /*transform-origin 属性允许您改变被转换元素的位置。*/
            transform-origin: top;
            -webkit-transform: scale(0.08, 4);
            -moz-transform: scale(0.08, 4);
            -ms-transform: scale(0.08, 4);
            -o-transform: scale(0.08, 4);
            transform: scale(0.08, 4);
        }
        .umbrella .canopy::before{
            width: inherit;
            height: 12.5em;
            background: rgb(100,100,100);
            border-radius: 12.5em 12.5em 0 0;
            transform: scaleY(0.4);
            top: -4em;

        }
        .umbrella .canopy::after{
            width: inherit;
            height: 1.5em;
            background-color: #333333;
            top: 4em;
            border-radius: 50%;

            /*隐藏伞盖的下半部分*/
            -webkit-transform: scaleY(0);
            -moz-transform: scaleY(0);
            -ms-transform: scaleY(0);
            -o-transform: scaleY(0);
            transform: scaleY(0);
        }
        .umbrella .shaft{
            position: absolute;
            width: 0.8em;
            height: 18em;
            background-color: rgba(100,100,100,0.7);
            top:5.5em;
            left: calc((100% - 0.8em)/2);
        }
        /*画顶部露出伞盖的尖头*/
        .umbrella .shaft::before{
        width: 6em;
            height: 3em;
            background-color: rgba(100,100,100,0.7);
            left: calc((100% - 6em) / 2);
            top: -5.5em;
            border-radius: 6em 6em 0 0;
            transform: scaleX(0.1);
        }
        /*伞的钩把手*/
        .umbrella .shaft::after{
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            width: 4em;
            height: 2.5em;
            border: 1em solid #333;
            top: 100%;
            left: calc(50% - 4em + 1em / 2);
            border-radius: 0 0 2.5em 2.5em;
            border-top: none;
        }
        /*设置控件 叠于伞的上层*/
        .toggle{
            position: absolute;
            filter: opacity(0);
            width: 25em;
            height: 26em;
            font-size: var(--font-size);
            cursor: pointer;
            z-index: 2;
        }
        /*把伞正过来*/
        .toggle:checked ~ .umbrella{
            transform: rotate(0deg);
        }
        /*打开伞盖*/
        .toggle:checked ~ .umbrella .canopy{
            -webkit-transform: scale(1, 1);
            -moz-transform: scale(1, 1);
            -ms-transform: scale(1, 1);
            -o-transform: scale(1, 1);
            transform: scale(1, 1);
        }
        /*显示很出伞盖下半部分*/
        .toggle:checked ~ .umbrella .canopy::after{
            transform: scaleY(1);
        }
        /*设置缓动效果*/
        .umbrella, .umbrella .canopy ,.umbrella .canopy::after{
            -webkit-transition: 0.3s cubic-bezier(0.5, -0.25, 0.5, 1.25);
            -moz-transition: 0.3s cubic-bezier(0.5, -0.25, 0.5, 1.25);
            -ms-transition: 0.3s cubic-bezier(0.5, -0.25, 0.5, 1.25);
            -o-transition: 0.3s cubic-bezier(0.5, -0.25, 0.5, 1.25);
            transition: 0.3s cubic-bezier(0.5, -0.25, 0.5, 1.25);
        }

    </style>
</head>
<body>
    <input type="checkbox" class="toggle">
    <figure class="umbrella">
        <div class="canopy"></div>
        <div class="shaft"></div>
    </figure>
</body>
</html>