css实现鼠标移动控制飞机飞行方向动画效果代码
代码语言:html
所属分类:其他
代码描述:css实现鼠标移动控制飞机飞行方向动画效果代码
代码标签: css 鼠标 移动 控制 飞机 飞行 方向 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
@charset "utf-8";
/* General stuff */
/* The airplane image */
* {
transition: all 0.25s linear;
}
html {
width: 100%;
heigth: 100%;
}
body {
width: 100%;
height: 100%;
background: url(//repo.bfw.wiki/bfwrepo/images/plane/airplane-back.jpg);
background-size: cover;
animation: back 20s infinite;
-webkit-animation: back 20s infinite;
-moz-animation: back 20s infinite;
-o-animation: back 20s infinite;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
/* The background animation */
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
overflow: hidden;
}
@-webkit-keyframes back {
from {
background-position-y: bottom;
}
to {
background-position-y: top;
}
}
#im-container {
width: 35%;
height: 40%;
max-width: 300px;
max-height: 330px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: url(//repo.bfw.wiki/bfwrepo/images/plane/airpl.........完整代码请登录后点击上方下载按钮下载查看
网友评论0