Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Peeping Puppy
css
@import url("https://fonts.googleapis.com/css?family=Indie+Flower"); body { background: #f9836b; font-family: 'Indie Flower', cursive; } .puppy .head_eyebrow__left, .puppy .head_eyebrow__right { background: #563930; width: 16px; height: 3px; position: absolute; z-index: 5; bottom: 60px; } .puppy .head_eye__left .pupil, .puppy .head_eye__right .pupil { width: 8px; height: 12px; background: black; border-radius: 100%; } .puppy .head_eye__left .pupil:after, .puppy .head_eye__right .pupil:after { content: ''; background: white; width: 4px; height: 4px; left: 2px; top: 1px; border-radius: 10px; display: block; position: absolute; } .paw_left, .paw_right { position: absolute; z-index: 5; width: 30px; height: 20px; border-top-left-radius: 100%; border-top-right-radius: 100%; background: #b8a392; } .puppy .head_eye__left, .puppy .head_eye__right { background: white; position: absolute; z-index: 4; width: 16px; height: 20px; border-radius: 100%; } .hide, .paw, .puppy, .puppy .tail { position: absolute; left: 0; right: 0; margin: auto; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .puppy .head_earfold__left, .puppy .head_earfold__right { position: absolute; background: #563930; width: 24px; height: 38px; border-radius: 100%; z-index: 10; bottom: 60px; } .puppy .head_ear__left, .puppy .head_ear__right { position: absolute; background: #563930; width: 20px; height: 28px; border-radius: 100%; z-index: 10; bottom: 60px; } .puppy .head_eye__left .iris, .puppy .head_eye__right .iris { position: relative; background: #a3ebe8; width: 13px; height: 16px; border-radius: 100%; } .puppy .head_mouth__top, .puppy .head_mouth__left, .puppy .head_mouth__right { background: #f8f5f4; position: absolute; z-index: 3; } .puppy .head_bottom__left, .puppy .head_bottom__right { background: #cdb7a5; position: absolute; z-index: 3; width: 33px; height: 40px; border-radius: 100%; } .paw_left__part, .paw_right__part { width: 10px; height: 10px; background: #b8a392; border-radius: 10px; position: absolute; bottom: -4px; } .paw_left__part:nth-of-type(1), .paw_right__part:nth-of-type(1) { left: 0px; } .paw_left__part:nth-of-type(2), .paw_right__part:nth-of-type(2) { left: 10px; } .paw_left__part:nth-of-type(3), .paw_right__part:nth-of-type(3) { left: 20px; } .hide { background: white; width: 150px; left: -10px; height: 230px; z-index: 12; bottom: -464px; } .paw { width: 130px; z-index: 10; } .paw_left { left: 0; top: -10px; } .paw_right { right: 0px; top: -10px; } .puppy { width: 130px; height: 0px; } .puppy .intro { top: -179px; position: absolute; text-align: center; font-size: 20px; color: #a25a4b; } .puppy .wrap { position: relative; -webkit-animation: body 10s infinite; animation: body 10s infinite; } .puppy .body { position: absolute; z-index: 1; width: 100px; height: 100px; left: 13px; top: -46px; border-radius: 100%; background: #cdb7a5; } .puppy .tail { -webkit-transform-origin: 5px 100px; transform-origin: 5px 100px; width: 10px; height: 60px; top: -40px; background: #563930; border-radius: 50px; -webkit-animation: tail 1s infinite; animation: tail 1s infinite; } .puppy .head { position: absolute; top: 35px; left: 5px; -webkit-animation: head 1s infinite; animation: head 1s infinite; } .puppy .head_eyebrow__left { bottom: 124px; left: 30px; -webkit-transform: rotateZ(-14deg); transform: rotateZ(-14deg); -webkit-animation: eyebrow 10s infinite; animation: eyebrow 10s infinite; } .puppy .head_eyebrow__right { bottom: 124px; left: 74px; -webkit-transform: rotateZ(14deg); transform: rotateZ(14deg); -webkit-animation: eyebrow2 10s infinite; animation: eyebrow2 10s infinite; } .puppy .head_earfold { position: relative; top: -6px; } .puppy .head_earfold__right { bottom: 120px; left: 79px; -webkit-transform: rotateZ(-30deg); transform: rotateZ(-30deg); } .puppy .head_earfold__left { bottom: 120px; left: 18px; -webkit-transform: rotateZ(30deg); transform: rotateZ(30deg); } .puppy .head_ear { position: relative; top: -6px; } .puppy .head_ear__left { bottom: 130px; -webkit-transform: rotateZ(-50deg); transform: rotateZ(-50deg); left: 30px; } .puppy .head_ear__right { bottom: 130px; -webkit-transform: rotateZ(50deg); transform: rotateZ(50deg); left: 70px; } .puppy .head_top { background: #cdb7a5; width: 70px; height: 70px; position: absolute; z-index: 3; left: 25px; bottom: 80px; border-radius: 80px; } .puppy .head_bottom__right { left: 67px; bottom: 70px; } .puppy .head_bottom__left { left: 20px; bottom: 70px; } .puppy .head_eye__left { left: 32px; bottom: 100px; } .puppy .head_eye__left .iris { top: 2px; left: 2px; } .puppy .head_eye__left .pupil { position: relative; left: 4px; bottom: 12px; -webkit-animation: eye 10s infinite; animation: eye 10s infinite; } .puppy .head_eye__right { left: 72px; bottom: 100px; } .puppy .head_eye__right .iris { top: 2px; left: 2px; } .puppy .head_eye__right .pupil { position: relative; left: 4px; bottom: 12px; -webkit-animation: eye 10s infinite; animation: eye 10s infinite; } .puppy .head_tongue { position: absolute; background: pink; width: 14px; height: 30px; border-radius: 40px; z-index: 3; bottom: 50px; left: 54px; -webkit-animation: tongue 1s infinite; animation: tongue 1s infinite; } .puppy .head_nose { background: #563930; width: 16px; height: 10px; border-radius: 20px; position: absolute; z-index: 5; left: 52px; bottom: 83px; } .puppy .head_nose:after { content: ''; display: block; background: rgba(255, 255, 255, 0.3); position: absolute; border-radius: 10px; width: 4px; left: 3px; bottom: 4px; height: 4px; } .puppy .head_mouth__top { width: 30px; height: 30px; border-radius: 100%; left: 45px; bottom: 73px; } .puppy .head_mouth__left { width: 33px; height: 25px; border-radius: 100%; left: 33px; bottom: 65px; } .puppy .head_mouth__left:after { width: 30px; height: 20px; background: #f8f5f4; content: ''; position: absolute; z-index: 5; border-radius: 5px; left: 3px; bottom: 11px; display: block; -webkit-transform: rotatez(-43deg); transform: rotatez(-43deg); } .puppy .head_mouth__right { width: 33px; height: 25px; border-radius: 100%; left: 56px; bottom: 65px; } .puppy .head_mouth__right:after { width: 30px; height: 20px; background: #f8f5f4; content: ''; position: absolute; z-index: 5; border-radius: 5px; left: -1px; bottom: 11px; display: block; -webkit-transform: rotatez(42deg); transform: rotatez(42deg); } @-webkit-keyframes tail { 0% { -webkit-transform: translateY(-50%) rotateZ(-45deg); transform: translateY(-50%) rotateZ(-45deg); } 50% { -webkit-transform: translateY(-50%) rotateZ(45deg); transform: translateY(-50%) rotateZ(45deg); } 100% { -webkit-transform: translateY(-50%) rotateZ(-45deg); transform: translateY(-50%) rotateZ(-45deg); } } @keyframes tail { 0% { -webkit-transform: translateY(-50%) rotateZ(-45deg); transform: translateY(-50%) rotateZ(-45deg); } 50% { -webkit-transform: translateY(-50%) rotateZ(45deg); transform: translateY(-50%) rotateZ(45deg); } 100% { -webkit-transform: translateY(-50%) rotateZ(-45deg); transform: translateY(-50%) rotateZ(-45deg); } } @-webkit-keyframes head { 0% { top: 35px; } 50% { top: 40px; } 100% { top: 35px; } } @keyframes head { 0% { top: 35px; } 50% { top: 40px; } 100% { top: 35px; } } @-webkit-keyframes tongue { 0% { bottom: 50px; } 50% { bottom: 46px; } 100% { bottom: 50px; } } @keyframes tongue { 0% { bottom: 50px; } 50% { bottom: 46px; } 100% { bottom: 50px; } } @-webkit-keyframes eyebrow { 0% { -webkit-transform: rotateZ(-3deg) translateY(4px); transform: rotateZ(-3deg) translateY(4px); } 30% { -webkit-transform: rotateZ(-3deg) translateY(4px); transform: rotateZ(-3deg) translateY(4px); } 35% { -webkit-transform: rotateZ(-17deg) translateY(-2px); transform: rotateZ(-17deg) translateY(-2px); } 100% { -webkit-transform: rotateZ(-17deg) translateY(-2px); transform: rotateZ(-17deg) translateY(-2px); } } @keyframes eyebrow { 0% { -webkit-transform: rotateZ(-3deg) translateY(4px); transform: rotateZ(-3deg) translateY(4px); } 30% { -webkit-transform: rotateZ(-3deg) translateY(4px); transform: rotateZ(-3deg) translateY(4px); } 35% { -webkit-transform: rotateZ(-17deg) translateY(-2px); transform: rotateZ(-17deg) translateY(-2px); } 100% { -webkit-transform: rotateZ(-17deg) translateY(-2px); transform: rotateZ(-17deg) translateY(-2px); } } @-webkit-keyframes eyebrow2 { 0% { -webkit-transform: rotateZ(3deg) translateY(4px); transform: rotateZ(3deg) translateY(4px); } 30% { -webkit-transform: rotateZ(3deg) translateY(4px); transform: rotateZ(3deg) translateY(4px); } 35% { -webkit-transform: rotateZ(17deg) translateY(-2px); transform: rotateZ(17deg) translateY(-2px); } 100% { -webkit-transform: rotateZ(17deg) translateY(-2px); transform: rotateZ(17deg) translateY(-2px); } } @keyframes eyebrow2 { 0% { -webkit-transform: rotateZ(3deg) translateY(4px); transform: rotateZ(3deg) translateY(4px); } 30% { -webkit-transform: rotateZ(3deg) translateY(4px); transform: rotateZ(3deg) translateY(4px); } 35% { -webkit-transform: rotateZ(17deg) translateY(-2px); transform: rotateZ(17deg) translateY(-2px); } 100% { -webkit-transform: rotateZ(17deg) translateY(-2px); transform: rotateZ(17deg) translateY(-2px); } } @-webkit-keyframes body { 0% { top: 170px; } 10% { top: 60px; } 40% { top: 60px; } 41% { top: 60px; } 51% { top: 0px; } 90% { top: 0px; } 100% { top: 170px; } } @keyframes body { 0% { top: 170px; } 10% { top: 60px; } 40% { top: 60px; } 41% { top: 60px; } 51% { top: 0px; } 90% { top: 0px; } 100% { top: 170px; } } @-webkit-keyframes eye { 0% { left: 4px; bottom: 12px; } 10% { left: 4px; bottom: 12px; } 15% { left: 0px; bottom: 12px; } 20% { left: 8px; bottom: 12px; } 25% { left: 4px; bottom: 12px; } } @keyframes eye { 0% { left: 4px; bottom: 12px; } 10% { left: 4px; bottom: 12px; } 15% { left: 0px; bottom: 12px; } 20% { left: 8px; bottom: 12px; } 25% { left: 4px; bottom: 12px; } }
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号