HTML5+CSS3小实例：花瓣样式Loading加载动画效果

发布时间：2023年12月20日

?一、运行效果

图片效果

二、项目概述

?一、运行效果

图片效果

二、项目概述

????????这个项目是一个加载动画效果，用于展示一个花瓣样式的loading效果。整个页面的背景颜色为深蓝色（#161B29），并且居中显示。加载动画的容器使用了一个类名为"container"的div元素，设置了宽度为40vw，高度为40vw，并且居中显示在页面中央。

????????加载动画效果由8个类名为"common"的div元素组成，每个div元素都有一个不同的类名，分别是"one"、"two"、"three"、"four"、"five"、"six"、"seven"、"eight"。这些div元素通过设置不同的位置和旋转角度来形成花瓣的样式。每个div元素都有一个动画效果，通过设置animation属性来实现。

????????除了花瓣效果，加载动画还包括一个进度条效果。进度条由一个类名为"bar"的div元素和一个类名为"progress"的div元素组成。进度条的背景颜色为粉红色（#E645D0），进度条的颜色为青色（#17E1E6），通过设置左边距的值来实现进度条的动画效果。

????????整个页面还包括了淡入和淡出的动画效果。通过设置类名为"fade-in"和"out"的div元素的动画属性，实现了页面在加载时的淡入效果和在加载完毕后的淡出效果。

三、开发环境

开发环境：VsCode
编程语言：HTML5+CSS3
操作系统：Windows

四、实现步骤及代码

1.创建空文件夹

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号《编程乐学》- 花瓣样式Loading加载动画</title>
   
</head>

<body>
  
</body>

</html>

2.完成页面内容

  <div class="out">
        <div class="fade-in">
            <div class="container">
                <div class="one common"></div>
                <div class="two common"></div>
                <div class="three common"></div>
                <div class="four common"></div>
                <div class="five common"></div>
                <div class="six common"></div>
                <div class="seven common"></div>
                <div class="eight common"></div>
            </div>
            <div class="bar">
                <div class="progress"></div>
            </div>
        </div>
    </div>

3.完成css样式? ??? ?

????????用于设置页面的样式。其中包括了背景颜色、容器大小、元素的位置和动画效果等。

????????首先是设置了页面的背景颜色为深蓝色（#161B29）。

????????接下来是容器的样式设置，设置了容器的宽度和高度为40vw（视口宽度的40%），并将其居中显示。

????????然后是各个元素的样式设置，这些元素被称为“common”，共有8个，每个元素都有一个不同的类名（one、two、three...），这些类名用于设置元素的位置和动画效果。每个元素都使用了绝对定位，通过设置left、right、top和bottom属性来控制元素的位置。并设置了元素的旋转角度和阴影效果。

????????接下来是进度条的样式设置，包括了进度条的宽度、高度、位置和背景色等。

