Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
<form class="screen" novalidate> <input id="start" type="checkbox" tabindex="-1"> <input id="end" type="checkbox" tabindex="-1"> <input id="last" type="checkbox" tabindex="-1"> <div class="sky"> <div></div> <div></div> </div> <div class="base"> <input type="checkbox" tabindex="-1" required> <div class="container horizontal"> <div class="block floating horizontal"></div> <div class="block horizontal"> <input type="checkbox" tabindex="-1"> <div class="container vertical"> <div class="block floating vertical"></div> <div class="block vertical"> <input type="checkbox" tabindex="-1"> <div class="container horizontal"> <div class="block floating horizontal"></div> <div class="block horizontal"> <input type="checkbox" tabindex="-1"> <div class="container vertical"> <div class="block floating vertical"></div> <div class="block vertical"> <input type="checkbox" tabindex="-1"> <div class="container horizontal"> <div class="block floating horizontal"></div> <div class="block horizontal"> <input type="checkbox" tabindex="-1"> <div class="container vertical"> <div class="block floating vertical"></div> <div class="block vertical"> <input type="checkbox" tabindex="-1"> <div class="container horizontal"> <div class="block floating horizontal"></div> <div class="block horizontal"> <input type="checkbox" tabindex="-1"> <div class="container vertical"> <div class="block floating vertical"></div> <div class="block vertical"> <input type="checkbox" tabindex="-1"> <div class="container horizontal"> <div class="block floating horizontal"></div> <div class="block horizontal"> <input type="checkbox" tabindex="-1"> <div class="container vertical"> <div class="block floating vertical"></div> <div class="block vertical"> <input type="checkbox" tabindex="-1"> <div class="container horizontal"> <div class="block floating horizontal"></div> <div class="block horizontal"> <input type="checkbox" tabindex="-1"> <div class="container vertical"> <div class="block floating vertical"></div> <div class="block vertical"> <input type="checkbox" tabindex="-1"> <div class="container horizontal"> <div class="block floating horizontal"></div> <div class="block horizontal"> <input type="checkbox" tabindex="-1"> <div class="container vertical"> <div class="block floating vertical"></div> <div class="block vertical"> <input type="checkbox" tabindex="-1"> <div class="container horizontal"> <div class="block floating horizontal"></div> <div class="block horizontal"> <input type="checkbox" tabindex="-1"> <div class="container vertical"> <div class="block floating vertical"></div> <div class="block vertical"> <input type="checkbox" tabindex="-1"> <div class="container horizontal"> <div class="block floating horizontal"></div> <div class="block horizontal"> <input type="checkbox" tabindex="-1"> <div class="container vertical"> <div class="block floating vertical"></div> <div class="block vertical"> <input type="checkbox" tabindex="-1"> <div class="container horizontal"> <div class="block floating horizontal"></div> <div class="block horizontal"> <input type="checkbox" tabindex="-1"> <div class="container vertical"> <div class="block floating vertical"></div> <div class="block vertical"> <input type="checkbox" tabindex="-1"> <div class="container horizontal"> <div class="block floating horizontal"></div> <div class="block horizontal"> <input type="checkbox" tabindex="-1"> <div class="container vertical"> <div class="block floating vertical"></div> <div class="block vertical"> <input type="checkbox" tabindex="-1"> <div class="container horizontal"> <div class="block floating horizontal"></div> <div class="block horizontal"> <input type="checkbox" tabindex="-1"> <div class="container vertical"> <div class="block floating vertical"></div> <div class="block vertical"> <input type="checkbox" tabindex="-1"> <div class="container horizontal"> <div class="block floating horizontal"></div> <div class="block horizontal"> <input type="checkbox" tabindex="-1"> <div class="container vertical"> <div class="block floating vertical"></div> <div class="block vertical"> <input type="checkbox" tabindex="-1"> <div class="container horizontal"> <div class="block floating horizontal"></div> <div class="block horizontal"> <input type="checkbox" tabindex="-1"> <div class="container vertical"> <div class="block floating vertical"></div> <div class="block vertical"> <input type="checkbox" tabindex="-1"> <div class="container horizontal"> <div class="block floating horizontal"></div> <div class="block horizontal"> <input type="checkbox" tabindex="-1"> <div class="container vertical"> <div class="block floating vertical"></div> <div class="block vertical"> <input type="checkbox" tabindex="-1"> <div class="container horizontal"> <div class="block floating horizontal"></div> <div class="block horizontal"> <input type="checkbox" tabindex="-1"> <div class="container vertical"> <div class="block floating vertical"></div> <div class="block vertical"> <input type="checkbox" tabindex="-1"> <div class="container horizontal"> <div class="block floating horizontal"></div> <div class="block horizontal"> <input type="checkbox" tabindex="-1"> <div class="container vertical"> <div class="block floating vertical"></div> <div class="block vertical"> <input type="checkbox" tabindex="-1"> <div class="container horizontal"> <div class="block floating horizontal"></div> <div class="block horizontal"> <input type="checkbox" tabindex="-1"> <div class="container vertical"> <div class="block floating vertical"></div> <div class="block vertical"> <input type="checkbox" tabindex="-1"> <div class="container horizontal"> <div class="block floating horizontal"></div> <div class="block horizontal"> <input type="checkbox" tabindex="-1"> <div class="container vertical"> <div class="block floating vertical"></div> <div class="block vertical"> <input type="checkbox" tabindex="-1"> <div class="container horizontal"> <div class="block floating horizontal"></div> <div class="block horizontal"> <input type="checkbox" tabindex="-1"> <div class="container vertical"> <div class="block floating vertical"></div> <div class="block vertical"> <input type="checkbox" tabindex="-1"> <div class="container horizontal"> <div class="block floating horizontal"></div> <div class="block horizontal"> <input type="checkbox" tabindex="-1"> <div class="container vertical"> <div class="block floating vertical"></div> <div class="block vertical"> <input type="checkbox" tabindex="-1"> <div class="container horizontal"> <div class="block floating horizontal"></div> <div class="block horizontal"> <input type="checkbox" tabindex="-1"> <div class="container vertical"> <div class="block floating vertical"></div> <div class="block vertical"> <input type="checkbox" tabindex="-1"> <div class="container horizontal"> <div class="block floating horizontal"></div> <div class="block horizontal"> <input type="checkbox" tabindex="-1"> <div class="container vertical"> <div class="block floating vertical"></div> <div class="block vertical"> <input type="checkbox" tabindex="-1"> <div class="container horizontal"> <div class="block floating horizontal"></div> <div class="block horizontal"> <input type="checkbox" tabindex="-1"> <div class="container vertical"> <div class="block floating vertical"></div> <div class="block vertical"> <input type="checkbox" tabindex="-1"> <div class="container horizontal"> <div class="block floating horizontal"></div> <div class="block horizontal"> <label class="last" for="last" tabindex="-1"></label> <div class="container vertical"> <div class="block floating vertical"></div> <div class="block vertical"> <label class="end horizontal" for="end"></label> <label class="end vertical" for="end"></label> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="points"></div> <label class="start" for="start" tabindex="-1"> PURE CSS<br>STACK </label> <button type="reset" tabindex="-1"> CLICK OR TAP<br> TO RESTART </button> </form>
css
/* Layout */ body { margin: 0; background-color: black; counter-reset: points; } .screen { position: relative; margin: 0 auto; max-width: 100vw; width: 75vh; height: 100vh; overflow: hidden; } /* Sky */ .sky { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; } .sky > div { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .sky > div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; display: block; height: 1000vh; } .sky > div + div { animation: opacity 30s linear infinite forwards paused; } /* All gradients except last are from https://uigradients.com/ */ .sky > div::before { background: linear-gradient( #f12711, #f5af19 10%, #91eae4 11%, #86a8e7, #7f7fd5 21%, #f64f59 22%, #c471ed, #12c2e9 32%, #f7797d 33%, #fbd786, #c6ffdd 43%, #8a2387 44%, #e94057, #f27121 54%, #3a1c71 55%, #d76d77, #fdbb2d 65%, #22c1c3 66%, #fdbb2d 76%, #1a2a6c 77%, #b21f1f, #fdbb2d 87% ); animation: sky 240s steps(8, end) infinite forwards paused; } .sky > div + div::before { background: linear-gradient( #ff0080, #ff8c00, #40e0d0 10%, #1d2671 11%, #c33764 21%, #78ffd6 22%, #a8ff78 32%, #4b1248 33%, #f0c27b 43%, #2980b9 44%, #6dd5fa, #fff 54%, #03001e 55%, #7303c0, #ec38bc, #fdeff9 65%, #56ccf2 66%, #2f80ed 76%, #0c0510 77%, #160b3e, #5f4282, #cecc99 87% ); animation: sky 240s steps(8, end) -15s infinite forwards paused; } /* Inputs and Last Label */ input, .last { z-index: 1; position: absolute; display: none; width: 300vh; height: 300vh; opacity: 0; cursor: pointer; pointer-events: auto; transform: translate(-150vh, -150vh); -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } #last { display: initial; pointer-events: none; } input:checked, #last:checked { display: none !important; } /* Base */ .base { position: relative; left: calc(50% - 15vh); top: 50vh; width: 30vh; height: 30vh; background-color: red; pointer-events: none; transform: rotateX(45deg) rotateZ(45deg); transform-style: preserve-3d; transition: transform 0.5s ease-in-out; } /* Base Sides */ .base::before, .base::after { content: ""; z-index: -1; position: absolute; display: block; } .base::before { right: 0; width: 50vh; height: 100%; background: linear-gradient(to left, #d00, rgba(221, 0, 0, 0)); transform: rotateY(-90deg); transform-origin: right; } .base::after { bottom: 0; width: 100%; height: 50vh; background: linear-gradient(to top, #e00, rgba(238, 0, 0, 0)); transform: rotateX(90deg); transform-origin: bottom; } /* Containers */ .container { position: absolute; display: flex; transform-style: preserve-3d; } .container.horizontal { left: -45vh; flex-direction: row; width: calc(90vh + 100%); height: 100%; } .container.vertical { top: -45vh; flex-direction: column; width: 100%; height: calc(90vh + 100%); } /* Spacers */ .container::before, .container::after { content: ""; } .container.horizontal::before, .container.horizontal::after { max-width: calc(100% - 45vh); min-width: 45vh; height: 100%; } .container.vertical::before, .container.vertical::after { width: 100%; max-height: calc(100% - 45vh); min-height: 45vh; } /* Blocks */ .block { position: relative; visibility: hidden; flex-grow: 1; background-color: currentColor; transform: translateZ(6vh); transform-style: preserve-3d; } .block.horizontal { height: 100%; } .block.vertical { width: 100%; } .block.floating { position: absolute; display: none; visibility: visible; } .block.floating.horizontal { width: calc(100% - 90vh); animation: left 2s linear alternate infinite both; } .block.floating.vertical { height: calc(100% - 90vh); animation: top 2s linear alternate infinite both; } /* Block Sides */ .block::before, .block::after { content: ""; z-index: -1; position: absolute; display: block; background-color: currentColor; } .block::before { right: 0; width: 6vh; height: 100%; box-shadow: inset -6vh 0 rgba(0, 0, 0, 0.2); transform: rotateY(-90deg); transform-origin: right; } .block::after { bottom: 0; width: 100%; height: 6vh; box-shadow: inset 0 -6vh rgba(0, 0, 0, 0.1); transform: rotateX(90deg); transform-origin: bottom; } /* End Labels */ .end { position: absolute; left: -200vh; top: -300vh; visibility: visible; max-width: 400vh; max-height: 600vh; pointer-events: auto; cursor: pointer; transform: rotateZ(-45deg) rotateX(-45deg) translateZ(100vh); -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } .end.horizontal { width: calc(400vh - 100000%); height: 600vh; } .end.vertical { width: 400vh; height: calc(600vh - 100000%); } /* Points */ .points { position: absolute; left: 0; right: 0; top: 0; display: none; text-align: center; color: white; font-family: "Helvetica", "Roboto", "Segoe UI", "Arial", sans-serif; font-size: 9vh; font-weight: lighter; pointer-events: none; } .points::before { content: "YOU'VE REACHED THE TOP!"; display: block; margin: 4vh auto; font-size: 4vh; opacity: 0; transition: opacity 0.25s; } .points::after { content: counter(points); display: block; } /* Start Label */ .start { position: absolute; left: 0; right: 0; top: 0; bottom: 0; padding: 15vh 0; text-align: center; color: transparent; text-shadow: 0 0 0 white; font-family: "Helvetica", "Roboto", "Segoe UI", "Arial", sans-serif; font-size: 9vh; font-weight: lighter; cursor: pointer; transition: opacity 0.25s; animation: start 0.75s linear; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } .start::before { content: ""; position: absolute; left: calc(50% - 3vh); top: 59.5vh; display: block; border-top: 5vh solid transparent; border-bottom: 5vh solid transparent; border-left: 8.5vh solid white; } .start::after { content: ""; position: absolute; left: calc(50% - 10vh); top: 54.5vh; display: block; box-sizing: border-box; border: solid 2vh white; border-radius: 50%; width: 20vh; height: 20vh; } /* Restart Button */ button { position: absolute; left: 0; right: 0; top: 0; bottom: 0; border: none; padding-top: 80vh; width: 100%; color: white; background: transparent; opacity: 0; pointer-events: none; font-family: "Helvetica", "Roboto", "Segoe UI", "Arial", sans-serif; font-size: 4vh; font-weight: lighter; cursor: pointer; transition: opacity 0.25s; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } /* Keyframes */ @keyframes opacity { 0% { opacity: 1; } 25% { opacity: 1; } 50% { opacity: 0; } 75% { opacity: 0; } 100% { opacity: 1; } } @keyframes sky { from { transform: none; } to { transform: translateY(-880vh); } } @keyframes width { from { width: 0; } to { width: 90vh; } } @keyframes height { from { height: 0; } to { height: 90vh; } } @keyframes left { from { left: 0; } to { left: 90vh; } } @keyframes top { from { top: 0; } to { top: 90vh; } } @keyframes color { 0% { color: #f00; } 19% { color: #ff0; } 31% { color: #0f0; } 43% { color: #0ff; } 62% { color: #00f; } 81% { color: #f0f; } 100% { color: #f00; } } @keyframes start { from { text-shadow: 0 0 1vh white, 2vh -2vh 1vh white, 2vh 2vh 1vh white, -2vh 2vh 1vh white, -2vh -2vh 1vh white; opacity: 0; } to { text-shadow: 0 0 0 white; opacity: 1; } } /* Sky: start changing */ #start:checked ~ .sky > div + div, #start:checked ~ .sky > div::before { animation-play-state: running; } /* Sky: stop changing */ #end:checked ~ .sky > div + div, #end:checked ~ .sky > div::before, #last:checked ~ .sky > div + div, #last:checked ~ .sky > div::before { animation-play-state: paused; } /* Base: start movement */ #start:checked ~ .base { transform: translateY(200vh) rotateX(45deg) rotateZ(45deg); transition-duration: 60s; transition-timing-function: linear; } /* Base: stop movement */ #end:checked ~ .base, #last:checked ~ .base { transform: translateY(25vh) rotateX(45deg) rotateZ(45deg) scale3d(0.3, 0.3, 0.3); transition-duration: 1s; transition-timing-function: ease-in-out; } /* Inputs and Last Label: display current */ #start:checked ~ .base > input, input:checked + .container > .block > input, input:checked + .container > .block > .last { display: block; } /* Containers: start color rotation */ #start:checked ~ .base .container { animation: color 60s linear alternate infinite both; } /* Containers: stop color rotation of current */ #start:checked ~ .base > .container, input:checked + .container > .block > .container { animation-play-state: paused !important; } /* Spacers: start sizing of current */ #start:checked ~ .base > .container.horizontal::before, input:checked + .container > .block > .container.horizontal::before { animation: width 2s linear infinite alternate both running; } #start:checked ~ .base > .container.horizontal::after, input:checked + .container > .block > .container.horizontal::after { animation: width 2s linear infinite alternate-reverse both running; } #start:checked ~ .base > .container.vertical::before, input:checked + .container > .block > .container.vertical::before { animation: height 2s linear infinite alternate both running; } #start:checked ~ .base > .container.vertical::after, input:checked + .container > .block > .container.vertical::after { animation: height 2s linear infinite alternate-reverse both running; } /* Spacers: stop sizing of current */ #end:active ~ .base .container::before, #end:active ~ .base .container::after, #end:checked ~ .base .container::before, #end:checked ~ .base .container::after, #last:active ~ .base .container::before, #last:active ~ .base .container::after, #last:checked ~ .base .container::before, #last:checked ~ .base .container::after, input:active + .container::before, input:active + .container::after, input:checked + .container::before, input:checked + .container::after { animation-play-state: paused !important; } /* Floating Blocks: display current */ #start:checked ~ .base > .container > .floating, input:checked + .container > .block > .container > .floating { display: block; } /* Floating Blocks: stop movement of current */ #end:active ~ .base .floating, #last:active ~ .base .floating, input:active + .container > .floating { animation-play-state: paused; } /* Floating Blocks: stop movement of current then fadeout */ #end:checked ~ .base .floating, #last:checked ~ .base .floating, input:checked + .container > .floating { visibility: hidden; color: transparent; transition: color 0.5s, background-color 0.5s, visibility 0s 0.5s; animation-play-state: paused; } /* Increment Points */ #last:checked ~ .base .floating, input:checked + .container > .floating { counter-increment: points 1; } /* Floating Block Sides: stop sizing of current then fadeout */ #end:checked ~ .base .floating::before, #end:checked ~ .base .floating::after, #last:checked ~ .base .floating::before, #last:checked ~ .base .floating::after, input:checked + .container > .floating::before, input:checked + .container > .floating::after { visibility: hidden; opacity: 0; transition: opacity 0.5s, visibility 0s 0.5s; animation-play-state: paused; } /* Blocks: show current */ input:checked + .container > .floating + .block, #last:checked ~ .base .last + .container > .floating + .block { visibility: visible; } /* Points: show only positive */ .screen:valid .points { display: block; } /* Points: top reached */ #last:checked ~ .points::before { opacity: 1; } /* Start Label: hide after started */ #start:checked ~ .start { pointer-events: none; opacity: 0; animation: none; } /* Restart Button: show on end */ #end:checked ~ button, #last:checked ~ button { pointer-events: auto; opacity: 1; }
JavaScript
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载，需支付20jQ币
开通后，在线代码模块中所有代码可终身免费下！
您已开通在线代码永久免费下载,关闭提示框后，点下载代码可直接下载！
您已经开通过在线代码永久免费下载
对不起，您的jQ币不足！可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>纯CSS堆栈-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号