Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body { background: #b6fefc; height: 100%; width: 100%; } .container { position: absolute; left: 50%; bottom: 30%; } .body { position: relative; background: #ffa500; border-radius: 300px 300px 200px 200px; height: 200px; width: 125px; } .ears { position: absolute; z-index: -1; top: -15px; } .ears:after, .ears:before { content: ""; display: inline-block; background: #ee6000; -webkit-box-shadow: inset -5px -5px #e24b00; box-shadow: inset -5px -5px #e24b00; width: 40px; height: 70px; border-radius: 100% 100% 0 0; -webkit-transform: translateX(40px); transform: translateX(40px); border: 10px solid #ffa500; -webkit-box-sizing: border-box; box-sizing: border-box; } .ears:before { -webkit-transform: translateX(5px); transform: translateX(5px); } .eyebrows .left { border-radius: 10px; position: absolute; background: #FFFFFF; top: 15px; left: 25px; width: 15px; height: 10px; } .eyebrows .right { border-radius: 10px; position: absolute; background: #FFFFFF; top: 15px; left: 80px; width: 15px; height: 10px; } .eyes .left { position: absolute; width: 20px; height: 10px; top: 10px; left: 150px; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); z-index: 4; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 0 0 60px 60px; border: 4px solid black; border-top: 0; background: #ffa500; -webkit-transform: rotate(180deg); transform: rotate(180deg); left: 30px; top: 30px; } .eyes .right { position: absolute; width: 20px; height: 10px; top: 10px; left: 150px; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); z-index: 4; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 0 0 60px 60px; border: 4px solid black; border-top: 0; background: #ffa500; -webkit-transform: rotate(180deg); transform: rotate(180deg); left: 75px; top: 30px; } .mouth { width: 20px; height: 20px; background: #512e27; position: absolute; top: 60px; left: 0; right: 0; margin: auto; border-radius: 120px 120px 0 0; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .tongue { width: 18px; height: 8px; background: #ff7977; position: absolute; z-index: 4; margin: auto; top: 70px; left: 0px; right: 0; border-radius: 120px 120px 0 0; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .whiskers .left { position: absolute; width: 20px; height: 10px; top: 10px; left: 150px; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 0 0 60px 60px; border: 3px solid black; border-top: 0; background: #ffa500; left: 53px; top: 65px; } .whiskers .right { position: absolute; width: 20px; height: 10px; top: 10px; left: 150px; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 0 0 60px 60px; border: 3px solid black; border-top: 0; background: #ffa500; left: 33px; top: 65px; } .nose { background: #512e27; width: 20px; height: 10px; border-radius: 0 0 30px 30px; position: relative; top: 40px; left: 53px; -webkit-box-sizing: border-box; box-sizing: border-box; } .bandana { height: 10px; background: #00bcb8; position: relative; z-index: 4; top: 80px; -webkit-box-shadow: inset -5px -5px #00a2a0; box-shadow: inset -5px -5px #00a2a0; } .bandana .top { position: relative; top: -20px; z-index: -4; left: 122px; width: 25px; height: 25px; background-color: #00bcb8; border-radius: 25px 0px; -webkit-box-shadow: inset -5px -5px #00a2a0; box-shadow: inset -5px -5px #00a2a0; } .bandana .bottom { position: relative; top: -35px; z-index: -4; left: 122px; width: 25px; height: 25px; background-color: #00bcb8; border-radius: 25px 0px; -webkit-transform: rotate(40deg); transform: rotate(40deg); -webkit-box-shadow: inset -5px -5px #00a2a0; box-shadow: inset -5px -5px #00a2a0; } .stomach { width: 70px; height: 70px; background: #fff; position: absolute; top: 85px; bottom: 0; left: 0; right: 0; margin: auto; border-radius: 120px 120px 0 0; -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-box-shadow: inset -5px -5px #dedede; box-shadow: inset -5px -5px #dedede; } .tail { background: #ffa500; width: 14px; height: 70px; position: absolute; z-index: -1; left: 15px; bottom: 25px; -webkit-transform: rotate(-30deg); transform: rotate(-30deg); border-radius: 14px; -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-transition: 300ms; transition: 300ms; -webkit-animation: wag .2s infinite alternate; animation: wag .2s infinite alternate; } .legs .lfront { position: absolute; height: 20px; width: 40px; left: 20px; top: 180px; border-radius: 90px 90px 0 0; background: #FFFFFF; -webkit-box-shadow: inset -5px -5px #dedede; box-shadow: inset -5px -5px #dedede; } .legs .lback { z-index: -1; position: absolute; height: 20px; width: 40px; top: 180px; left: -10px; border-radius: 90px 90px 0 0; background: #FFFFFF; -webkit-box-shadow: inset -5px -5px #dedede; box-shadow: inset -5px -5px #dedede; } .legs .rfront { position: absolute; height: 20px; width: 40px; top: 180px; left: 70px; border-radius: 90px 90px 0 0; background: #FFFFFF; -webkit-box-shadow: inset -5px -5px #dedede; box-shadow: inset -5px -5px #dedede; } .legs .rback { z-index: -1; position: absolute; height: 20px; width: 40px; top: 180px; right: -10px; border-radius: 90px 90px 0 0; background: #FFFFFF; -webkit-box-shadow: inset -5px -5px #dedede; box-shadow: inset -5px -5px #dedede; } @-webkit-keyframes wag { 0% { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } 100% { -webkit-transform: rotate(-40deg); transform: rotate(-40deg); } } @keyframes wag { 0% { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } 100% { -webkit-transform: rotate(-40deg); transform: rotate(-40deg); } }
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号