<!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>纯CSS实现星球战士和激光武器特效</title>
<style>
.page {
position: relative;
background: #1B0B35;
display: grid;
padding: 5em 0 0 0;
height: 100vh;
align-items: center;
justify-content: center;
justify-items: center;
}
.page-content {
position: relative;
width: 540px;
height: 540px;
grid-area: 1 / 1 / 1 / 1;
border-radius: 50%;
background: #581E85;
background-image: linear-gradient(#1D0D36 0%, #581E85 40%, #B12598 100%);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
overflow: hidden;
}
.page-deco {
position: relative;
z-index: 2;
width: 570px;
height: 570px;
grid-area: 1 / 1 / 1 / 1;
border: 20px solid #18082f;
border-radius: 50%;
}
.page-content > .dark-bg {
background: #451868;
}
.dark-bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 1;
filter: alpha(opacity=100);
-webkit-animation: light 8s infinite ease-in-out;
animation: light 8s infinite ease-in-out;
}
@-webkit-keyframes movebg {
0% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
48% {
-webkit-transform: translate3d(-15px, -15px, 0) scale(1.04);
transform: translate3d(-15px, -15px, 0) scale(1.04);
}
95% {
-webkit-transform: translate3d(-15px, -15px, 0) scale(1.04);
transform: translate3d(-15px, -15px, 0) scale(1.04);
}
100% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
}
@-webkit-keyframes movetrees3 {
0% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
48% {
-webkit-transform: translate3d(-15px, 15px, 0) scale(1.12);
transform: translate3d(-15px, 15px, 0) scale(1.12);
}
95% {
-webkit-transform: translate3d(-15px, 15px, 0) scale(1.12);
transform: translate3d(-15px, 15px, 0) scale(1.12);
}
100% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
}
@-webkit-keyframes movetrees2 {
0% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
48% {
-webkit-transform: translate3d(-25px, -25px, 0) scale(1.18);
transform: translate3d(-25px, -25px, 0) scale(1.18);
}
95% {
-webkit-transform: translate3d(-25px, -25px, 0) scale(1.18);
transform: translate3d(-25px, -25px, 0) scale(1.18);
}
100% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
}
@-webkit-keyframes moverocks {
0% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
48% {
-webkit-transform: translate3d(-35px, -25px, 0) scale(1.1);
transform: translate3d(-35px, -25px, 0) scale(1.1);
}
95% {
-webkit-transform: translate3d(-35px, -25px, 0) scale(1.1);
transform: translate3d(-35px, -25px, 0) scale(1.1);
}
100% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
}
@-webkit-keyframes kylo {
0% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
48% {
-webkit-transform: translate3d(-55px, -25px, 0) scale(1.2);
transform: translate3d(-55px, -25px, 0) scale(1.2);
}
95% {
-webkit-transform: translate3d(-55px, -25px, 0) scale(1.2);
transform: translate3d(-55px, -25px, 0) scale(1.2);
}
100% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
}
@-webkit-keyframes movetrees1 {
0% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
48% {
-webkit-transform: translate3d(-30px, -10px, 0) scale(1.4);
transform: translate3d(-30px, -10px, 0) scale(1.4);
}
95% {
-webkit-transform: translate3d(-30px, -10px, 0) scale(1.4);
transform: translate3d(-30px, -10px, 0) scale(1.4);
}
100% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
}
@-webkit-keyframes light {
0% {
opacity: 1;
filter: alpha(opacity=100);
}
50% {
opacity: 0;
filter: alpha(opacity=0);
}
96% {
opacity: 0;
filter: alpha(opacity=0);
}
100% {
opacity: 1;
filter: alpha(opacity=100);
}
}
@-webkit-keyframes kylomask {
0% {
opacity: 0.6;
filter: alpha(opacity=60);
}
40% {
opacity: 0.6;
filter: alpha(opacity=60);
}
42% {
opacity: 1;
filter: alpha(opacity=100);
}
95% {
opacity: 1;
filter: alpha(opacity=100);
}
96% {
opacity: 0.6;
filter: alpha(opacity=60);
}
}
@-webkit-keyframes lightsaberbg {
0% {
opacity: 0;
filter: alpha(opacity=0);
}
40% {
opacity: 0;
filter: alpha(opacity=0);
}
42% {
opacity: 0.24;
filter: alpha(opacity=24);
}
50% {
opacity: 0.24;
filter: alpha(opacity=24);
}
54% {
opacity: 0.34;
filter: alpha(opacity=34);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
58% {
opacity: 0.24;
filter: alpha(opacity=24);
}
60% {
opacity: 0.24;
filter: alpha(opacity=24);
}
64% {
opacity: 0.34;
filter: alpha(opacity=34);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
68% {
opacity: 0.24;
filter: alpha(opacity=24);
}
72% {
opacity: 0.34;
filter: alpha(opacity=34);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
76% {
opacity: 0.24;
filter: alpha(opacity=24);
}
80% {
opacity: 0.24;
filter: alpha(opacity=24);
}
84% {
opacity: 0.34;
filter: alpha(opacity=34);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
88% {
opacity: 0.24;
filter: alpha(opacity=24);
}
95% {
opacity: 0.24;
filter: alpha(opacity=24);
}
96% {
opacity: 0;
filter: alpha(opacity=0);
}
}
@-webkit-keyframes lightsaberitem {
0% {
opacity: 1;
filter: alpha(opacity=100);
}
44% {
opacity: 1;
filter: alpha(opacity=100);
}
54% {
opacity: 0;
filter: alpha(opacity=0);
}
72% {
opacity: 1;
filter: alpha(opacity=100);
}
82% {
opacity: 0;
filter: alpha(opacity=0);
}
88% {
opacity: 1;
filter: alpha(opacity=100);
}
94% {
opacity: 0;
filter: alpha(opacity=0);
}
98% {
opacity: 1;
filter: alpha(opacity=100);
}
}
@-webkit-keyframes lightsaberitemsecond {
0% {
opacity: 0;
filter: alpha(opacity=0);
}
44% {
opacity: 0
纯CSS3实现星球大战森林中的绝地武士和激光武器动画特效源码.zip
版权申诉
34 浏览量
2022-11-09
22:10:44
上传
评论
收藏 9KB ZIP 举报
纯CSS3实现星球大战森林中的绝地武士和激光武器动画特效源码.zip （1个子文件） 
132689881830366943 
index.html 87KB资源评论
毕业_设计
- 粉丝: 1936
- 资源: 1万+
最新资源
- Screenshot_2024-05-28-11-40-58-177_com.tencent.mm.jpg
- 基于Dart的Flutter小提琴调音器APP设计源码 - violinhelper
- 基于JavaScript和CSS的随寻订购网页设计源码 - web-order
- 基于MATLAB的声纹识别系统设计源码 - VoiceprintRecognition
- 基于Java的微服务插件集合设计源码 - wsy-plugins
- 基于Vue和微信小程序的监理日志系统设计源码 - supervisionLog
- 基于Java和LCN分布式事务框架的设计源码 - tx-lcn
- 基于Java和JavaScript的茶叶评级管理系统设计源码 - tea
- IMG_5680.JPG
- IMG_0437.jpg
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
