Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
*, *:before, *:after { position: relative; box-sizing: border-box; } :root { --lightsaber-color: #6eedb2; } html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; } body { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; background: #0f101e; } .lightsaber { -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; width: 30vw; height: 5vw; display: -webkit-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -webkit-box-align: center; align-items: center; } .metal { background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #ccdbee), color-stop(35%, #607088), color-stop(70%, #ccdbee), to(#607088)); background: linear-gradient(to bottom, #ccdbee 10%, #607088 35%, #ccdbee 70%, #607088); } .black-metal { background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #767a83), color-stop(35%, #202432), color-stop(70%, #767a83), to(#202432)); background: linear-gradient(to bottom, #767a83 10%, #202432 35%, #767a83 70%, #202432); } .copper { background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #70413a), color-stop(35%, #90645a), color-stop(70%, #70413a), to(#401f21)); background: linear-gradient(to bottom, #70413a 10%, #90645a 35%, #70413a 70%, #401f21); } .pommel-cap { height: 90%; width: 10%; border-radius: 10% 0 0 10%; box-shadow: 0 0 5vw black; } .grip { height: 100%; width: 45%; border-radius: 5%; box-shadow: 0 0 5vw black; } .hilt { height: 80%; width: 35%; display: -webkit-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -webkit-box-pack: start; justify-content: flex-start; } .hilt > .segment { width: 8%; height: 100%; -webkit-box-flex: 1; flex-grow: 1; } .hilt > .segment.black-metal { width: 20%; } .focusing-ring { height: 70%; width: 15%; display: -webkit-box; display: flex; } .focusing-ring > .segment { width: 40%; height: 100%; -webkit-box-flex: 1; flex-grow: 1; } .focusing-ring > .segment.metal { width: 8%; } .blade-emitter { height: 100%; width: 10%; z-index: 1; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; } .blade-emitter > .segment { width: 40%; height: 100%; -webkit-box-flex: 1; flex-grow: 1; } .blade-emitter > .segment.start { height: 60%; width: 8%; } .blade-emitter > .segment.middle { height: 80%; } .blade-emitter > .segment.end { height: 100%; width: 8%; } .blade { position: absolute; height: 70%; width: 300%; left: 100%; background: -webkit-gradient(linear, left top, left bottom, from(var(--lightsaber-color)), color-stop(25%, white), color-stop(75%, white), to(var(--lightsaber-color))); background: linear-gradient(to bottom, var(--lightsaber-color), white 25%, white 75%, var(--lightsaber-color)); border-top-right-radius: 10vw; border-bottom-right-radius: 10vw; } .blade > .glow { border-radius: inherit; border: inherit; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 5vw var(--lightsaber-color); } .blade > .glow.large { box-shadow: 0 0 30vw 10vw var(--lightsaber-color); opacity: 0.7; } .controls { height: 25%; width: 50%; position: absolute; left: 45%; bottom: 100%; display: -webkit-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; justify-content: space-around; -webkit-box-align: center; align-items: center; z-index: -1; } .controls > .button { height: 0.75vw; width: 0.75vw; background: black; border-radius: 50%; } .controls:before { content: ""; position: absolute; width: 100%; height: 20%; bottom: 100%; background: #b16521; } .button.-up { background-color: #117305; } .button.-down { background-color: #a8141e; } /* ---------------------------------- */ :root { --ease: cubic-bezier(0.5, 0, 0.2, 1); --duration: 10s; --delay: 0s; --speed: 0.75; } :root * { -webkit-animation-duration: var(--duration); animation-duration: var(--duration); -webkit-animation-delay: var(--delay); animation-delay: var(--delay); -webkit-animation-timing-function: var(--ease); animation-timing-function: var(--ease); -webkit-animation-fill-mode: both; animation-fill-mode: both; } .pommel-cap { --delay: 0s; --duration: 1s, 0.5s; -webkit-animation-name: enter-reverse, fade-in; animation-name: enter-reverse, fade-in; } .grip { --delay: 0.3s; --duration: 1s, 0.5s; -webkit-animation-name: enter, fade-in; animation-name: enter, fade-in; } .controls { --delay: 1s; --duration: 1s, 0.5s; -webkit-animation-name: slide-down, fade-in; animation-name: slide-down, fade-in; } .controls .button { -webkit-animation-name: scale-up; animation-name: scale-up; --delay: calc(1.5s + (var(--i, 0) * 0.1s)); --duration: 0.5s; } .hilt .segment { --delay: calc(1.25s + (var(--i, 0) * 0.05s)); --duration: 1s, 1s; -webkit-animation-name: slide-down, fade-in; animation-name: slide-down, fade-in; } .hilt .segment:nth-child(even) { -webkit-animation-name: slide-up, fade-in; animation-name: slide-up, fade-in; } .focusing-ring .segment { --delay: calc(2.25s + (var(--i, 0) * 0.05s)); --duration: 1s, 1s; -webkit-animation-name: enter, fade-in; animation-name: enter, fade-in; } .blade-emitter .segment { --delay: calc(3s + (var(--i, 0) * 0.05s)); --duration: 1s, 1s; -webkit-animation-name: enter, fade-in; animation-name: enter, fade-in; } .lightsaber { -webkit-animation-name: lightsaber, lightsaber-out; animation-name: lightsaber, lightsaber-out; -webkit-animation-fill-mode: backwards, forwards; animation-fill-mode: backwards, forwards; --ease: cubic-bezier(0.5, 0, 0.2, 1), cubic-bezier(0.82, -0.38, 0.14, 1.35); --delay: 0s, 10s; --duration: 10s, 1s; } .blade { --delay: 4.5s; --duration: 1s, 1s; -webkit-transform-origin: left center; transform-origin: left center; -webkit-animation-name: blade, fade-in; animation-name: blade, fade-in; } .blade .glow { --delay: 4.5s; --duration: 3s; --ease: linear; -webkit-animation-name: flicker; animation-name: flicker; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes scale-up { from { -webkit-transform: scale(0); transform: scale(0); } } @keyframes scale-up { from { -webkit-transform: scale(0); transform: scale(0); } } @-webkit-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes enter { from { -webkit-transform: translateX(10vw); transform: translateX(10vw); } } @keyframes enter { from { -webkit-transform: translateX(10vw); transform: translateX(10vw); } } @-webkit-keyframes enter-reverse { from { -webkit-transform: translateX(-10vw); transform: translateX(-10vw); } } @keyframes enter-reverse { from { -webkit-transform: translateX(-10vw); transform: translateX(-10vw); } } @-webkit-keyframes slide-down { from { -webkit-transform: translateY(-10vw); transform: translateY(-10vw); } } @keyframes slide-down { from { -webkit-transform: translateY(-10vw); transform: translateY(-10vw); } } @-webkit-keyframes slide-up { from { -webkit-transform: translateY(10vw); transform: translateY(10vw); opacity: 0; } 40% { opacity: 1; } } @keyframes slide-up { from { -webkit-transform: translateY(10vw); transform: translateY(10vw); opacity: 0; } 40% { opacity: 1; } } @-webkit-keyframes lightsaber { from { -webkit-transform: translateX(10%); transform: translateX(10%); } 22% { -webkit-transform: translateX(-15%); transform: translateX(-15%); } 30% { -webkit-transform: translateX(-30%); transform: translateX(-30%); } 45% { -webkit-transform: translateX(-40%) scale(0.9); transform: translateX(-40%) scale(0.9); -webkit-animation-timing-function: cubic-bezier(0.7, 0, 0, 1); animation-timing-function: cubic-bezier(0.7, 0, 0, 1); } 55%, to { -webkit-transform: translateX(-100%) scale(0.7); transform: translateX(-100%) scale(0.7); } } @keyframes lightsaber { from { -webkit-transform: translateX(10%); transform: translateX(10%); } 22% { -webkit-transform: translateX(-15%); transform: translateX(-15%); } 30% { -webkit-transform: translateX(-30%); transform: translateX(-30%); } 45% { -webkit-transform: translateX(-40%) scale(0.9); transform: translateX(-40%) scale(0.9); -webkit-animation-timing-function: cubic-bezier(0.7, 0, 0, 1); animation-timing-function: cubic-bezier(0.7, 0, 0, 1); } 55%, to { -webkit-transform: translateX(-100%) scale(0.7); transform: translateX(-100%) scale(0.7); } } @-webkit-keyframes lightsaber-out { from { -webkit-transform: translateX(-100%) scale(0.7); transform: translateX(-100%) scale(0.7); } to { -webkit-transform: translateX(-100%) scale(0.7) translateX(50%) rotate(360deg) translateX(-50%); transform: translateX(-100%) scale(0.7) translateX(50%) rotate(360deg) translateX(-50%); } } @keyframes lightsaber-out { from { -webkit-transform: translateX(-100%) scale(0.7); transform: translateX(-100%) scale(0.7); } to { -webkit-transform: translateX(-100%) scale(0.7) translateX(50%) rotate(360deg) translateX(-50%); transform: translateX(-100%) scale(0.7) translateX(50%) rotate(360deg) translateX(-50%); } } @-webkit-keyframes blade { from { -webkit-transform: scaleX(0); transform: scaleX(0); } } @keyframes blade { from { -webkit-transform: scaleX(0); transform: scaleX(0); } } @-webkit-keyframes flicker { 20% { opacity: 0.5; } 40% { opacity: 0.7; } 60% { opacity: 0.2; } 80% { opacity: 0.6; } } @keyframes flicker { 20% { opacity: 0.5; } 40% { opacity: 0.7; } 60% { opacity: 0.2; } 80% { opacity: 0.6; } }
JavaScript
// Replay animation by hiding & showing the element again let el = document.body; el.addEventListener("click", function (e) { el.hidden = true; requestAnimationFrame(() => { el.hidden = false; }); }); /* Play / Pause on keypress */ var s = document.createElement("style"); s.innerHTML = " *, *:before, *:after { animation-play-state: paused !important; }"; document.addEventListener("keypress", function () { s.parentNode ? document.head.removeChild(s) : document.head.appendChild(s); });
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>光剑动画-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号