????????最后是动画效果的设置，通过使用@keyframes关键字定义了不同的动画效果，然后通过animation属性将这些动画效果应用到不同的元素上。

 <style>
        @charset "utf-8";

        body {
            background: #161B29;
            margin: 0 auto;
            height: 100%;
            width: 100%;
        }

        .container {
            width: 40vw;
            height: 40vw;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        .common {
            height: 5vw;
            max-height: 100%;
            overflow: auto;
            width: 2vw;
            margin: auto;
            max-width: 100%;
            position: absolute;
            border-radius: 0vw 10vw 0vw 10vw;
            box-shadow: inset 0vw 0vw 0vw .1vw #E645D0, 0vw 0vw 1.5vw 0vw #E645D0;
        }

        .one {
            transform: rotate(45deg);
            left: 0;
            right: 0;
            top: 0;
            bottom: 7.5vw;
        }

        .two {
            transform: rotate(90deg);
            left: 5.5vw;
            right: 0;
            top: 0;
            bottom: 5.5vw;
        }

        .three {
            transform: rotate(135deg);
            left: 7.5vw;
            right: 0;
            top: 0;
            bottom: 0;
        }

        .four {
            transform: rotate(180deg);
            left: 5.5vw;
            right: 0;
            top: 5.5vw;
            bottom: 0;
        }

        .five {
            transform: rotate(225deg);
            left: 0;
            right: 0;
            top: 7.5vw;
            bottom: 0;
        }

        .six {
            transform: rotate(270deg);
            left: 0;
            right: 5.5vw;
            top: 5.5vw;
            bottom: 0;
        }

        .seven {
            transform: rotate(315deg);
            left: 0;
            right: 7.5vw;
            top: 0;
            bottom: 0;
        }

        .eight {
            transform: rotate(360deg);
            left: 0;
            right: 5.5vw;
            top: 0;
            bottom: 5.5vw;
        }

        .bar {
            width: 12vw;
            height: .25vw;
            left: 0;
            right: 0;
            top: 16vw;
            bottom: 0;
            margin: auto;
            overflow: hidden;
            background: #E645D0;
        }

        .progress {
            width: 12vw;
            height: .5vw;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            overflow: hidden;
            background: #17E1E6;
        }

        .one {
            animation: one 1s ease infinite;
            -moz-animation: one 1s ease infinite;
            /* Firefox */
            -webkit-animation: one 1s ease infinite;
            /* Safari and Chrome */
            -o-animation: one 1s ease infinite;
            /* Opera */
        }

        @keyframes one {

            0%,
            100% {}

            50% {
                box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
            }
        }

        .two {
            animation: two 1s .125s ease infinite;
            -moz-animation: two 1s .125s ease infinite;
            /* Firefox */
            -webkit-animation: two 1s .125s ease infinite;
            /* Safari and Chrome */
            -o-animation: two 1s .125s ease infinite;
            /* Opera */
        }

        @keyframes two {

            0%,
            100% {}

            50% {
                box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
            }
        }

        .three {
            animation: three 1s .25s ease infinite;
            -moz-animation: three 1s .25s ease infinite;
            /* Firefox */
            -webkit-animation: three 1s .25s ease infinite;
            /* Safari and Chrome */
            -o-animation: three 1s .25s ease infinite;
            /* Opera */
        }

        @keyframes three {

            0%,
            100% {}

            50% {
                box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
            }
        }

        .four {
            animation: four 1s .375s ease infinite;
            -moz-animation: four 1s .375s ease infinite;
            /* Firefox */
            -webkit-animation: four 1s .375s ease infinite;
            /* Safari and Chrome */
            -o-animation: four 1s .375s ease infinite;
            /* Opera */
        }

     
        .five {
            animation: five 1s .5s ease infinite;
            -moz-animation: five 1s .5s ease infinite;
            /* Firefox */
            -webkit-animation: five 1s .5s ease infinite;
            /* Safari and Chrome */
            -o-animation: five 1s .5s ease infinite;
            /* Opera */
        }

        @keyframes five {

            0%,
            100% {}

            50% {
                box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
            }
        }

        .six {
            animation: six 1s .625s ease infinite;
            -moz-animation: six 1s .625s ease infinite;
            /* Firefox */
            -webkit-animation: six 1s .625s ease infinite;
            /* Safari and Chrome */
            -o-animation: six 1s .625s ease infinite;
            /* Opera */
        }

        @keyframes six {

            0%,
            100% {}

            50% {
                box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
            }
        }

        .seven {
            animation: seven 1s .750s ease infinite;
            -moz-animation: seven 1s .750s ease infinite;
            /* Firefox */
            -webkit-animation: seven 1s .750s ease infinite;
            /* Safari and Chrome */
            -o-animation: seven 1s .750s ease infinite;
            /* Opera */
        }


        .eight {
            animation: eight 1s .875s ease infinite;
            -moz-animation: eight 1s .875s ease infinite;
            /* Firefox */
            -webkit-animation: eight 1s .875s ease infinite;
            /* Safari and Chrome */
            -o-animation: eight 1s .875s ease infinite;
            /* Opera */
        }

        @keyframes eight {

            0%,
            100% {}

            50% {
                box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
            }
        }

     
        .progress {
            animation: progress 15s ease;
            -moz-animation: progress 15s ease;
            /* Firefox */
            -webkit-animation: progress 15s ease;
            /* Safari and Chrome */
            -o-animation: progress 15s ease;
            /* Opera */
        }

   
        .fade-in {
            animation: fade-in 2s ease;
            -moz-animation: fade-in 2s ease;
            /* Firefox */
            -webkit-animation: fade-in 2s ease;
            /* Safari and Chrome */
            -o-animation: fade-in 2s ease;
            /* Opera */
        }

        @keyframes fade-in {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
    </style>

五、项目总结? ?

? ?? ?这个项目通过使用CSS样式表代码实现了一个花瓣样式的loading加载动画效果，包括背景颜色、容器大小、元素位置和动画等。通过设置不同的动画属性和关键帧，实现了花瓣的旋转效果、进度条的动画效果以及页面的淡入和淡出效果。

六、源码获取

?????????还可以关注宫纵号《编程乐学》，菜单栏有很多优质的开源项目以及更多的编程资料等你来学习。

文章来源:https://blog.csdn.net/qq_29823791/article/details/135091624
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！