Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Move your mouse
css
:root { --left: 0; --top: 0; } * { box-sizing: border-box; } html, body { height: 100%; } CodePenOnly { position: absolute; bottom: 20px; left: 20px; color: #ddd; font-size: 28px; font-family: georgia; display: none; } @media (width: 726px) and (height: 408px), (width: 741px) and (height: 417px) { CodePenOnly { display: block; } } Scene { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #111; -webkit-perspective: 500px; perspective: 500px; } Shape { width: 45vmin; height: 45vmin; position: relative; left: var(--left); top: var(--top); } Shape Side { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-top: 45vmin solid; border-right: 45vmin solid transparent; border-radius: 10px; box-shadow: 0 0 100px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } Shape Side:nth-child(0) { -webkit-animation: rotate-side-0 0.5s linear infinite, change-color 10s linear infinite; animation: rotate-side-0 0.5s linear infinite, change-color 10s linear infinite; } Shape Side:nth-child(1) { -webkit-animation: rotate-side-1 0.5s linear infinite, change-color 10s linear infinite; animation: rotate-side-1 0.5s linear infinite, change-color 10s linear infinite; } Shape Side:nth-child(2) { -webkit-animation: rotate-side-2 0.5s linear infinite, change-color 10s linear infinite; animation: rotate-side-2 0.5s linear infinite, change-color 10s linear infinite; } Shape Side:nth-child(3) { -webkit-animation: rotate-side-3 0.5s linear infinite, change-color 10s linear infinite; animation: rotate-side-3 0.5s linear infinite, change-color 10s linear infinite; } Shape Side:nth-child(4) { -webkit-animation: rotate-side-4 0.5s linear infinite, change-color 10s linear infinite; animation: rotate-side-4 0.5s linear infinite, change-color 10s linear infinite; } Shape Side:nth-child(5) { -webkit-animation: rotate-side-5 0.5s linear infinite, change-color 10s linear infinite; animation: rotate-side-5 0.5s linear infinite, change-color 10s linear infinite; } Shape Side:nth-child(6) { -webkit-animation: rotate-side-6 0.5s linear infinite, change-color 10s linear infinite; animation: rotate-side-6 0.5s linear infinite, change-color 10s linear infinite; } Shape Side:nth-child(7) { -webkit-animation: rotate-side-7 0.5s linear infinite, change-color 10s linear infinite; animation: rotate-side-7 0.5s linear infinite, change-color 10s linear infinite; } Shape Side:nth-child(8) { -webkit-animation: rotate-side-8 0.5s linear infinite, change-color 10s linear infinite; animation: rotate-side-8 0.5s linear infinite, change-color 10s linear infinite; } @-webkit-keyframes rotate-side-0 { from { -webkit-transform: scale(0.8, 1) rotateX(0deg) rotate(45deg); transform: scale(0.8, 1) rotateX(0deg) rotate(45deg); } to { -webkit-transform: scale(0.8, 1) rotateX(-45deg) rotate(45deg); transform: scale(0.8, 1) rotateX(-45deg) rotate(45deg); } } @keyframes rotate-side-0 { from { -webkit-transform: scale(0.8, 1) rotateX(0deg) rotate(45deg); transform: scale(0.8, 1) rotateX(0deg) rotate(45deg); } to { -webkit-transform: scale(0.8, 1) rotateX(-45deg) rotate(45deg); transform: scale(0.8, 1) rotateX(-45deg) rotate(45deg); } } @-webkit-keyframes rotate-side-1 { from { -webkit-transform: scale(0.8, 1) rotateX(45deg) rotate(45deg); transform: scale(0.8, 1) rotateX(45deg) rotate(45deg); } to { -webkit-transform: scale(0.8, 1) rotateX(0deg) rotate(45deg); transform: scale(0.8, 1) rotateX(0deg) rotate(45deg); } } @keyframes rotate-side-1 { from { -webkit-transform: scale(0.8, 1) rotateX(45deg) rotate(45deg); transform: scale(0.8, 1) rotateX(45deg) rotate(45deg); } to { -webkit-transform: scale(0.8, 1) rotateX(0deg) rotate(45deg); transform: scale(0.8, 1) rotateX(0deg) rotate(45deg); } } @-webkit-keyframes rotate-side-2 { from { -webkit-transform: scale(0.8, 1) rotateX(90deg) rotate(45deg); transform: scale(0.8, 1) rotateX(90deg) rotate(45deg); } to { -webkit-transform: scale(0.8, 1) rotateX(45deg) rotate(45deg); transform: scale(0.8, 1) rotateX(45deg) rotate(45deg); } } @keyframes rotate-side-2 { from { -webkit-transform: scale(0.8, 1) rotateX(90deg) rotate(45deg); transform: scale(0.8, 1) rotateX(90deg) rotate(45deg); } to { -webkit-transform: scale(0.8, 1) rotateX(45deg) rotate(45deg); transform: scale(0.8, 1) rotateX(45deg) rotate(45deg); } } @-webkit-keyframes rotate-side-3 { from { -webkit-transform: scale(0.8, 1) rotateX(135deg) rotate(45deg); transform: scale(0.8, 1) rotateX(135deg) rotate(45deg); } to { -webkit-transform: scale(0.8, 1) rotateX(90deg) rotate(45deg); transform: scale(0.8, 1) rotateX(90deg) rotate(45deg); } } @keyframes rotate-side-3 { from { -webkit-transform: scale(0.8, 1) rotateX(135deg) rotate(45deg); transform: scale(0.8, 1) rotateX(135deg) rotate(45deg); } to { -webkit-transform: scale(0.8, 1) rotateX(90deg) rotate(45deg); transform: scale(0.8, 1) rotateX(90deg) rotate(45deg); } } @-webkit-keyframes rotate-side-4 { from { -webkit-transform: scale(0.8, 1) rotateX(180deg) rotate(45deg); transform: scale(0.8, 1) rotateX(180deg) rotate(45deg); } to { -webkit-transform: scale(0.8, 1) rotateX(135deg) rotate(45deg); transform: scale(0.8, 1) rotateX(135deg) rotate(45deg); } } @keyframes rotate-side-4 { from { -webkit-transform: scale(0.8, 1) rotateX(180deg) rotate(45deg); transform: scale(0.8, 1) rotateX(180deg) rotate(45deg); } to { -webkit-transform: scale(0.8, 1) rotateX(135deg) rotate(45deg); transform: scale(0.8, 1) rotateX(135deg) rotate(45deg); } } @-webkit-keyframes rotate-side-5 { from { -webkit-transform: scale(0.8, 1) rotateX(225deg) rotate(45deg); transform: scale(0.8, 1) rotateX(225deg) rotate(45deg); } to { -webkit-transform: scale(0.8, 1) rotateX(180deg) rotate(45deg); transform: scale(0.8, 1) rotateX(180deg) rotate(45deg); } } @keyframes rotate-side-5 { from { -webkit-transform: scale(0.8, 1) rotateX(225deg) rotate(45deg); transform: scale(0.8, 1) rotateX(225deg) rotate(45deg); } to { -webkit-transform: scale(0.8, 1) rotateX(180deg) rotate(45deg); transform: scale(0.8, 1) rotateX(180deg) rotate(45deg); } } @-webkit-keyframes rotate-side-6 { from { -webkit-transform: scale(0.8, 1) rotateX(270deg) rotate(45deg); transform: scale(0.8, 1) rotateX(270deg) rotate(45deg); } to { -webkit-transform: scale(0.8, 1) rotateX(225deg) rotate(45deg); transform: scale(0.8, 1) rotateX(225deg) rotate(45deg); } } @keyframes rotate-side-6 { from { -webkit-transform: scale(0.8, 1) rotateX(270deg) rotate(45deg); transform: scale(0.8, 1) rotateX(270deg) rotate(45deg); } to { -webkit-transform: scale(0.8, 1) rotateX(225deg) rotate(45deg); transform: scale(0.8, 1) rotateX(225deg) rotate(45deg); } } @-webkit-keyframes rotate-side-7 { from { -webkit-transform: scale(0.8, 1) rotateX(315deg) rotate(45deg); transform: scale(0.8, 1) rotateX(315deg) rotate(45deg); } to { -webkit-transform: scale(0.8, 1) rotateX(270deg) rotate(45deg); transform: scale(0.8, 1) rotateX(270deg) rotate(45deg); } } @keyframes rotate-side-7 { from { -webkit-transform: scale(0.8, 1) rotateX(315deg) rotate(45deg); transform: scale(0.8, 1) rotateX(315deg) rotate(45deg); } to { -webkit-transform: scale(0.8, 1) rotateX(270deg) rotate(45deg); transform: scale(0.8, 1) rotateX(270deg) rotate(45deg); } } @-webkit-keyframes rotate-side-8 { from { -webkit-transform: scale(0.8, 1) rotateX(360deg) rotate(45deg); transform: scale(0.8, 1) rotateX(360deg) rotate(45deg); } to { -webkit-transform: scale(0.8, 1) rotateX(315deg) rotate(45deg); transform: scale(0.8, 1) rotateX(315deg) rotate(45deg); } } @keyframes rotate-side-8 { from { -webkit-transform: scale(0.8, 1) rotateX(360deg) rotate(45deg); transform: scale(0.8, 1) rotateX(360deg) rotate(45deg); } to { -webkit-transform: scale(0.8, 1) rotateX(315deg) rotate(45deg); transform: scale(0.8, 1) rotateX(315deg) rotate(45deg); } } @-webkit-keyframes change-color { from, 20% { color: rgba(0, 250, 154, 0.25); } 20.1%, 40% { color: rgba(255, 192, 203, 0.25); } 40.1%, 60% { color: rgba(0, 255, 255, 0.25); } 60.1%, 80% { color: rgba(255, 215, 0, 0.25); } 80.1%, to { color: rgba(220, 20, 60, 0.25); } } @keyframes change-color { from, 20% { color: rgba(0, 250, 154, 0.25); } 20.1%, 40% { color: rgba(255, 192, 203, 0.25); } 40.1%, 60% { color: rgba(0, 255, 255, 0.25); } 60.1%, 80% { color: rgba(255, 215, 0, 0.25); } 80.1%, to { color: rgba(220, 20, 60, 0.25); } }
JavaScript
var dom = document.documentElement window.addEventListener('mousemove', event => { requestAnimationFrame(_ => { var { innerWidth, innerHeight } = window var { clientX, clientY } = event var relativeX = clientX - innerWidth / 2 var relativeY = clientY - innerHeight / 2 dom.style.setProperty('--left', relativeX + 'px') dom.style.setProperty('--top', relativeY + 'px') }) })
粒子
时间
文字
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号