<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>创意飞蛾404页面</title>
<style>
html,
body {
height: 100%;
background: url('images/fallback.png') repeat scroll;
}
.not {
text-align: center;
writing-mode: tb-rl;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
white-space: nowrap;
display: block;
margin-left: -13px;
font-weight: normal;
text-decoration: blink;
color: #fff;
text-shadow: 0 0 5px #f1c40f, 0 0 10px #f1c40f, 0 0 15px #f1c40f, 0 0 20px #ff2d95, 0 0 30px #ff2d95, 0 0 40px #ff2d95, 0 0 50px #ff2d95, 0 0 75px #ff2d95;
letter-spacing: 5px;
}
.moth {
width: 148px;
/*148*/
height: 83px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -74px;
/*74*/
margin-top: -41.5px;
display: inline-block;
padding: 0;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
-webkit-transition: top 1s linear, left 1s linear;
-moz-transform-style: preserve-3d;
-moz-transform-origin: 50% 50%;
-moz-transition: top 1s linear, left 1s linear;
transform-style: preserve-3d;
transform-origin: 50% 50%;
transition: top 1s linear, left 1s linear;
}
.wing {
width: 72px;
height: 83px;
margin-left: -4px;
padding: 0;
display: inline-block;
-webkit-animation: wing-animation 0.5s linear infinite;
-moz-animation: wing-animation 0.5s linear infinite;
animation: wing-animation 0.5s linear infinite;
}
.wing.left {
background: url("images/l-wing-b.png") no-repeat center center;
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
transform-origin: right center;
}
.wing.right {
background: url("images/r-wing-b.png") no-repeat center center;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
transform-origin: left center;
}
@-webkit-keyframes nabpi-animation {
from {
-webkit-transform: translateZ(0);
}
50% {
-webkit-transform: translateZ(100);
}
to {
-webkit-transform: translateZ(0);
}
}
@-webkit-keyframes wing-animation {
from {
-webkit-transform: rotateY(0deg);
}
60% {
-webkit-transform: rotateY(80deg);
}
to {
-webkit-transform: rotateY(0deg);
}
}
@-moz-keyframes wing-animation {
from {
-moz-transform: rotateY(0deg);
}
60% {
-moz-transform: rotateY(80deg);
}
to {
-moz-transform: rotateY(0deg);
}
}
@keyframes wing-animation {
from {
transform: rotateY(0deg);
}
60% {
transform: rotateY(80deg);
}
to {
transform: rotateY(0deg);
}
}
</style>
</head>
<body>
<script src="js/jquery-1.11.1.min.js"></script>
<div id="moth" class="moth">
<div class="not">404</div>
<div class="left wing"></div>
<div class="right wing"></div>
</div>
<script>
$(document).ready(function() {
var $moth = $('#moth');
$(document).on('mousemove', function(e) {
var mouseX = e.clientX,
mouseY = e.clientY;
mothP = $moth.position(),
mothX = mothP.left,
mothY = mothP.top,
$moth.css('left', mouseX + 'px');
$moth.css('top', mouseY + 'px');
var vx = mouseX - mothX,
vy = mouseY - mothY,
r = Math.sqrt(vx * vx + vy * vy),
cos = vx / r,
angle = Math.acos(cos) * 180 / Math.PI + 90,
transform = '';
if (vy < 0) angle = -angle + 180;
transform += 'rotateZ(' + angle + 'deg)';
$moth.css('-webkit-transform', transform).
css('-moz-transform', transform).
css('transform', transform);
});
});
</script>
</body>
</html>
jQuery+css3实现极富创意的飞蛾追逐动画404页面效果源码.zip
版权申诉
154 浏览量
2022-11-06
23:44:30
上传
评论
收藏 115KB ZIP 举报
毕业_设计
- 粉丝: 1947
- 资源: 1万+
最新资源
- elasticsearch数据库下载、配置、使用案例
- springboot的概要介绍与分析
- C语言的概要介绍与分析
- 第一个较大的Android项目,基于Android平台的图书管理系统(Android studio).zip
- Cisco Packet Tracer 6.2 for Windows Instructor Version
- 使⽤pyIAST计算⽓体吸附选择性
- tmp_b056727e59b8123365486983f32baa9732607ec3c6137b12.pdf
- C代码实现文件的拆分和合并,本质上就是文件的读写操作.zip
- TVMP3player.apk.1
- 出马出马出马出马出马出马出马
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