魔方4格滚动加载动画

于 2021-10-09 17:41:16 发布
阅读量189 收藏
点赞数 1
分类专栏： css 实际应用 文章标签： 动画 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013970232/article/details/120675905
版权

啥也不说 先上效果图

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>魔方4格滚动加载动画</title>
		<!--<link rel="stylesheet/less" href="./less.less" />
		<script src="https://cdn.bootcss.com/less.js/2.7.2/less.min.js"></script>-->
		<style type="text/css">
			/* 动画 */
			
			@-webkit-keyframes willRotate { 0% { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 8.3% { -webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); } 16.6% { -webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(90deg); } 24.9% { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(90deg); } 33.2% { -webkit-transform: rotateX(0deg) rotateY(-90deg) rotateZ(90deg); } 41.5% { -webkit-transform: rotateX(0deg) rotateY(-90deg) rotateZ(180deg); } 49.8% { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(180deg); } 58.1% { -webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg); } 66.4% { -webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(270deg); } 74.7% { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(270deg); } 83% { -webkit-transform: rotateX(0deg) rotateY(90deg) rotateZ(270deg); } 91.3% { -webkit-transform: rotateX(0deg) rotateY(90deg) rotateZ(360deg); } 100% { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg); } }
			
			@-moz-keyframes willRotate { 0% { -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 8.3% { -moz-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); } 16.6% { -moz-transform: rotateX(-90deg) rotateY(0deg) rotateZ(90deg); } 24.9% { -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(90deg); } 33.2% { -moz-transform: rotateX(0deg) rotateY(-90deg) rotateZ(90deg); } 41.5% { -moz-transform: rotateX(0deg) rotateY(-90deg) rotateZ(180deg); } 49.8% { -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(180deg); } 58.1% { -moz-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg); } 66.4% { -moz-transform: rotateX(90deg) rotateY(0deg) rotateZ(270deg); } 74.7% { -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(270deg); } 83% { -moz-transform: rotateX(0deg) rotateY(90deg) rotateZ(270deg); } 91.3% { -moz-transform: rotateX(0deg) rotateY(90deg) rotateZ(360deg); } 100% { -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg); } }
			
			@-o-keyframes willRotate { 0% { -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 8.3% { -o-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); } 16.6% { -o-transform: rotateX(-90deg) rotateY(0deg) rotateZ(90deg); } 24.9% { -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(90deg); } 33.2% { -o-transform: rotateX(0deg) rotateY(-90deg) rotateZ(90deg); } 41.5% { -o-transform: rotateX(0deg) rotateY(-90deg) rotateZ(180deg); } 49.8% { -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(180deg); } 58.1% { -o-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg); } 66.4% { -o-transform: rotateX(90deg) rotateY(0deg) rotateZ(270deg); } 74.7% { -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(270deg); } 83% { -o-transform: rotateX(0deg) rotateY(90deg) rotateZ(270deg); } 91.3% { -o-transform: rotateX(0deg) rotateY(90deg) rotateZ(360deg); } 100% { -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg); } }
			
			@-ms-keyframes willRotate { 0% { -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 8.3% { -ms-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); } 16.6% { -ms-transform: rotateX(-90deg) rotateY(0deg) rotateZ(90deg); } 24.9% { -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(90deg); } 33.2% { -ms-transform: rotateX(0deg) rotateY(-90deg) rotateZ(90deg); } 41.5% { -ms-transform: rotateX(0deg) rotateY(-90deg) rotateZ(180deg); } 49.8% { -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(180deg); } 58.1% { -ms-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg); } 66.4% { -ms-transform: rotateX(90deg) rotateY(0deg) rotateZ(270deg); } 74.7% { -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(270deg); } 83% { -ms-transform: rotateX(0deg) rotateY(90deg) rotateZ(270deg); } 91.3% { -ms-transform: rotateX(0deg) rotateY(90deg) rotateZ(360deg); } 100% { -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg); } }
			
			@keyframes willRotate { 0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 8.3% { transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); } 16.6% { transform: rotateX(-90deg) rotateY(0deg) rotateZ(90deg); } 24.9% { transform: rotateX(0deg) rotateY(0deg) rotateZ(90deg); } 33.2% { transform: rotateX(0deg) rotateY(-90deg) rotateZ(90deg); } 41.5% { transform: rotateX(0deg) rotateY(-90deg) rotateZ(180deg); } 49.8% { transform: rotateX(0deg) rotateY(0deg) rotateZ(180deg); } 58.1% { transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg); } 66.4% { transform: rotateX(90deg) rotateY(0deg) rotateZ(270deg); } 74.7% { transform: rotateX(0deg) rotateY(0deg) rotateZ(270deg); } 83% { transform: rotateX(0deg) rotateY(90deg) rotateZ(270deg); } 91.3% { transform: rotateX(0deg) rotateY(90deg) rotateZ(360deg); } 100% { transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg); } }
			/* 动画 end */
			/* checkerboard */
			
			.checkerboard {
				width: 200px;
				height: 200px;
				margin-top: 100px;
				margin-left: 100px;
				position: relative;
				-webkit-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);
				-moz-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);
				-ms-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);
				transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);
				-webkit-transform-origin: 50px 50px;
				-moz-transform-origin: 50px 50px;
				-ms-transform-origin: 50px 50px;
				transform-origin: 50px 50px;
				-webkit-transform-style: preserve-3d;
				-moz-transform-style: preserve-3d;
				-ms-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			
			.checkerboard__cell {
				box-sizing: border-box;
				float: left;
				width: 100px;
				height: 100px;
				border: 1px black solid;
				-webkit-transform: translateZ(-50px);
				-moz-transform: translateZ(-50px);
				-ms-transform: translateZ(-50px);
				transform: translateZ(-50px);
			}
			/* checkerboard end */
			/* rotateBox */
			
			.rotate {
				position: absolute;
				display: block;
				width: 100px;
				height: 100px;
				padding: 0;
				margin: 0;
				-webkit-transform-origin: 100% 100% -50px;
				-moz-transform-origin: 100% 100% -50px;
				-ms-transform-origin: 100% 100% -50px;
				transform-origin: 100% 100% -50px;
				-webkit-transform-style: preserve-3d;
				-moz-transform-style: preserve-3d;
				-ms-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			
			.rotate__surface {
				position: absolute;
				display: block;
				width: 100px;
				height: 100px;
				-webkit-backface-visibility: hidden;
				backface-visibility: visible;
			}
			
			.rotate__surface--front {
				-webkit-transform: translateZ(50px);
				-moz-transform: translateZ(50px);
				-ms-transform: translateZ(50px);
				transform: translateZ(50px);
				background-color: #0000ff;
			}
			
			.rotate__surface--back {
				-webkit-transform: rotateY(180deg) translateZ(50px);
				-moz-transform: rotateY(180deg) translateZ(50px);
				-ms-transform: rotateY(180deg) translateZ(50px);
				transform: rotateY(180deg) translateZ(50px);
				background-color: #008000;
			}
			
			.rotate__surface--right {
				-webkit-transform: rotateY(90deg) translateZ(50px);
				-moz-transform: rotateY(90deg) translateZ(50px);
				-ms-transform: rotateY(90deg) translateZ(50px);
				transform: rotateY(90deg) translateZ(50px);
				background-color: #ff0000;
			}
			
			.rotate__surface--left {
				-webkit-transform: rotateY(-90deg) translateZ(50px);
				-moz-transform: rotateY(-90deg) translateZ(50px);
				-ms-transform: rotateY(-90deg) translateZ(50px);
				transform: rotateY(-90deg) translateZ(50px);
				background-color: #f07810;
			}
			
			.rotate__surface--top {
				-webkit-transform: rotateX(90deg) translateZ(50px);
				-moz-transform: rotateX(90deg) translateZ(50px);
				-ms-transform: rotateX(90deg) translateZ(50px);
				transform: rotateX(90deg) translateZ(50px);
				background-color: #ffff00;
			}
			
			.rotate__surface--bottom {
				-webkit-transform: rotateX(-90deg) translateZ(50px);
				-moz-transform: rotateX(-90deg) translateZ(50px);
				-ms-transform: rotateX(-90deg) translateZ(50px);
				transform: rotateX(-90deg) translateZ(50px);
				background-color: #ffffff;
			}
			
			#rotateBoxA {
				-webkit-animation: willRotate 6s linear infinite normal;
				-moz-animation: willRotate 6s linear infinite normal;
				-ms-animation: willRotate 6s linear infinite normal;
				animation: willRotate 6s linear infinite normal;
			}
			/* rotateBox end */
		</style>
	</head>

	<body>
		<div class="checkerboard">
			<div class="checkerboard__cell"></div>
			<div class="checkerboard__cell"></div>
			<div class="checkerboard__cell"></div>
			<div class="checkerboard__cell"></div>
			<div class="rotate" id="rotateBoxA">
				<div class="rotate__surface rotate__surface--front"></div>
				<div class="rotate__surface rotate__surface--back"></div>
				<div class="rotate__surface rotate__surface--right"></div>
				<div class="rotate__surface rotate__surface--left"></div>
				<div class="rotate__surface rotate__surface--top"></div>
				<div class="rotate__surface rotate__surface--bottom"></div>
			</div>
		</div>
	</body>

