Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
move your mouse
css
@import url("https://fonts.googleapis.com/css?family=Paytone+One"); body, html { background: #060a19; width: 100%; height: 100%; overflow: hidden; font-family: Paytone One; } p { color: #fff; background: #000; mix-blend-mode: lighten; font-size: 30px; text-align: center; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; height: 100px; -moz-animation: filterHue2 2s linear infinite; -webkit-animation: filterHue2 2s linear infinite; animation: filterHue2 2s linear infinite; } p::before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #e23b4a; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIzOTY2YyIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjZmFhYTU0Ii8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNlMjNiNGEiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iI2RiMDc2OCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM2MDY3MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #23966c), color-stop(25%, #faaa54), color-stop(50%, #e23b4a), color-stop(75%, #db0768), color-stop(100%, #360670)); background: -moz-linear-gradient(left, #23966c, #faaa54, #e23b4a, #db0768, #360670); background: -webkit-linear-gradient(left, #23966c, #faaa54, #e23b4a, #db0768, #360670); background: linear-gradient(to right, #23966c, #faaa54, #e23b4a, #db0768, #360670); pointer-events: none; mix-blend-mode: multiply; } .loader-container { width: 100px; height: 100px; position: absolute; -moz-animation: scaleUp 0.5s linear; -webkit-animation: scaleUp 0.5s linear; animation: scaleUp 0.5s linear; -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); opacity: 0; } .loader-container .loader { background: #ff0c0c; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9Ii0wLjAzOTYxNCIgeTE9IjAuOTUyNzkiIHgyPSIxLjAzOTYxNCIgeTI9IjAuMDQ3MjEiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZjBjMGMiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMWQ0MDAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background: -moz-linear-gradient(40deg, #ff0c0c, #21d400); background: -webkit-linear-gradient(40deg, #ff0c0c, #21d400); background: linear-gradient(50deg, #ff0c0c, #21d400); border-radius: 10px; -webkit-filter: hue-rotate(0deg); filter: hue-rotate(0deg); animation: filterHue 2.5s linear infinite; height: 100%; width: 100%; transform: rotate(0deg); } .loader-container .loader::after { content: ''; position: absolute; height: 80px; width: 80px; left: 10px; top: 10px; border-radius: 100%; } @-webkit-keyframes $animationName { 50% { -webkit-filter: hue-rotate(1000deg); filter: hue-rotate(1000deg); } 100% { -webkit-filter: hue-rotate(2000deg); filter: hue-rotate(2000deg); } } @-moz-keyframes filterHue2 { 50% { -webkit-filter: hue-rotate(1000deg); filter: hue-rotate(1000deg); } 100% { -webkit-filter: hue-rotate(2000deg); filter: hue-rotate(2000deg); } } @-ms-keyframes filterHue2 { 50% { -webkit-filter: hue-rotate(1000deg); filter: hue-rotate(1000deg); } 100% { -webkit-filter: hue-rotate(2000deg); filter: hue-rotate(2000deg); } } @keyframes filterHue2 { 50% { -webkit-filter: hue-rotate(1000deg); filter: hue-rotate(1000deg); } 100% { -webkit-filter: hue-rotate(2000deg); filter: hue-rotate(2000deg); } } @-webkit-keyframes $animationName { 50% { -webkit-filter: hue-rotate(1000deg); filter: hue-rotate(1000deg); } 100% { -webkit-filter: hue-rotate(2000deg); filter: hue-rotate(2000deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes filterHue { 50% { -webkit-filter: hue-rotate(1000deg); filter: hue-rotate(1000deg); } 100% { -webkit-filter: hue-rotate(2000deg); filter: hue-rotate(2000deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-ms-keyframes filterHue { 50% { -webkit-filter: hue-rotate(1000deg); filter: hue-rotate(1000deg); } 100% { -webkit-filter: hue-rotate(2000deg); filter: hue-rotate(2000deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes filterHue { 50% { -webkit-filter: hue-rotate(1000deg); filter: hue-rotate(1000deg); } 100% { -webkit-filter: hue-rotate(2000deg); filter: hue-rotate(2000deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes $animationName { 50% { -moz-transform: scale(0.5); -ms-transform: scale(0.5); -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 1; } 100% { -moz-transform: scale(0.25); -ms-transform: scale(0.25); -webkit-transform: scale(0.25); transform: scale(0.25); } } @-moz-keyframes scaleUp { 50% { -moz-transform: scale(0.5); -ms-transform: scale(0.5); -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 1; } 100% { -moz-transform: scale(0.25); -ms-transform: scale(0.25); -webkit-transform: scale(0.25); transform: scale(0.25); } } @-ms-keyframes scaleUp { 50% { -moz-transform: scale(0.5); -ms-transform: scale(0.5); -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 1; } 100% { -moz-transform: scale(0.25); -ms-transform: scale(0.25); -webkit-transform: scale(0.25); transform: scale(0.25); } } @keyframes scaleUp { 50% { -moz-transform: scale(0.5); -ms-transform: scale(0.5); -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 1; } 100% { -moz-transform: scale(0.25); -ms-transform: scale(0.25); -webkit-transform: scale(0.25); transform: scale(0.25); } } @supports (-ms-ime-align: auto) { p { color: #21d400; background: transparent; mix-blend-mode: lighten; font-size: 30px; text-align: center; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; height: 100px; -moz-animation: filterHue2 2s linear infinite; -webkit-animation: filterHue2 2s linear infinite; animation: filterHue2 2s linear infinite; } p::before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; } } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { p { color: #ff447c; background: transparent; mix-blend-mode: lighten; font-size: 30px; text-align: center; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; height: 100px; -moz-animation: filterHue2 2s linear infinite; -webkit-animation: filterHue2 2s linear infinite; animation: filterHue2 2s linear infinite; } p::before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; } .loader { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9Ii0wLjAzOTYxNCIgeTE9IjAuOTUyNzkiIHgyPSIxLjAzOTYxNCIgeTI9IjAuMDQ3MjEiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmMDAwNTAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMzgwZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=') !important; background: -moz-linear-gradient(40deg, #f00050, #2380ff) !important; background: -webkit-linear-gradient(40deg, #f00050, #2380ff) !important; background: linear-gradient(50deg, #f00050, #2380ff) !important; } }
JavaScript
window.addEventListener("mousemove", function(e) { var to_append = document.getElementsByClassName('loader-container')[0]; var all = document.getElementsByClassName('loader-container'); var parent_div = document.createElement('div'); parent_div.className = "loader-container"; var inner_div = document.createElement('div'); inner_div.className = "loader"; parent_div.appendChild(inner_div) var d = document.body.appendChild(parent_div); parent_div.style.left = (e.clientX - 50) + 'px'; parent_div.style.top = (e.clientY - 50) + 'px'; if (document.getElementsByClassName('loader-container').length > 50) { document.body.removeChild(to_append) } });
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>彩虹小径(使用DOM元素)-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号