每日挑战の浮动热气球

最新推荐文章于 2024-08-08 16:10:15 发布

油炸果XnW

最新推荐文章于 2024-08-08 16:10:15 发布

阅读量151

点赞数

分类专栏：每日挑战学习文章标签：前端

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

版权

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

11 篇文章 0 订阅

订阅专栏

每日挑战の浮动热气球

内容摘要

在segmentFault上看到有前端每日专栏，觉得不错，正好css基础还不够巩固决定跟着该专栏每天跟着学习一些有趣的纯html+css制作的效果，动画出处：https://segmentfault.com/a/1190000016668903

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

内容学习

本人把代码一点一点重新敲了遍，毕竟是初学不久还有很多不懂的地方便自己做了注释和解释，也希望未来自己能好好学好css，尽量能独立创建动画吧~

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>balloon</title>
    <style>
        body{
            margin: 0px;
            height: 100vh;
            /*弹性布局 项目位于容器的中心*/
            display: flex;
            align-items: center;
            justify-content: center;

            background: linear-gradient(deepskyblue,skyblue,lightblue 20%);
        }

        .balloon{
            width: 12em;
            height: 19em;
            font-size: 16px;
            display: flex;
            /*列显示*/
            flex-direction: column;
            /*位于容器中心*/
            align-items: center;
        }
        /*定义伞盖*/
        .envelope{
            position: relative;
            width: inherit;
            height: 16em;
            /*border: 5px solid blue  ;*/
            /*隐藏超出容器外部的部分*/
            overflow: hidden;
        }
        /*绘制伞上端圆形*/
        .envelope span{
            position: absolute;
            width: inherit;
            height: 12em;
            border-radius: 50%;
            color: orange;
            /*currentColor表示继承字体color的颜色*/
            background-color: currentColor;
        }
        /*利用伪元素插入，border法绘制三角形*/
        .envelope span::before{
            content:'';
            position: absolute;
            width: 0;
            height: 0;
            border-width: 10em 5.5em 0em 5.5em;
            border-style: solid;
            border-color: currentColor transparent transparent transparent;
            top: 8.45em;
            left: calc(50% - 5.5em);
        }

        .envelope span:nth-child(2){
            /*通过设置 X 轴的值来定义缩放转换。*/
            transform: scaleX(0.4);
            /*图像滤波处理，提亮和调整对比度*/
            filter: brightness(0.85) contrast(1.4);
        }

        .basket{
            position: relative;
            width: 2em;
            height: 3em;
        }

        .basket::before{
            content: "";
            position: absolute;
            width: inherit;
            height: 1.6em;
            background-color: peru;
            bottom: 0;
            border-radius: 0 0 0.5em 0.5em;
            /*border: 2px solid blue;*/
        }

        .basket::after{
            content: "";
            position: absolute;
            width: 105%;
            height: 0.3em;
            background-color: saddlebrown;
            left: calc((100% - 105%)/2);
            top : 1.3em;
            border-radius: 0.3em;
        }

        .basket span{
            position: absolute;
            width: 0.1em;
            height: 1.5em;
            background-color: burlywood;

            left: calc((var(--n) - 1) * 0.6em);
            transform-origin: bottom ;
            transform: rotate(calc(var(--r) * 7deg));
        }

        .basket span:nth-child(1){
            --n:1;--r:-2;
        }
        .basket span:nth-child(2){
            --n:2;--r:-1;
        }
        .basket span:nth-child(3){
            --n:3;--r:1;
        }
        .basket span:nth-child(4){
            --n:4;--r:2;
        }

        .balloon{
            animation: drift 2s infinite alternate;
        }
        /*定义浮动动画*/
        @keyframes drift{
            to{
                transform: translateY(-5%);
            }
        }
    </style>
</head>
<body>
    <figure class = "balloon">
        <!--<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。!&ndash;&gt;-->
        <div class="envelope">
            <span></span>
            <span></span>
        </div>
        <div class="basket">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </figure>
</body>
</html>

油炸果XnW

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
每日挑战の浮动热气球

每日挑战の浮动热气球内容摘要内容学习代码内容摘要在segmentFault上看到有前端每日专栏，觉得不错，正好css基础还不够巩固决定跟着该专栏每天跟着学习一些有趣的纯html+css制作的效果，动画出处：https://segmentfault.com/a/1190000016668903最终效果预览：https://codepen.io/comehope/pen/KGveaN内容学习...
复制链接

扫一扫

专栏目录