</html>

less源码

完整案例的 css 是由 less 编译的, less 源码如下

//@import "../../mine/less/_animation.less";
.pre(@style, @value) {
    -webkit-@{style}: @value;
    -moz-@{style}: @value;
    -ms-@{style}: @value;
    @{style}: @value;
}

.transition(@arg) {
    .pre(transition, @arg);
}

.transition-delay(@delay: 0) {
    .pre(transition-delay, @delay);
}

.transition-duration(@duration: 200ms) {
    .pre(transition-duration, @duration);
}

.transition-property(@property: all) {
    .pre(transition-property, @property);
}

.transition-timing-function(@function: ease) {
    .pre(transition-timing-function, @function);
}

.transform(@arg) {
    .pre(transform, @arg);
}

.transform-origin(@args) {
    .pre(transform-origin, @args);
}

.transform-style(@style) {
    .pre(transform-style, @style);
}

.rotate(@deg: 45deg) {
    .transform(rotate(@deg));
}

.scale(@factor: .5) {
    .transform(scale(@factor));
}

.translate(@x, @y) {
    .transform(translate(@x, @y));
}

.translate3d(@x, @y, @z) {
    .transform(translate3d(@x, @y, @z));
}

.translateHardware(@x, @y) {
    .translate(@x, @y);
    .pre(transform, translate3d(@x, @y, 0));
}

