Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; height: 100vh; font-family: "Roboto", sans-serif; overflow: hidden; box-shadow: inset 0 0 5em 1em #000; background: #4f4f4f; } .lines::before { content: ""; top: 50%; transform: translatey(-50%); left: 0; height: 8px; background: #000; width: 100%; position: absolute; } .lines::after { content: ""; top: 0; left: 50%; transform: translatex(-50%); width: 8px; background: #000; height: 100vh; position: absolute; } .screen { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0); background: #e1e1e1; position: absolute; height: calc(100vh + 100vw); width: calc(100vh + 100vw); animation: spin 1s linear infinite; box-shadow: inset 0 0 5em 1em #000; } @keyframes spin { 0% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0); } 12% { clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0); } 37% { clip-path: polygon( 50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0, 50% 0 ); } 62% { clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0, 50% 0); } 87% { clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0, 50% 0); } 100% { clip-path: polygon(50% 50%, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0); } } .number { font-size: 18rem; position: relative; } .number::after, .number::before { content: ""; border: #f7f7f7 solid 12px; border-radius: 50%; position: absolute; } .number::before { width: 480px; height: 480px; left: 50%; top: 50%; transform: translate(-50%, -50%); } .number::after { width: 400px; height: 400px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
JavaScript
const number = document.querySelector(".number"); const countdown = 9; let counter = countdown; number.innerHTML = counter; setInterval(() => { counter--; number.innerHTML = counter; if (counter === 1) { counter = countdown + 1; } }, 1000);
粒子
时间
文字
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号