css的小特效

白色玫瑰 程序猿

时间: 2023-07-15 阅读: 1 字数:5730

css特效 css 布局
{}
好的特效有时会让页面更华丽，锦上添花

今天写项目的时候，想起来有些东西加载的时候，需要一些特效，如果用图片的话，比较对页面加载会稍微影响，但是不能没有，不然影响用户体验，所以就想起来以前写的css做得小demo，今天给你们分享一下，勿喷哦 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        .box{
            width: 100%;
            padding: 3%;
            box-sizing: border-box;
            overflow: hidden;
        }
        .box .loader{
            width: 30%;
            float: left;
            height: 200px;
            margin-right: 3%;
            border: 1px solid #ccc;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;        
        }
        .loading-1{
            position: relative;
        }
        .loading-1 i{
            position: absolute;
            width: 30px;
            height: 30px;border-radius: 50%;
            background: #CCCCCC;
            left:-15px;
            top: -15px;
        }
        .loading-1 i:nth-child(1){
            animation: loading-1 1s linear infinite;
        }
        .loading-1 i:nth-child(2){
            animation: loading-1 1.8s linear infinite;
        }
        .loading-1 i:nth-child(3){
            animation: loading-1 2.6s linear infinite;
        }
        @keyframes loading-1{
            0%{transform: scale(0);opacity: 1;}
            5%{opacity: 1.5;}
            100%{transform: scale(3);opacity: 0;}
        }
        /*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
        .loading-2{
            position: relative;
            
        }
        .loading-2 i{
            position: absolute;
            border-radius: 50%;
            border-top: 3px solid transparent;
            border-bottom: 3px solid transparent;
            border-left: 3px solid #333333;
            border-right: 3px solid #333333;    
        }
        .loading-2 i:nth-child(1){
            width: 40px;
            height: 40px;
            position: absolute;
            top: -20px;
            left: -20px;
            animation: op 1s linear infinite;
        }
        .loading-2 i:nth-child(2){
            width: 25px;
            height: 25px;
            position: absolute;
            left: -12.5px;
            top: -12.5px;
            animation: lo 1s linear infinite;
        }
        @keyframes op{
            0%{transform: rotate(0deg) scale(1)}
            50%{transform: rotate(180deg) scale(1.5)}
            100%{transform: rotate(360deg) scale(1) }
        }
        @keyframes lo{
            0%{transform: rotate(0deg) scale(1) }
            50%{transform: rotate(-180deg) scale(0.5)}
            100%{transform: rotate(-360deg) scale(1) }
        }
        /*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
        .loading-3{
            position: relative;
            
        }
        .loading-3 i{
            width: 20px;height: 20px;
            border-radius: 50%;background: #333333;
            position: absolute;left: -10px;top:-10px;
        }
        .loading-3 i:nth-child(1){
            animation: ko 0.41s linear infinite;
            left: -10px;
        }
        .loading-3 i:nth-child(2){
            animation: ko 0.41s linear infinite;
            left: -30px;
        }
        .loading-3 i:nth-child(3){
            animation: ok 0.41s linear infinite;
            left: -50px;
        }
        .loading-3 i:nth-child(4){
            animation: ko 0.41s linear infinite;
            left: 10px;
        }
        .loading-3 i:nth-child(5){
            animation: ko 0.41s linear infinite;
            left: 30px;
        }
        @keyframes ok{
            20%{transform: translateY(-20px)}
            30%{transform: translateY(-20px) translateX(80px) }
            100%{transform: translateY(0px) translateX(80px)}
            }
            
            @keyframes ko{
            0%{transform: translate(0px);}
            100%{transform: translateX(-20px);}
        }
    </style>
</head>
<body>
    <div class="box">
            <div class="loader">
   <div class="loading-1">
       <i></i>
       <i></i>
       <i></i>
   </div>
            </div>
            <div class="loader">
   <div class="loading-2">
       <i class="op"></i>
       <i class="lo"></i>
   </div>
            </div>
            <div class="loader">
   <div class="loading-3">
       <i class="ok"></i>
       <i class="ko"></i>
       <i class="ko"></i>
       <i class="ko"></i>
       <i class="ko"></i>
   </div>
            </div>
        </div>
    
</body>
</html>

原文地址：https://blog.csdn.net/luckASD/article/details/52915370?ops_request_misc=&request_id=4ac4022a84dd49759bfec91d9092784e&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-28-52915370-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88

本文章网址:https://www.sjxi.cn/detil/2685361d98b34d0d8660f604c07c0061

最新评论

当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号

×

(穷逼博主)在线接单

QQ: 1164453243

邮箱: abcdsjx@126.com

前端项目代做
前后端分离
Python 爬虫脚本
Java 后台开发
各种脚本编写
服务器搭建
个人博客搭建
Web 应用开发
Chrome 插件编写
Bug 修复