.animation(@value) {
    .pre(animation, @value);
}

.keyframes(@name) {
    @-webkit-keyframes @name {
        .-frames(-webkit-)
    }
    @-moz-keyframes @name {
        .-frames(-moz-)
    }
    @-o-keyframes @name {
        .-frames(-o-)
    }
    @-ms-keyframes @name {
        .-frames(-ms-)
    }
    @keyframes @name {
        .-frames()
    }
}

//以上是 animation.less 提供的方法

/* 动画 */

.willRotate {
    .keyframes(willRotate);
    .-frames(@-...) {
        0% {
            @{-}transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        }
        8.3% {
            @{-}transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
        }
        16.6% {
            @{-}transform: rotateX(-90deg) rotateY(0deg) rotateZ(90deg);
        }
        24.9% {
            @{-}transform: rotateX(0deg) rotateY(0deg) rotateZ(90deg);
        }
        33.2% {
            @{-}transform: rotateX(0deg) rotateY(-90deg) rotateZ(90deg);
        }
        41.5% {
            @{-}transform: rotateX(0deg) rotateY(-90deg) rotateZ(180deg);
        }
        49.8% {
            @{-}transform: rotateX(0deg) rotateY(0deg) rotateZ(180deg);
        }
        58.1% {
            @{-}transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg);
        }
        66.4% {
            @{-}transform: rotateX(90deg) rotateY(0deg) rotateZ(270deg);
        }
        74.7% {
            @{-}transform: rotateX(0deg) rotateY(0deg) rotateZ(270deg);
        }
        83% {
            @{-}transform: rotateX(0deg) rotateY(90deg) rotateZ(270deg);
        }
        91.3% {
            @{-}transform: rotateX(0deg) rotateY(90deg) rotateZ(360deg);
        }
        100% {
            @{-}transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);
        }
    }
}


