一个加载小动画

最新推荐文章于 2023-04-09 18:47:13 发布
最新推荐文章于 2023-04-09 18:47:13 发布
阅读量73 收藏
点赞数
分类专栏： css/css3 HTML/HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42448623/article/details/115461664
版权 
<!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>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <ul class="box">
        <li class="box-item">1</li>
        <li class="box-item">2</li>
        <li class="box-item">3</li>
        <li class="box-item">4</li>
        <li class="box-item">5</li>
        <li class="box-item">6</li>
    </ul>
</body>
</html>

ul{
    margin: 0;
    list-style: none;
    padding: 0;
}

.box{
    width: 100px;
    height: 100px;
    position: relative;
    transform-style: preserve-3d;
    transform-origin: center;
    /* outline: 1px solid aquamarine; */
    margin: 150px auto;
    transform: rotateX(145deg) rotateY(135deg) rotateZ(90deg);
    /* background: rgb(127 255 212 / 21%); */

    animation: rotatebox 4s infinite;
}

.box-item{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    border: 1px solid #fff;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(255 0 0 / 37%);
    transition: all 0.2s;
}

.box-item:nth-child(1){
    transform: translateX(50px) rotateY(90deg);
    animation: rotatebox1 4s  infinite;
}
.box-item:nth-child(2){
    transform: translateX(-50px) rotateY(-90deg);
    animation: rotatebox2 4s  infinite;
}
.box-item:nth-child(3){
    transform: translateY(50px) rotateX(90deg);
    animation: rotatebox3 4s  infinite;
}
.box-item:nth-child(4){
    transform: translateY(-50px) rotateX(-90deg);
    animation: rotatebox4 4s  infinite;
}
.box-item:nth-child(5){
    transform: translateZ(-50px);
    animation: rotatebox5 4s  infinite;
}
.box-item:nth-child(6){
    transform: translateZ(50px);
    animation: rotatebox6 4s  infinite;
}

/* .box:hover .box-item:nth-child(1){
    transform: translateX(100px) rotateY(90deg);
}
.box:hover .box-item:nth-child(2){
    transform: translateX(-100px) rotateY(-90deg);
}
.box:hover .box-item:nth-child(3){
    transform: translateY(100px) rotateX(90deg);
}
.box:hover .box-item:nth-child(4){
    transform: translateY(-100px) rotateX(-90deg);
}
.box:hover .box-item:nth-child(5){
    transform: translateZ(-100px);
}
.box:hover .box-item:nth-child(6){
    transform: translateZ(100px);
} */


@keyframes rotatebox {
    0%{
        transform: rotateX(145deg) rotateY(135deg) rotateZ(90deg);
    }
    50%{
        transform: rotateX(145deg) rotateY(315deg) rotateZ(90deg);
    }
    100%{
        transform: rotateX(145deg) rotateY(315deg) rotateZ(90deg); 
    }
}
@keyframes rotatebox1{
    50%{
        transform: translateX(50px) rotateY(90deg);
    }
    75%{
        transform: translateX(100px) rotateY(90deg);
    }
    100%{
        transform: translateX(50px) rotateY(90deg);
    }
}
@keyframes rotatebox2{
    50%{
        transform: translateX(-50px) rotateY(-90deg);
    }
    75%{
        transform: translateX(-100px) rotateY(-90deg);
    }
    100%{
        transform: translateX(-50px) rotateY(-90deg);
    }
}
@keyframes rotatebox3{
    50%{
        transform: translateY(50px) rotateX(90deg);
    }
    75%{
        transform: translateY(100px) rotateX(90deg);
    }
    100%{
        transform: translateY(50px) rotateX(90deg);
    }
}
@keyframes rotatebox4{
    50%{
        transform: translateY(-50px) rotateX(-90deg);
    }
    75%{
        transform: translateY(-100px) rotateX(-90deg);
    }
    100%{
        transform: translateY(-50px) rotateX(-90deg);
    }
}
@keyframes rotatebox5{
    50%{
        transform: translateZ(-50px);
    }
    75%{
        transform: translateZ(-100px);
    }
    100%{
        transform: translateZ(-50px);
    }
}
@keyframes rotatebox6{
    50%{
        transform: translateZ(50px);
    }
    75%{
        transform: translateZ(100px);
    }
    100%{
        transform: translateZ(50px);
    }
}

效果
在这里插入图片描述
在这里插入图片描述

