css实现的立方体自动循环翻转动画html页面源码

家好，今天给大家介绍一款，css实现的立方体自动循环翻转动画html页面源码（图1）。送给大家哦，获取方式在本文末尾。

图1

动画效果非常炫酷（图2）

图2

源码完整，需要的朋友可以下载学习（图3）

图3

本源码编码：10162，需要的朋友，点击下面的链接后，搜索10162，即可获取。

「链接」

前端开发来说，通过动画来提升交互效果是很常见的。在很早以前，做web动画主要通过javascript或者jquery或者flash这样的手段，非常麻烦，自打有了ccs3，做动画就太方便了，只需几行css代码就可以搞定。

这里我们就演示一个常见的循环滚动效果，任务是这样：先准备一个图片，平铺到页面上充满整个屏幕，然后就让画面一直向上循环滚动，形成无边无际的感觉。

虽然可以从网上搜到一些类似的代码，但是鱼龙混杂，无关紧要的代码非常多，不够纯粹。如果要弄明白动画的原理，只有自己动手做一遍才能真正消化吃透。所以我们来一步步原创这个代码，排除所有不必要的基础样式，只说要点，3个步骤你就可以完全掌握其精髓！

第一步：布局

首先，滚动的图片需要放在一个容器里，一行html代码即可完成：

第二步：把图片放进容器

css中body的边界设为0，把容器设高度100%以充满屏幕，再调用背景图pic.png

第三部：让画面动起来

咱不做标题党，循环滚动靠的就是3行css动起来的。

先是1行 -webkit-animation属性：4个参数分别表示：动画名称scroll，1秒时长，移动速度为线性的，无限循环。

然后是对应的关键帧 @-webkit-keyframes 属性，这是自己定义的动画规则，只需写2行规则即可：

原理：动画就是画从一个地方动到另一个地方。对普通滚动效果来说，有起点和终点这两个节点的位置就够了。所以我们用0%和100%分别表示起点和终点，指定2个背景图的xy位置坐标即可。图片会在规定时间内从起点移动到终点，并循环下去，数值是负表示是向上移动。320px正好是图片的高度，这样循环的时候是无缝衔接的。

好了，最终完整的代码如下，是不是很精练呢？保存成 index.html 即可

代码写完了，还要记得在当前目录要有pic.png这个图片哦，我随便画了几笔，绝无观赏性，建议自己找个好看点的图片来代替。

现在用浏览器打开index.html即可看到效果，比较魔性的地方在于，如果你盯着看久了，关闭窗口以后会出现幻觉，仿佛整个显示器都在向上飞，哈哈！

最后我们来说说浏览器兼容性问题：

大家可能注意到了，前面那2个古怪的 -webkit-animation, @-webkit-keyframes 这里的-webkit-其实是一个前缀，animation和@keyframes才是CSS的标准属性。

当加上-webkit-后，就形成了一个针对特殊浏览器的专有属性，表示用在谷歌的chrome和苹果的safari浏览器上。此外还有-moz前缀代表针对firefox浏览器的私有属性。

所以我们在用到css3的一些特性的时候，经常使用一大堆的重复性的代码，比如我们今天的这个代码，有人会写成这个样子：

一个简单的动画就要写这么多冗余的代码，为的只是支持一些旧的浏览器，有必要吗？为什么在这个例子中我们仅仅采用了-webkit-而没有使用其它专有属性呢？

因为现在已经是2019年了！谷歌苹果的浏览器是主流，占据了绝大部分，而其它小众浏览器也大多能够兼容他们，在版本上，大部分人安装浏览器是直接下载新版本安装使用，而非找出家里陈年的老软盘、老光盘去安装，家中的老电脑也早已升级不知多少回了，所以也几乎没有机会使用低版本的浏览器了！

至于微软的IE，就更别提了，IE9以前不支持动画的，只能用js或者jquery来写动画，直到IE10才支持css动画，随后IE被放弃，主推Edge，搞了几天越来越头大干脆也放弃，现在直接使用chrome内核了，所以针对ie的兼容性除非有特殊要求已经无需考虑。

你在网上能看到的范例代码，如果有写成那么复杂臃肿的，估计也都是3-5年前发的老文，或者抄来抄去不做思考的搬砖工留下的“初学者”笔记。