/* 动画 end */


/* checkerboard */

.checkerboard {
    width: 200px;
    height: 200px;
    margin-top: 100px;
    margin-left: 100px;
    position: relative;
    .pre(transform, rotateX(45deg) rotateY(0deg) rotateZ(45deg));
    .transform-origin(50px 50px);
    .transform-style(preserve-3d);
    &__cell {
        box-sizing: border-box;
        float: left;
        width: 100px;
        height: 100px;
        border: 1px black solid;
        .pre(transform, translateZ(-50px));
    }
}


/* checkerboard end */


/* rotateBox */

.rotate {
    position: absolute;
    display: block;
    width: 100px;
    height: 100px;
    padding: 0;
    margin: 0;
    .transform-origin(100% 100% -50px);
    .transform-style(preserve-3d);
    &__surface {
        position: absolute;
        display: block;
        width: 100px;
        height: 100px;
        -webkit-backface-visibility: hidden;
        backface-visibility: visible;
        //      background: radial-gradient(transparent 30%, rgba(94, 126, 17, 0.25) 100%);
        &--front {
            .pre(transform, translateZ(50px));
            background-color: #0000ff;
        }
        &--back {
            .pre(transform, rotateY(180deg) translateZ(50px));
            background-color: #008000;
        }
        &--right {
            .pre(transform, rotateY(90deg) translateZ(50px));
            background-color: #ff0000;
        }
        &--left {
            .pre(transform, rotateY(-90deg) translateZ(50px));
            background-color: #f07810;
        }
        &--top {
            .pre(transform, rotateX(90deg) translateZ(50px));
            background-color: #ffff00;
        }
        &--bottom {
            .pre(transform, rotateX(-90deg) translateZ(50px));
            background-color: #ffffff;
        }
    }
}

#rotateBoxA {
    .animation(willRotate 6s linear infinite normal);
}


/* rotateBox end */

end

