Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
.all-wrap { -webkit-animation: bob 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; animation: bob 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; } .all { top: 10rem; left: calc(50% - 2.5rem); position: absolute; width: 5rem; height: 5rem; -webkit-transform-origin: center -20rem; transform-origin: center -20rem; -webkit-animation: swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; animation: swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; } .all:before { height: 20rem; width: 2px; background-color: #DB242A; left: calc(50% - 1px); bottom: 20rem; } .yarn { position: absolute; top: 0; left: 0; width: 80px; height: 80px; border-radius: 50%; background-image: -webkit-radial-gradient(top left, circle, #e97c7f, #db242a 50%, #af1d22); background-image: radial-gradient(circle at top left, #e97c7f, #db242a 50%, #af1d22); z-index: 1; } .yarn:before, .yarn:after { position: absolute; width: 20px; height: 20px; border-radius: 50%; background-color: white; top: -1px; } .yarn:before { left: calc(50% + 7px); background-color: #b1bce6; } .yarn:after { right: calc(50% + 7px); background-color: #D5E8F8; } .cat-wrap { position: absolute; top: 0; left: calc(50% - 45px); width: 90px; height: 130px; -webkit-animation: reverse-swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; animation: reverse-swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; -webkit-transform-origin: top center; transform-origin: top center; } .cat { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-animation: swing 7s 0.2s infinite both; animation: swing 7s 0.2s infinite both; -webkit-transform-origin: top center; transform-origin: top center; } .cat-upper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform-origin: top center; transform-origin: top center; z-index: 1; } .cat-upper .cat-leg { position: absolute; width: 20px; height: 100%; background-color: white; z-index: -1; background-image: -webkit-linear-gradient(left, #D5E8F8, #D5E8F8 20%, #8B9BD9); background-image: linear-gradient(to right, #D5E8F8, #D5E8F8 20%, #8B9BD9); } .cat-upper .cat-leg:nth-child(1) { border-top-left-radius: 100px; left: 10px; } .cat-upper .cat-leg:nth-child(1):after { left: 50%; } .cat-upper .cat-leg:nth-child(2) { border-top-left-radius: 0; border-top-right-radius: 100px; right: 10px; } .cat-upper .cat-leg:nth-child(2):after { right: 50%; } .cat-lower-wrap { height: 90%; width: 100%; position: absolute; top: 100%; width: 75px; left: calc(50% - 37.5px); -webkit-animation: reverse-swing 7s 0.2s infinite both; animation: reverse-swing 7s 0.2s infinite both; -webkit-transform-origin: top center; transform-origin: top center; } .cat-lower { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-animation: swing 7s 0.5s infinite both; animation: swing 7s 0.5s infinite both; -webkit-transform-origin: top center; transform-origin: top center; } .cat-lower:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 100px; background-image: -webkit-radial-gradient(10px 50px, circle, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9); background-image: radial-gradient(circle at 10px 50px, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9); z-index: 1; } .cat-lower .cat-leg, .cat-lower .cat-paw { z-index: -1; position: absolute; height: 20px; width: 20px; -webkit-animation: swing-leg 7s 0.3s infinite both; animation: swing-leg 7s 0.3s infinite both; z-index: 1; -webkit-transform-origin: top center; transform-origin: top center; border-top-left-radius: 20px; border-top-right-radius: 20px; background-image: -webkit-linear-gradient(left, white, #D5E8F8, #8B9BD9); background-image: linear-gradient(to right, white, #D5E8F8, #8B9BD9); } .cat-lower > .cat-leg { bottom: 20px; } .cat-lower > .cat-leg .cat-leg { top: 25%; } .cat-lower > .cat-leg + .cat-leg { right: 0; } .cat-lower .cat-paw { top: 50%; border-radius: 50%; background-color: #fff; } .cat-lower .cat-tail { position: absolute; height: 15px; width: 10px; -webkit-animation: swing-tail 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; animation: swing-tail 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; -webkit-transform-origin: top center; transform-origin: top center; z-index: 0; background-image: -webkit-linear-gradient(left, white, #D5E8F8, #8B9BD9); background-image: linear-gradient(to right, white, #D5E8F8, #8B9BD9); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .cat-lower .cat-tail > .cat-tail { top: 50%; } .cat-lower > .cat-tail { left: calc(50% - 5px); top: 95%; } .cat-head { width: 90px; height: 90px; background-image: -webkit-radial-gradient(10px 10px, circle, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9); background-image: radial-gradient(circle at 10px 10px, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9); border-radius: 50%; top: calc(100% - 45px); } .cat-face { position: absolute; top: 0; left: 0; height: 100%; width: 100%; -webkit-animation: face 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; animation: face 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 100px; perspective: 100px; } .cat-ears { position: absolute; top: 0; left: 0; height: 50%; width: 100%; z-index: -1; } .cat-ear { width: 20px; height: 100%; position: absolute; border-radius: 5px; top: -10px; } .cat-ear:first-child { left: 0; -webkit-transform-origin: top left; transform-origin: top left; -webkit-transform: skewY(40deg); transform: skewY(40deg); background-color: white; } .cat-ear:first-child:before { left: 0; border-top-right-radius: 50%; border-bottom-right-radius: 50%; background-color: #D7EBFB; } .cat-ear:last-child { right: 0; -webkit-transform-origin: top right; transform-origin: top right; -webkit-transform: skewY(-40deg); transform: skewY(-40deg); background-color: #d1e6f7; } .cat-ear:last-child:before { right: 0; border-top-left-radius: 50%; border-bottom-left-radius: 50%; background-color: #e0f0fc; } .cat-ear:before { width: 60%; height: 100%; top: 10px; position: absolute; background-color: #fff; } .cat-eyes { position: absolute; top: 50%; width: 100%; height: 6px; -webkit-animation: blink 7s step-end infinite both; animation: blink 7s step-end infinite both; } .cat-eyes:before, .cat-eyes:after { position: absolute; height: 6px; width: 6px; border-radius: 50%; background-color: #4B4D75; } .cat-eyes:before { left: 20px; } .cat-eyes:after { right: 20px; } .cat-mouth { position: absolute; width: 12px; height: 8px; background-color: #4B4D75; top: 60%; left: calc(50% - 6px); border-top-left-radius: 50% 30%; border-top-right-radius: 50% 30%; border-bottom-left-radius: 50% 70%; border-bottom-right-radius: 50% 70%; -webkit-transform: translateZ(10px); transform: translateZ(10px); } .cat-mouth:before, .cat-mouth:after { position: absolute; width: 90%; height: 100%; border: 2px solid #9FA2CB; top: 80%; border-radius: 100px; border-top-color: transparent; z-index: -1; } .cat-mouth:before { border-left-color: transparent; right: calc(50% - 1px); -webkit-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(10deg); transform: rotate(10deg); } .cat-mouth:after { border-right-color: transparent; left: calc(50% - 1px); -webkit-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } .cat-whiskers { width: 50%; height: 8px; position: absolute; bottom: 25%; left: 25%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 60px; perspective: 60px; } .cat-whiskers:before, .cat-whiskers:after { position: absolute; height: 100%; width: 30%; border: 2px solid #9FA2CB; border-left: none; border-right: none; } .cat-whiskers:before { right: 100%; -webkit-transform-origin: right center; transform-origin: right center; -webkit-transform: rotateY(70deg) rotateZ(-10deg); transform: rotateY(70deg) rotateZ(-10deg); } .cat-whiskers:after { left: 100%; -webkit-transform-origin: left center; transform-origin: left center; -webkit-transform: rotateY(-70deg) rotateZ(10deg); transform: rotateY(-70deg) rotateZ(10deg); } @-webkit-keyframes bob { 0% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 6.25% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 12.5% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 18.75% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 25% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 31.25% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 37.5% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 43.75% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 50% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 56.25% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 62.5% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 68.75% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 75% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 81.25% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 87.5% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 93.75% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 100% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } } @keyframes bob { 0% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 6.25% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 12.5% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 18.75% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 25% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 31.25% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 37.5% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 43.75% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 50% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 56.25% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 62.5% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 68.75% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 75% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 81.25% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 87.5% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } 93.75% { -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem); } 100% { -webkit-transform: translateY(0.4rem); transform: translateY(0.4rem); } } @-webkit-keyframes swing { 0% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 12.5% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 25% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 37.5% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 50% { -webkit-transform: rotate(23deg); transform: rotate(23deg); } 62.5% { -webkit-transform: rotate(-23deg); transform: rotate(-23deg); } 75% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 87.5% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 100% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } } @keyframes swing { 0% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 12.5% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 25% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 37.5% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 50% { -webkit-transform: rotate(23deg); transform: rotate(23deg); } 62.5% { -webkit-transform: rotate(-23deg); transform: rotate(-23deg); } 75% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 87.5% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 100% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } } @-webkit-keyframes swing-leg { 0% { -webkit-transform: rotate(0.5deg); transform: rotate(0.5deg); } 12.5% { -webkit-transform: rotate(-1deg); transform: rotate(-1deg); } 25% { -webkit-transform: rotate(1deg); transform: rotate(1deg); } 37.5% { -webkit-transform: rotate(-1.5deg); transform: rotate(-1.5deg); } 50% { -webkit-transform: rotate(2.3deg); transform: rotate(2.3deg); } 62.5% { -webkit-transform: rotate(-2.3deg); transform: rotate(-2.3deg); } 75% { -webkit-transform: rotate(1.5deg); transform: rotate(1.5deg); } 87.5% { -webkit-transform: rotate(-1deg); transform: rotate(-1deg); } 100% { -webkit-transform: rotate(0.5deg); transform: rotate(0.5deg); } } @keyframes swing-leg { 0% { -webkit-transform: rotate(0.5deg); transform: rotate(0.5deg); } 12.5% { -webkit-transform: rotate(-1deg); transform: rotate(-1deg); } 25% { -webkit-transform: rotate(1deg); transform: rotate(1deg); } 37.5% { -webkit-transform: rotate(-1.5deg); transform: rotate(-1.5deg); } 50% { -webkit-transform: rotate(2.3deg); transform: rotate(2.3deg); } 62.5% { -webkit-transform: rotate(-2.3deg); transform: rotate(-2.3deg); } 75% { -webkit-transform: rotate(1.5deg); transform: rotate(1.5deg); } 87.5% { -webkit-transform: rotate(-1deg); transform: rotate(-1deg); } 100% { -webkit-transform: rotate(0.5deg); transform: rotate(0.5deg); } } @-webkit-keyframes swing-tail { 0% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 12.5% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 25% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 37.5% { -webkit-transform: rotate(6deg); transform: rotate(6deg); } 50% { -webkit-transform: rotate(-9.2deg); transform: rotate(-9.2deg); } 62.5% { -webkit-transform: rotate(9.2deg); transform: rotate(9.2deg); } 75% { -webkit-transform: rotate(-6deg); transform: rotate(-6deg); } 87.5% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 100% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } } @keyframes swing-tail { 0% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 12.5% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 25% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 37.5% { -webkit-transform: rotate(6deg); transform: rotate(6deg); } 50% { -webkit-transform: rotate(-9.2deg); transform: rotate(-9.2deg); } 62.5% { -webkit-transform: rotate(9.2deg); transform: rotate(9.2deg); } 75% { -webkit-transform: rotate(-6deg); transform: rotate(-6deg); } 87.5% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 100% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } } @-webkit-keyframes reverse-swing { 0% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 12.5% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 25% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 37.5% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 50% { -webkit-transform: rotate(-23deg); transform: rotate(-23deg); } 62.5% { -webkit-transform: rotate(23deg); transform: rotate(23deg); } 75% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 87.5% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 100% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } } @keyframes reverse-swing { 0% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 12.5% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 25% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 37.5% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 50% { -webkit-transform: rotate(-23deg); transform: rotate(-23deg); } 62.5% { -webkit-transform: rotate(23deg); transform: rotate(23deg); } 75% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 87.5% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 100% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } } @-webkit-keyframes face { 0% { -webkit-transform: translateX(-2.5px); transform: translateX(-2.5px); } 12.5% { -webkit-transform: translateX(5px); transform: translateX(5px); } 25% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 37.5% { -webkit-transform: translateX(7.5px); transform: translateX(7.5px); } 50% { -webkit-transform: translateX(-11.5px); transform: translateX(-11.5px); } 62.5% { -webkit-transform: translateX(11.5px); transform: translateX(11.5px); } 75% { -webkit-transform: translateX(-7.5px); transform: translateX(-7.5px); } 87.5% { -webkit-transform: translateX(5px); transform: translateX(5px); } 100% { -webkit-transform: translateX(-2.5px); transform: translateX(-2.5px); } } @keyframes face { 0% { -webkit-transform: translateX(-2.5px); transform: translateX(-2.5px); } 12.5% { -webkit-transform: translateX(5px); transform: translateX(5px); } 25% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 37.5% { -webkit-transform: translateX(7.5px); transform: translateX(7.5px); } 50% { -webkit-transform: translateX(-11.5px); transform: translateX(-11.5px); } 62.5% { -webkit-transform: translateX(11.5px); transform: translateX(11.5px); } 75% { -webkit-transform: translateX(-7.5px); transform: translateX(-7.5px); } 87.5% { -webkit-transform: translateX(5px); transform: translateX(5px); } 100% { -webkit-transform: translateX(-2.5px); transform: translateX(-2.5px); } } @-webkit-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes blink { from, to, 10%, 25%, 80% { -webkit-transform: scaleY(1); transform: scaleY(1); } 8%, 23%, 78% { -webkit-transform: scaleY(0.1); transform: scaleY(0.1); } } @keyframes blink { from, to, 10%, 25%, 80% { -webkit-transform: scaleY(1); transform: scaleY(1); } 8%, 23%, 78% { -webkit-transform: scaleY(0.1); transform: scaleY(0.1); } } body, html { height: 100%; width: 100%; margin: 0; padding: 0; background-color: #1F1F3C; overflow: hidden; } *, *:before, *:after { box-sizing: border-box; position: relative; -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); -webkit-animation-fill-mode: both; animation-fill-mode: both; } *:before, *:after { content: ''; display: block; }
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号