tianmeng1999
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
加载小图标实现简单动画
10-20
通过加载图标，LoadIcon()及设置定时器实现加载的若干图标的连续播放
uniapp小程序加载spine动画
05-23
修改官方spine-webgl.js文件适配uniapp
CSS实现三个加载中的小动画
Sirius小鑫的博客
04-09 1172
使用CSS的动画animation定义动画的属性：动画名、执行时间、执行速度函数和执行的次数，定义关键帧@keyframe来实现动画细节。
加载loading动画
qq_40289557的博客
08-22 7435
提起加载（loading）效果，想必大家都不会陌生，在目前的移动端、PC端、各类app均广泛使用，使用loading动画能显著提升用户的交互体检，尤其是在页面加载速度比较的慢的情况下，loading动画的作用就更加突出了。实现一个个性化的加载动画效果，并不难，其主要原理是使用css3动画属性-animation、结合transform属性即可
创建加载动画，各种加载中的小动画
chudaijiang的专栏
04-05 1996
主题思想：帧动画。 1.导入多张动画，当这几张图片切换时就达到实现动画的效果。 2.创建load_animation.xml文件 <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false" > <item android
微信小程序-加载及完成动画-loadingAnim.rar
01-11
微信小程序-加载及完成动画
css3实现加载loading特效小动画效果
06-12
描述： css3代码与js插件一同实现的loading效果 原理比较简单，效果也比较好看 因使用较少，本案例暂只提供观赏 这里就不解释如何使用了
云朵加载Waiting加载成功Done小动画ppt特效-ppt特效
05-06
云朵图案背景，循环箭头旋转加载动画，waiting加载动画，循环箭头变对号加载成功动画，云朵加载Waiting加载成功Done小动画ppt特效下载。
Android仿视频加载旋转小球动画效果的实例代码
08-27
主要介绍了Android仿视频加载旋转小球动画效果的实例代码,文中给大家提到了PathMeasure的用法，介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
加载动画
苗雪松的博客
01-09 271
&lt;style&gt; .firstChangeLoading ul { display: flex; align-items: center; justify-content: center; opacity: 1; height: 100%; width: 100%; position: absolut...
微信小程序开发动感十足的加载动画--都在这里！
热门推荐
findhappy117的博客
10-17 2万+
代码地址如下：http://www.demodashi.com/demo/14242.html 一、前期准备工作 软件环境：微信开发者工具 官方下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1、基本需求。 实现加载动画 带动画（动画可做参靠，个人要是觉得不好看可以自定义动画） 2、案例目录结构 ...
Android绘图基础——仿华为加载动画
钝悟需要时间的打磨，顿悟需要时间的积累
06-24 1717
仿华为加载动画 一直觉得华为的加载小动画挺好的，既然前面把Path的相关知识复习了一下。那我们就做这个当做我们绘图基础的一个小练习。 一、练习点 path的基础使用画笔的基础使用pathMeasure的基础使用ValueAnimator的基础使用Interpolator插值器的使用 二、思路 我们前面可以看到，这个华为的加载圆圈的速度是先快后慢。所以此处我们使用I
微信小程序 页面显示加载动画
^璐三岁要耍蓅氓♡
03-26 9938
//页面显示加载动画 showNavigationBarLoading: function () { wx.showNavigationBarLoading() },//页面隐藏加载动画 hideNavigationBarLoading: function () { wx.hideNavigationBarLoading() }//设置页面标题 wx.setNavigat...
android 图标弹跳动画,动效教程 | 5 分钟快速做个弹跳加载小动画
weixin_30247915的博客
05-26 943
小编：APP的动效现今是越来越重要了，以前是加分项，现在是必会技能～今天给大家带来的是AE动效教程 —— 5 分钟快速做个弹跳加载小动画，一起来学习学习吧～～前言哈喽，今天给大家解禁一个墨染动效特训营圈子内的动效小技巧，如何5分钟快速制作一个弹跳的加载小动画。效果如上图，先来分析下技术难点，第一个是食物图标的弹跳，第二个是文本的弹跳食物图标的弹跳1、将食物图标做一个预合成，依次排列，一个图标只出现...
小程序之加载动画
tzjvon的博客
07-27 2945
<loading hidden="{{ loadingHidden }}"> 加载中... </loading>
小加载动画
weixin_45820444的博客
09-24 643
  在网上学了一个小加载动画，喜欢的话拿一个赞跟我换吧！纯 CSS 没有什么套路，来吧！展示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>加载动画</title> <style> body { margin: 0; height: 100vh; display: flex; align
css3实现加载小动画
qq_38340907的博客
11-01 547
HTML: &lt;div class="box"&gt;&lt;/div&gt; CSS: body { background-color: #59488b; } .box { position: relative; margin-top: 100px; margi...
用canvas做一个加载动画
最新发布
05-18
好的，以下是一个简单的加载动画实现： HTML代码： ```html <canvas id="loading-canvas" width="100" height="100"></canvas> ``` JavaScript代码： ```javascript const canvas = document.getElementById('...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值