<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5/CSS3激光宝剑动画演示动画</title>
<style>
body {
background-color: hsl(0, 0%, 5%);
overflow: hidden;
}
.swords :nth-child(2) {
animation-delay: 1s;
}.swords :nth-child(3) {
animation-delay: 2s;
}.swords :nth-child(4) {
animation-delay: 3s;
}
.swords :nth-child(5) {
animation-delay: 4s;
}
.swords {
width: 65rem;
margin: auto;
}
.sword {
display: inline-block;
margin: 5rem;
transform-origin: 50% 75%;
animation: 5s swing cubic-bezier(0,1.38,.83,.67) infinite;
}
.blade {
background-color: hsl(0, 0%, 81%);
}
.knob {
border-radius: 50%;
}
.blade, .grip, .knob {
margin: auto;
}
.guard, .grip {
background-color: hsl(53, 19%, 22%);
}
.samurai {
width: 1.5rem;
}
.samurai .blade {
height: 20rem;
width: .5rem;
border-top-right-radius: 100%;
box-shadow: -.25rem 0 0 0 hsla(0, 0%, 51%, .5) inset;
}
.samurai .guard {
background-color: hsl(48, 95%, 37%);
height: .25rem;
width: 100%;
}
.samurai .grip {
height: 6rem;
width: .5rem;
}
.knight {
width: 5rem;
}
.knight .blade {
height: 20rem;
width: 1rem;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
box-shadow: -.5rem 0 0 0 hsla(0, 0%, 43%, .5) inset;
}
.knight .guard, .knight .grip {
background-color: hsl(53, 7%, 41%);
}
.knight .guard {
height: 0.45rem;
width: 100%;
border-radius: 33%;
}
.knight .grip {
height: 4rem;
width: 0.7rem;
border-radius: 150%;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.knight .knob {
position: relative; top: -.5rem;
height: 1rem; width: 1rem;
background-color: hsl(0, 0%, 80%);
}
.jedi, .sith {
width: 1.5rem;
}
.jedi .blade, .sith .blade {
height: 20rem;
width: .5rem;
border-top-right-radius: 0.2rem;
border-top-left-radius: 0.2rem;
}
.jedi .blade {
background-color: hsla(213, 100%, 89%, 1);
box-shadow: 0 0 3rem .5rem hsla(210, 100%, 63%, 1);
}
.sith .blade {
background-color: hsla(0, 100%, 67%, 1);
box-shadow: 0 0 2rem .5rem hsla(0, 50%, 59%, .7);
}
.jedi.green .blade {
background-color: hsl(120, 100%, 65%);
box-shadow: 0 0 3rem .5rem hsla(120, 95%, 62%, 0.61);
}
.jedi .guard, .sith .guard {
background-color: hsl(48, 95%, 37%);
height: .25rem;
width: 100%;
}
.jedi .grip, .sith .grip {
height: 6rem;
width: .5rem;
}
@keyframes swing {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
<script src="js/prefixfree.min.js"></script>
</head>
<body>
<div class='swords'>
<div class='sword jedi'>
<div class='blade'></div>
<div class='grip'></div>
</div>
<div class='sword samurai'>
<div class='blade'></div>
<div class='guard'></div>
<div class='grip'></div>
</div>
<div class='sword sith'>
<div class='blade'></div>
<div class='grip'></div>
</div>
<div class='sword knight'>
<div class='blade'></div>
<div class='guard'></div>
<div class='grip'></div>
<div class='knob'></div>
</div>
<div class='sword jedi green'>
<div class='blade'></div>
<div class='grip'></div>
</div>
</div>
</body>
</html>
HTML5CSS3实现有星球大战效果的激光宝剑动画特效源码.zip
版权申诉
125 浏览量
2022-11-03
23:57:08
上传
评论
收藏 7KB ZIP 举报
HTML5CSS3实现有星球大战效果的激光宝剑动画特效源码.zip （4个子文件） 
132677971909878380 css 
style.css 2KB index.haml 255B
index.html 3KB js prefixfree.min.js 12KB资源评论
易小侠
- 粉丝: 6481
- 资源: 9万+
最新资源
- 基于Java的网上订餐系统设计源码 - online ordering system
- 基于Javascript的超级美眉网络资源管理应用模块设计源码
- 基于Typescript和PHP的编程知识储备库设计源码 - study-php
- 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
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
