Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body { background: #222222; height: 100vh; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: hidden; } .view { height: 400px; width: 400px; -webkit-box-flex: 0; -ms-flex: 0 0 400px; flex: 0 0 400px; position: relative; -webkit-perspective: 600px; perspective: 600px; } .view, .view * { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .view > .axis { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .cube { margin: auto; position: absolute; top: 50%; left: 50%; margin: -0.5em; height: 1em; width: 1em; visibility: hidden; } .cube, .cube * { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .cube .scale, .cube .sides, .cube .side { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .cube .side { background-color: currentcolor; visibility: visible; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .cube .side:nth-child(1) { -webkit-transform: translateZ(0.5em) rotate3d(-1, 0, 0, 90deg) translateZ(0.5em); transform: translateZ(0.5em) rotate3d(-1, 0, 0, 90deg) translateZ(0.5em); background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)); background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)); } .cube .side:nth-child(2) { -webkit-transform: translateZ(0.5em) rotate3d(0, -1, 0, 90deg) translateZ(0.5em); transform: translateZ(0.5em) rotate3d(0, -1, 0, 90deg) translateZ(0.5em); background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); } .cube .side:nth-child(3) { -webkit-transform: translateZ(0.5em) rotate3d(1, 0, 0, 90deg) translateZ(0.5em); transform: translateZ(0.5em) rotate3d(1, 0, 0, 90deg) translateZ(0.5em); background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); } .cube .side:nth-child(4) { -webkit-transform: translateZ(0.5em) rotate3d(0, 1, 0, 90deg) translateZ(0.5em); transform: translateZ(0.5em) rotate3d(0, 1, 0, 90deg) translateZ(0.5em); background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)); } .cube .side:nth-child(5) { -webkit-transform: translateZ(0.5em) rotate3d(0, 0, 0, 90deg) translateZ(0.5em); transform: translateZ(0.5em) rotate3d(0, 0, 0, 90deg) translateZ(0.5em); background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); } .cube .side:nth-child(6) { -webkit-transform: translateZ(0.5em) rotate3d(1, 0, 0, 180deg) translateZ(0.5em); transform: translateZ(0.5em) rotate3d(1, 0, 0, 180deg) translateZ(0.5em); background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)); background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)); } :root { --x: -0.5; --y: 0.5; --fur: #ffe882; --mane: #c63d2a; --nose: #744857; --facial: #241f1c; } .head-wrapper { height: 1em; width: 1em; font-size: 100px; margin: -0.5em; top: 25%; left: 25%; position: absolute; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: translateZ(20px) rotateY(calc(90deg + 45deg * var(--x, 0))) rotateZ(calc(-45deg * var(--y, 0))); transform: translateZ(20px) rotateY(calc(90deg + 45deg * var(--x, 0))) rotateZ(calc(-45deg * var(--y, 0))); } .head { color: var(--fur); font-size: 100px; } .head .side:nth-child(2)::before { color: #241f1c; content: ''; position: absolute; font-size: 0.5em; left: -30px; bottom: 20px; height: 1em; width: 1em; background-image: -webkit-linear-gradient(bottom, var(--facial), var(--facial) 5px, transparent 5px, transparent), -webkit-linear-gradient(bottom, var(--facial), var(--facial) 5px, transparent 5px, transparent), -webkit-linear-gradient(bottom, var(--facial), var(--facial) 5px, transparent 5px, transparent); background-image: linear-gradient(to top, var(--facial), var(--facial) 5px, transparent 5px, transparent), linear-gradient(to top, var(--facial), var(--facial) 5px, transparent 5px, transparent), linear-gradient(to top, var(--facial), var(--facial) 5px, transparent 5px, transparent); background-size: 0.75em 1em, 0.75em 1em, 0.75em 1em; background-position: 10px 0, 0px -10px, 10px -20px; background-repeat: no-repeat, no-repeat, no-repeat; } .head .side:nth-child(2)::after { color: #241f1c; content: ''; position: absolute; font-size: 0.5em; right: -30px; bottom: 20px; height: 1em; width: 1em; background-image: -webkit-linear-gradient(bottom, var(--facial), var(--facial) 5px, transparent 5px, transparent), -webkit-linear-gradient(bottom, var(--facial), var(--facial) 5px, transparent 5px, transparent), -webkit-linear-gradient(bottom, var(--facial), var(--facial) 5px, transparent 5px, transparent); background-image: linear-gradient(to top, var(--facial), var(--facial) 5px, transparent 5px, transparent), linear-gradient(to top, var(--facial), var(--facial) 5px, transparent 5px, transparent), linear-gradient(to top, var(--facial), var(--facial) 5px, transparent 5px, transparent); background-size: 0.75em 1em, 0.75em 1em, 0.75em 1em; background-position: 0 0, 10px -10px, 0 -20px; background-repeat: no-repeat, no-repeat, no-repeat; } .chin { color: var(--fur); font-size: 50px; -webkit-transform: translate3d(-50%, 75%, 0.5em); transform: translate3d(-50%, 75%, 0.5em); } .chin .scale { -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scaleX(0.5) scaleY(0.25); transform: scaleX(0.5) scaleY(0.25); } .mouth { color: var(--facial); font-size: 12.5px; -webkit-transform: translate3d(-50px, 30px, 3.5em); transform: translate3d(-50px, 30px, 3.5em); } .nose { color: var(--nose); font-size: 50px; -webkit-transform: translate3d(-25px, -30px, 0.5em); transform: translate3d(-25px, -30px, 0.5em); } .nose .scale { -webkit-transform-origin: -50% 0; transform-origin: -50% 0; -webkit-transform: scaleX(0.5); transform: scaleX(0.5); } .eye-left { color: #ffffff; font-size: 35px; -webkit-transform: translate3d(15px, -33px, 100px); transform: translate3d(15px, -33px, 100px); } .eye-left .scale { -webkit-transform-origin: -50% 0; transform-origin: -50% 0; -webkit-transform: scaleZ(0.1); transform: scaleZ(0.1); } .eye-left .side:nth-child(2)::before { content: ''; position: absolute; left: 0; top: 0.25em; height: 0.5em; width: 1em; background: #241f1c; } .eye-left .side:nth-child(5)::before { content: ''; position: absolute; left: 0; top: 0.25em; height: 0.5em; width: 0.5em; background: #241f1c; } .eye-right { color: #ffffff; font-size: 35px; -webkit-transform: translate3d(15px, -33px, -1em); transform: translate3d(15px, -33px, -1em); } .eye-right .scale { -webkit-transform-origin: 50% 0 1em; transform-origin: 50% 0 1em; -webkit-transform: scaleZ(0.1); transform: scaleZ(0.1); } .eye-right .side:nth-child(2)::before { content: ''; position: absolute; left: 0; top: 0.25em; height: 0.5em; width: 1em; background: #241f1c; } .eye-right .side:nth-child(6)::before { content: ''; position: absolute; left: 0; top: 0.25em; height: 0.5em; width: 0.5em; background: #241f1c; } .ear-left { color: var(--fur); font-size: 25px; -webkit-transform: translate3d(40px, -65px, 100px); transform: translate3d(40px, -65px, 100px); } .ear-right { color: var(--fur); font-size: 25px; -webkit-transform: translate3d(40px, -65px, -1em); transform: translate3d(40px, -65px, -1em); } .mane { color: var(--mane); color: #c63d2a; font-size: 200px; -webkit-transform: translate3d(75%, 5%, -0.25em); transform: translate3d(75%, 5%, -0.25em); } .mane .scale { -webkit-transform-origin: 0% 0; transform-origin: 0% 0; -webkit-transform: scaleX(0.125); transform: scaleX(0.125); } .leg-left-wrapper { height: 1em; width: 1em; font-size: 100px; margin: -0.5em; top: 60%; left: 30%; position: absolute; -webkit-transform-origin: 50% 50% 1.5em; transform-origin: 50% 50% 1.5em; -webkit-transform: translateZ(-50px) rotateZ(calc(90deg - 15deg * var(--x, 0))) rotateX(calc(15deg * var(--x, 0))) rotateY(calc(-5deg * var(--y, 0))); transform: translateZ(-50px) rotateZ(calc(90deg - 15deg * var(--x, 0))) rotateX(calc(15deg * var(--x, 0))) rotateY(calc(-5deg * var(--y, 0))); } .leg-left { color: var(--fur); font-size: 100px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .leg-left .scale { -webkit-transform-origin: 50% 50% 1em; transform-origin: 50% 50% 1em; -webkit-transform: scale3d(1, 0.25, 0.5); transform: scale3d(1, 0.25, 0.5); } .leg-right-wrapper { height: 1em; width: 1em; font-size: 100px; margin: -0.5em; top: 60%; right: 30%; position: absolute; -webkit-transform-origin: 50% 50% 1.5em; transform-origin: 50% 50% 1.5em; -webkit-transform: translateZ(-50px) rotateZ(calc(90deg - 15deg * var(--x, 0))) rotateX(calc(15deg * var(--x, 0))) rotateY(calc(-5deg * var(--y, 0))); transform: translateZ(-50px) rotateZ(calc(90deg - 15deg * var(--x, 0))) rotateX(calc(15deg * var(--x, 0))) rotateY(calc(-5deg * var(--y, 0))); } .leg-right { color: var(--fur); font-size: 100px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .leg-right .scale { -webkit-transform-origin: 50% 50% 1em; transform-origin: 50% 50% 1em; -webkit-transform: scale3d(1, 0.25, 0.5); transform: scale3d(1, 0.25, 0.5); } .body-wrapper { height: 1em; width: 1em; font-size: 100px; margin: -0.5em; top: 60%; left: 25%; position: absolute; -webkit-transform-origin: 150% 50% 0; transform-origin: 150% 50% 0; -webkit-transform: translate3d(0px, 40px, -60px) rotateZ(calc(90deg - 5deg * var(--x, 0))) rotateX(calc(5deg * var(--x, 0))); transform: translate3d(0px, 40px, -60px) rotateZ(calc(90deg - 5deg * var(--x, 0))) rotateX(calc(5deg * var(--x, 0))); } .body { color: var(--fur); font-size: 150px; -webkit-transform: translate3d(50px, -65px, 0) rotateY(15deg) rotateX(-135deg); transform: translate3d(50px, -65px, 0) rotateY(15deg) rotateX(-135deg); } .body .scale { -webkit-transform-origin: 50% 50% 1em; transform-origin: 50% 50% 1em; -webkit-transform: scale3d(1, 0.75, 0.75); transform: scale3d(1, 0.75, 0.75); } .foot-right-back { color: var(--fur); font-size: 50px; -webkit-transform: translate3d(85px, 90px, 20px); transform: translate3d(85px, 90px, 20px); } .foot-right-back .scale { -webkit-transform-origin: 50% 50% 1em; transform-origin: 50% 50% 1em; -webkit-transform: scale3d(1, 0.5, 0.5); transform: scale3d(1, 0.5, 0.5); } .foot-left-back { color: var(--fur); font-size: 50px; -webkit-transform: translate3d(-85px, 90px, 20px); transform: translate3d(-85px, 90px, 20px); } .foot-left-back .scale { -webkit-transform-origin: 50% 50% 1em; transform-origin: 50% 50% 1em; -webkit-transform: scale3d(1, 0.5, 0.5); transform: scale3d(1, 0.5, 0.5); } .foot-right { color: var(--fur); font-size: 50px; -webkit-transform: translate3d(27px, 90px, -20px); transform: translate3d(27px, 90px, -20px); } .foot-right .scale { -webkit-transform-origin: 50% 50% 1em; transform-origin: 50% 50% 1em; -webkit-transform: scale3d(1, 0.5, 0.5); transform: scale3d(1, 0.5, 0.5); } .foot-left { color: var(--fur); font-size: 50px; -webkit-transform: translate3d(-27px, 90px, -20px); transform: translate3d(-27px, 90px, -20px); } .foot-left .scale { -webkit-transform-origin: 50% 50% 1em; transform-origin: 50% 50% 1em; -webkit-transform: scale3d(1, 0.5, 0.5); transform: scale3d(1, 0.5, 0.5); }
JavaScript
'use strict'; var root = document.querySelector(':root'); window.addEventListener('mousemove', function (e) { var x = e.pageX / window.innerWidth * 2 - 1; var y = e.pageY / window.innerHeight * 2 - 1; root.style.setProperty('--x', x); root.style.setProperty('--y', y); });
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS 3d 狮子-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号