- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 jsfiddle 上开发了这个 html5 动画
我试图让它在纯 html 文档上工作,但它不起作用。
在jsbin上,没有下雪效果,中间的照片没有显示。
http://jsbin.com/lonefopuzo/1/edit?html,output
$(function() {
var COUNT = 180;
var masthead = document.querySelector('.masthead');
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var width = masthead.clientWidth;
var height = masthead.clientHeight;
var i = 0;
var Snowflake = function() {
this.x = 0;
this.y = 0;
this.vy = 0;
this.vx = 0;
this.r = 0;
this.reset();
}
Snowflake.prototype.reset = function() {
console.log('Reset was called');
this.x = Math.random() * width;
this.y = Math.random() * -height;
this.vy = 1 + Math.random() * 3;
this.vx = 0.5 - Math.random();
this.r = 1 + Math.random() * 2;
this.o = 0.5 + Math.random() * 0.5;
}
canvas.width = width;
canvas.height = height;
canvas.style.position = 'absolute';
canvas.style.left = canvas.style.top = '0';
ctx.fillStyle = '#FFF';
var snowflakes = [],
snowflake;
for (i = 0; i < COUNT; i++) {
snowflake = new Snowflake();
snowflakes.push(snowflake);
}
function update() {
ctx.clearRect(0, 0, width, height);
for (i = 0; i < COUNT; i++) {
snowflake = snowflakes[i];
snowflake.y += snowflake.vy;
snowflake.x += snowflake.vx;
ctx.globalAlpha = snowflake.o;
ctx.beginPath();
ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();
if (snowflake.y > height) {
snowflake.reset();
}
}
webkitRequestAnimationFrame(update);
}
webkitRequestAnimationFrame(update);
masthead.appendChild(canvas);
})();
$(function() {
setTimeout(function() {
$(".seasons1").addClass("rotate");
}, 1000);
});
$(function() {
setTimeout(function() {
$('.seasons1').animate({
opacity: 1,
}, 2000);
}, 1000);
});
$(function() {
setTimeout(function() {
$(".seasons1").removeClass("rotate");
}, 10000);
});
$(function() {
setTimeout(function() {
$(".seasons1").addClass("rotate2");
}, 11000);
});
$(function() {
setTimeout(function() {
$('.seasons1').animate({
opacity: 0,
}, 2000);
}, 14000);
});
$(function() {
setTimeout(function() {
$('.seasons2').animate({
opacity: 1,
}, 2000);
$(".seasons2").addClass("rotate");
}, 14000);
});
.masthead {
width: 1000px;
height: 800px;
background-size: 1000px 800px;
background: #ffb76b;
/* Old browsers */
background: -moz-linear-gradient(left, #ffb76b 0%, #ffa73d 36%, #ff7c00 100%, #ff7f04 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ffb76b), color-stop(36%, #ffa73d), color-stop(100%, #ff7c00), color-stop(100%, #ff7f04));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ffb76b 0%, #ffa73d 36%, #ff7c00 100%, #ff7f04 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ffb76b 0%, #ffa73d 36%, #ff7c00 100%, #ff7f04 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #ffb76b 0%, #ffa73d 36%, #ff7c00 100%, #ff7f04 100%);
/* IE10+ */
background: linear-gradient(to right, #ffb76b 0%, #ffa73d 36%, #ff7c00 100%, #ff7f04 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffb76b', endColorstr='#ff7f04', GradientType=1);
}
.seasons1 {
width: 299px;
height: 299px;
background-image: url("http://i.hizliresim.com/31N162.png");
position: absolute;
left: 330px;
top: 180px;
opacity: 0;
}
.seasons2 {
width: 267px;
height: 267px;
background-image: url("http://i.hizliresim.com/7VYVJL.png");
opacity: 0;
position: absolute;
left: 340px;
top: 200px;
}
.rotate {
-webkit-animation: spin 4s ease-in-out; // No more infinite
-moz-animation: spin 4s linear;
animation: spin 4s linear;
}
@-moz-keyframes spin {
100% {
-webkit-transform: rotate(2460deg);
transform: rotate(2460deg);
}
}
@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(2460deg);
transform: rotate(2460deg);
}
}
@keyframes spin {
100% {
-webkit-transform: rotate(2460deg);
transform: rotate(2460deg);
}
}
.rotate2 {
-webkit-animation: spin 4s ease-in-out; // No more infinite
-moz-animation: spin 4s linear;
animation: spin 4s linear;
}
@-moz-keyframes spin {
100% {
-webkit-transform: rotate(5460deg);
transform: rotate(5460deg);
}
}
@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(5460deg);
transform: rotate(5460deg);
}
}
@keyframes spin {
100% {
-webkit-transform: rotate(5460deg);
transform: rotate(5460deg);
}
}
.text1 {
width: 412px;
height: 138px;
background-image: url("http://i.hizliresim.com/W64rEq.png");
opacity: 1;
position: absolute;
left: 40px;
top: 500px;
}
.text2 {
width: 523px;
height: 160px;
background-image: url("http://i.hizliresim.com/BRE929.png");
opacity: 1;
position: absolute;
left: 440px;
top: 485px;
}
.replay {
width: 330px;
height: 57px;
background-image: url("http://i.hizliresim.com/BREEzG.png");
opacity: 1;
position: absolute;
z-index: 50;
left: 50px;
top: 685px;
}
.replay:hover {
cursor: pointer;
}
.visit {
width: 330px;
height: 57px;
background-image: url("http://i.hizliresim.com/4ZDD3L.png");
opacity: 1;
position: absolute;
z-index: 50;
left: 620px;
top: 685px;
}
.visit:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="masthead">
<div class="seasons1"></div>
<div class="seasons2"></div>
<div class="text1"></div>
<div class="text2"></div>
<div class="replay"></div>
<div class="visit"></div>
</div>
最佳答案
你有几个错误只是给你修好了
先去掉函数开头的$
,去掉函数末尾的()
在你的 CSS 中缺少一些前缀
并且您正在使用在 chrome 中工作的 webkitRequestAnimationFrame
只需将其更改为 requestAnimationFrame
关于javascript - jsfiddle 上的代码无法转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27495973/
我通过 spring ioc 编写了一些 Rest 应用程序。但我无法解决这个问题。这是我的异常(exception): org.springframework.beans.factory.BeanC
我对 TestNG、Spring 框架等完全陌生,我正在尝试使用注释 @Value通过 @Configuration 访问配置文件注释。 我在这里想要实现的目标是让控制台从配置文件中写出“hi”,通过
为此工作了几个小时。我完全被难住了。 这是 CS113 的实验室。 如果用户在程序(二进制计算器)结束时选择继续,我们需要使用 goto 语句来到达程序的顶部。 但是,我们还需要释放所有分配的内存。
我正在尝试使用 ffmpeg 库构建一个小的 C 程序。但是我什至无法使用 avformat_open_input() 打开音频文件设置检查错误代码的函数后,我得到以下输出: Error code:
使用 Spring Initializer 创建一个简单的 Spring boot。我只在可用选项下选择 DevTools。 创建项目后,无需对其进行任何更改,即可正常运行程序。 现在,当我尝试在项目
所以我只是在 Mac OS X 中通过 brew 安装了 qt。但是它无法链接它。当我尝试运行 brew link qt 或 brew link --overwrite qt 我得到以下信息: ton
我在提交和 pull 时遇到了问题:在提交的 IDE 中,我看到: warning not all local changes may be shown due to an error: unable
我跑 man gcc | grep "-L" 我明白了 Usage: grep [OPTION]... PATTERN [FILE]... Try `grep --help' for more inf
我有一段代码,旨在接收任何 URL 并将其从网络上撕下来。到目前为止,它运行良好,直到有人给了它这个 URL: http://www.aspensurgical.com/static/images/a
在过去的 5 个小时里,我一直在尝试在我的服务器上设置 WireGuard,但在完成所有设置后,我无法 ping IP 或解析域。 下面是服务器配置 [Interface] Address = 10.
我正在尝试在 GitLab 中 fork 我的一个私有(private)项目,但是当我按下 fork 按钮时,我会收到以下信息: No available namespaces to fork the
我这里遇到了一些问题。我是 node.js 和 Rest API 的新手,但我正在尝试自学。我制作了 REST API,使用 MongoDB 与我的数据库进行通信,我使用 Postman 来测试我的路
下面的代码在控制台中给出以下消息: Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child el
我正在尝试调用一个新端点来显示数据,我意识到在上一组有效的数据中,它在数据周围用一对额外的“[]”括号进行控制台,我认为这就是问题是,而新端点不会以我使用数据的方式产生它! 这是 NgFor 失败的原
我正在尝试将我的 Symfony2 应用程序部署到我的 Azure Web 应用程序,但遇到了一些麻烦。 推送到远程时,我在终端中收到以下消息 remote: Updating branch 'mas
Minikube已启动并正在运行,没有任何错误,但是我无法 curl IP。我在这里遵循:https://docs.traefik.io/user-guide/kubernetes/,似乎没有提到关闭
每当我尝试docker组成任何项目时,都会出现以下错误。 我尝试过有和没有sudo 我在这台机器上只有这个问题。我可以在Mac和Amazon WorkSpace上运行相同的容器。 (myslabs)
我正在尝试 pip install stanza 并收到此消息: ERROR: No matching distribution found for torch>=1.3.0 (from stanza
DNS 解析看起来不错,但我无法 ping 我的服务。可能是什么原因? 来自集群中的另一个 Pod: $ ping backend PING backend.default.svc.cluster.l
我正在使用Hibernate 4 + Spring MVC 4当我开始 Apache Tomcat Server 8我收到此错误: Error creating bean with name 'wel
我是一名优秀的程序员,十分优秀!