352328759
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用animation实现魔方动画
12-31
使用animation完成魔方的生成以及旋转效果，可以让参考者大致了解怎么使用animation完成一个小动画
css魔方加入动画效果,CSS3 魔方变幻加载动画
weixin_35498756的博客
08-03 178
CSS语言：CSSSCSS确定body {text-align: center;padding-top: 20%;background: #1d1f20; }.loader {width: 100px;height: 100px;display: inline-table;box-sizing: border-box;position: relative;border-spacing: 0.3em...
CSS3简单魔方动画效果
Inory_ye的博客
12-26 408
一 二、 1. 2. <font color=#999AAA
精选 20 个优质的加载动画
weixin_34356138的博客
12-22 172
2019独角兽企业重金招聘Python工程师标准>>> ...
css 简单滴旋转动画
07-23 343
!DOCTYPE html> Document 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 点赞 15 评论 2 分享 收藏 7 手机看 关注 CSS3简单风车旋转动画.zip05-24CSS3简单风车旋转动画，有暂停、旋转、中速、高速等功能。 css3 3D旋转动画10-16css3 图片万花筒3
网页动画素材 魔方（抖音资料）
07-14
网页动画素材 魔方（抖音资料）网页动画素材 魔方（抖音资料）网页动画素材 魔方（抖音资料）网页动画素材 魔方（抖音资料）网页动画素材 魔方（抖音资料）网页动画素材 魔方（抖音资料）网页动画素材 魔方（抖音...
纯CSS3彩色立体魔方动画特效
07-24
纯CSS3彩色立体魔方动画特效是一款纯css3绘制彩色的立方体魔方，旋转的九宫格魔方动画特效。
CSS3 3D彩色魔方动画特效
07-24
CSS3 3D彩色魔方动画特效是一款纯CSS3绘制的3D酷炫魔方动画，彩色魔方变形动画特效。
纯css3 3D魔方翻转动画特效
09-08
纯css3 3D魔方翻转动画特效
CSS3 3D魔方动画代码.zip
07-11
CSS3 3D魔方动画代码
基于jq和纯js的 读取本地.txt文件的方法
热门推荐
352328759的博客
04-09 1万+
好像ajax本来就可以读到.txt <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>读取txt文件</title> </head>...
js instanceof 的工作原理细解
352328759的博客
10-31 5087
根据 MDN 的解释 instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。 s instanceof F 用递归函数来表达, 流程大致如下: function _instanceof(s, F) { if(s.__proto__ === F.prototype) { // 找到目标 return true } else if("__proto__" in F) { // 存在上一层原型1 _instanceof(s, F.__p
正则表达式 去首尾空格
352328759的博客
02-10 4422
去首尾空格: swq.replace(/^\s*|\s*$/g, ‘’) <!doctype html> <html lang="en" data-framework="backbonejs"> <head> <meta charset="utf-8"> <title>正则去首尾空格</title> <s...
控制台插入js文件方法
352328759的博客
02-19 4355
new_element = document.createElement("script"); new_element.setAttribute("type", "text/javascript"); new_element.setAttribute("src", "https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"); document.bo...
js 插入公共css的方法
352328759的博客
05-26 4122
createElement 一个 style 节点 innerHTML 进需要的css代码 body.appendChild 插入body中即可 例： new_element = document.createElement("style"); new_element.innerHTML =(".tucao-content p{font-size:18px;}"); d...
避免数据相加小数点后产生多位数和计算精度损失的几个见效甚少的方法
352328759的博客
02-15 3776
    JavaScript里精度损失是个非常头疼的毛病,典型的[0.1+0.2==0.30000000000000004]相信大家都有耳闻   这里抛出几个简单的方法,避免一部分0.30000000000000004的头疼情况   /** * 加法运算，避免数据相加小数点后产生多位数和计算精度损失。 * @param num1加数1 | num2加数2 */ functi...
setTimeout 浏览器进入后台时不被冷却的方法
352328759的博客
01-19 3344
出于节能的考虑, 部分浏览器在进入后台时(或者失去焦点时), 会将 setTimeout 等定时任务暂停 待用户回到浏览器时, 才会重新激活定时任务 说是暂停, 其实应该说是延迟, 1s 的任务延迟到 2s, 2s 的延迟到 5s, 实际情况因浏览器而异 在 Chrome 中运行一下代码 var t = new Date() * 1 function fun1() { var _t = new Date() * 1 console.log(_t - t) t = _t setTimeout(fun
Vue router 3.x 实现路由规则增删
352328759的博客
01-15 3221
vue 项目的权限限制功能, 有一种实现方案是这样的 进入项目 只设置没有权限要求的路由 向后台提供当前用户的权限 后台根据用户权限, 返回该用户可以用的路由信息 将路由信息翻译成 “符合 routes 选项要求的数组” 用 router.addRoutes(routes) 方法把 “符合 routes 选项要求的数组” 添加到路由 这个方案涉及到两个问题: 怎么添加路由规则 怎么删除路由规则 路由规则 首先明确一下什么叫路由规则? 下例的 { path: ‘/foo’, component: F
html旋转3d魔方制作方法,JavaScript实现的3D旋转魔方动画效果实例代码
最新发布
06-12
4. 最后，我们需要在用户交互时更新旋转动画。我们可以使用鼠标事件或触摸事件来捕捉用户的手势，并根据手势的方向和速度来更新旋转动画。 ## 示例代码 以下是一个简单的 HTML 和 CSS 代码示例，用于创建一个 3D ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值