CSS3实现外星飞船UFO动画特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3实现外星飞船UFO动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>CSS3实现外星飞船UFO动画特效</title>
    <link type="text/css" href="css/style.css" rel="stylesheet" />
</head>

<body>
    <div class="spaceship">
        <div class="dome">
            <img id="alien" src="images/purple-alien.png" />
            <div class="pit"></div>
        </div>
        <div class="top"></div>
        <div class="base"></div>
        <div class="lights"></div>
    </div>
</body>
</html>

CSS代码(style.css):

body{background:url("../images/star-sky.jpg"),url("../images/galaxy.jpg");background-blend-mode:multiply;animation:spacetravel 100s linear infinite;-webkit-animation:spacetravel 100s linear infinite;overflow:hidden;}
.spaceship{position:relative;margin:auto;margin-top:100px;width:300px;height:500px;animation:hover infinite ease-in-out 1.5s;-webkit-animation:hover infinite ease-in-out 1.5s;}
#alien{position:absolute;width:110px;margin-left:15px;z-index:3;animation:float infinite ease-in-out 1.5s;-webkit-animation:float infinite ease-in-out 1.5s;}
.dome{position:absolute;top:10px;left:115px;width:150px;height:100px;background:#fff;box-shadow:0px 0px 100px #fff;border-radius:50% 50% 0 0;opacity:.7;z-index:2;}
.pit{position:absolute;top:80px;width:150px;height:40px;background:#000;border-radius:50%;z-index:1;}
.top{position:absolute;top:85px;left:75px;width:225px;height:50px;border-radius:50%;background:radial-gradient(50% 30%,#551a8b 20%,#888888 100%);border:3px solid #000;z-index:1;}
.base{position:absolute;top:100px;height:0;width:200px;border-radius:0 0 50% 50%;border-bottom:95px solid #696969;border-left:90px solid transparent;border-right:90px solid transparent;}
.lights{position:absolute;top:170px;left:22px;width:335px;height:45px;background:#808080;border-bottom:10px solid #808080;border-radius:0 0 50% 50%;animation:fire infinite ease-in-out 3s;-webkit-animation:fire infinite ease-in-out 3s;z-index:-1;}
.lights:after{content:"\25C9";font-size:22px;text-style:none;display:block;position:absolute;margin:5px;animation:change infinite ease-in-out 3s;-webkit-animation:change infinite ease-in-out 3s;}
@keyframes float{0%{transform:translateX(5px);}
50%{transform:translateX(0px);}
100%{transform:translateX(5px);}
}
@keyframes hover{0%{transform:translateY(0);}
50%{transform:translateY(15px);}
100%{transform:translateY(0);}
}
@keyframes change{0%{color:#ff0000;text-shadow:50px 11px 0 #ff0000,100px 17px 0 #ff0000,150px 18px 0 #ff0000,200px 17px 0 #ff0000,250px 12px 0 #ff0000,300px 1px 0px #ff0000;}
50%{color:#adff2f;text-shadow:50px 11px 0 #adff2f,100px 17px 0 #adff2f,150px 18px 0 #adff2f,200px 17px 0 #adff2f,250px 12px 0 #adff2f,300px 1px 0px #adff2f;}
100%{color:#ff0000;text-shadow:50px 11px 0 #ff0000,100px 17px 0 #ff0000,150px 18px 0 #ff0000,200px 17px 0 #ff0000,250px 12px 0 #ff0000,300px 1px 0px #ff0000;}
}
@keyframes fire{0%{box-shadow:0px 0px 75px #ff0000;}
50%{box-shadow:0px 0px 100px #adff2f;}
100%{box-shadow:0px 0px 75px #ff0000;}
}
@keyframes spacetravel{from{background-position:0 0;}
to{background-position:-10000px 10000px;}
}

附件:下载该文件资源,减少时间成本(增值服务)