我们不仿测试一下几款主流浏览器的情况看看，结论：

测试结果表明，-webkit-的写法在4款不同内核的浏览器上都能正常使用，所以我们的代码因此能得以简化。

当然，这个例子也有局限性，比如你看，只有苹果safari不支持标准写法，万一将来他改邪归正了呢？毕竟标准写法才是众望所归不是？使用针对个别浏览器的私有属性写法，虽可用但毕竟有些怪怪的，将来怎么样还很难说呢。这样看来，如果使用古老的处理办法，重复N次为每个专属浏览器各写一份代码，除了辣眼睛也真没什么错。

浏览器的兼容问题涉及面实在是非常广，三言两语还真说不完，以后会专门来讲。

言:

一位前端界的大神让我去思考的一个问题, 给了Big-man一段代码，如下:

function Seriously(options) {
 // if called without 'new', make a new object and return that
 if(window === this || !(this instanceof Seriously) || this.id !== undefined) {
 return new Seriously(options);
 }
}

return语句执行之后还会继续执行吗？这是大神上来让我解决的问题，既然提到了return那我也就随带解决JS中另外的两种结束循环的方法break, continue。

Break语句:

break语句会使运行的程序立刻退出包含在最内层的循环或者退出一个switch语句。

由于它是用来退出循环或者switch语句的, 所以只有当它出现在这些语句的时候, 这种形式的break语句才是合法的。

如果一个循环的终止条件非常复杂, 那么使用break语句来实现某些条件比用一个循环表达式所有的条件容易得多。

for(var i = 519; i < 550; i++) {
 if(i == 522) {
 break;
 }
 console.log(i);
 alert(i);
 document.write(i);
}

当i = 521的时候，直接退出for这个循环。这个循环将不再被执行。

对于输出结果的话，可以自己去测试的吧。

Continue语句:

continue语句和break语句相似。所不同的是，它不是退出一个循环，而是开始循环的一次新迭代。

continue语句只能用在while语句、do/while语句、for语句、或者for/in语句的循环体内, 在其他地方使用都会引起错误?

for(var i = 5; i >=0; i--) {
 if(i == 4 || i == 3 || i == 1) {
 continue;
 }
 console.log(i);
 alert(i);
 document.write(i);
}

当i = 4、i = 3以及i = 1的时候，直接跳出for循环。下次继续执行。

至于输出结果，还希望大家去打印一下。

Return语句:

return语句就是用于指定函数返回的值。return语句只能出现在函数体内，出现在代码中的其他任何地方造成语法错误！

for(var i = 1; i < 10; i++) {
 if(i == 8) {
 return;
 }
 console.log(i);
 alert(i);
 document.write(i);
}

执行结果Uncaught SyntaxError: illegal return statement(...)

错误意思是非法捕获的查询返回语句。

当执行return语句时, 即使函数主题中还有其他语句, 函数执行也会停止!

<script type="text/javascript">
 if(username == "") {
 alert("please input your username: ");
 return false;
 } else if (qq == "") {
 alert("please input your qq number: ");
 return false;
 }
</script>

上面的实例里，当username为空时，就不会再向下执行，在一些表单提交中，也可以通过return false来阻止默认的提交方式，改用Ajax的提交方式，例如：

<form id="form" onSubmit="return false">
...
</form>

this对应的全局变量:

window == this这个Boolean等式，在不同的情况下的展现都不一样的。

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
<script type="text/javascript">
 function a() {
 console.log(window === this)
 }
 a();
</script>
</body>
</html>

这个时候的window === this打印出来的是true，这也就意味着this绝对等于window。

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
<script type="text/javascript">
 'use strict'
 function a() {
 console.log(window === this)
 }
 a();
</script>
</body>
</html>

这个时候window === this返回回来的值却是false，而且打印出来的this是undefined的。

所以严格模式下面的代码操作需要更加的规范和合理才可以的。

vector illustration web development shield sign

---------------------

作者：JD9

来源：CSDN

原文：https://blog.csdn.net/XXJ19950917/article/details/78310346

在线咨询

上一篇：html单选按钮默认选中怎么做？input标签的单选按钮实例
下一篇：html5+canvas雨滴附在窗户效果插件-rainyday.js