帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 纯CSS皮卡丘注释全
纯CSS皮卡丘注释全
浏览:745次
-
评论:0次
-
发布时间:2017-03-27
Html
Css
Js
body { margin:0; } #view { width:500px; height:500px; margin:0px auto 0px auto; background:; position:relative; } /*头*/ #head { width:160px; height:175px; margin:auto; background:#ffe100; position:absolute; top:10%; left:35%; border-top-left-radius:45% 43%; border-top-right-radius:45% 43%; border-bottom-left-radius:50% 35%; border-bottom-right-radius:50% 35%; border:4px solid #000; border-bottom-color:#ffe100; } /*身体*/ #body { width:170px; height:185px; background:#ffe100; position:absolute; top:38%; left:34%; border-bottom-left-radius:45% 43%; border-bottom-right-radius:45% 43%; border-top-left-radius:30% 90%; border-top-right-radius:30% 90%; border:4px solid #000; } /*左耳朵*/ .ear_left { width:100px; height:100px; background-color:#ffe100; border-radius:100px 0px; border:4px solid #000; position:absolute; left:300px; } /*右耳朵*/ .ear_right { width:100px; height:100px; background-color:#ffe100; border-radius:0px 100px; border:4px solid #000; position:absolute; left:100px; } /*右耳朵黑色阴影*/ .ear_shading_right { width:38px; height:77px; background-color:#000; border-radius:14% 0% 100% 0%; position:absolute; left:370px; top:3px; } /*左耳朵黑色阴影*/ .ear_shading_left { width:38px; height:77px; background-color:#000; border-radius:0% 14% 0% 100%; position:absolute; left:100px; top:3px; } /*左脸蛋*/ .face_left { width:45px; height:45px; background-color:#ff2200; border-radius:50%; margin-top:100px; float:left; overflow:hidden; border:2px solid #000; } /*右脸蛋*/ .face_right { width:45px; height:45px; background-color:#ff2200; border-radius:50%; margin-top:100px; float:right; overflow:hidden; border:2px solid #000; } /*右眼睛*/ .eye_right { width:30px; height:30px; background-color:#000; border-radius:50%; position:absolute; left:20px; top:60px; overflow:hidden; } /*右眼白*/ .eye_shading_right { width:15px; height:15px; background-color:#fff; border-radius:50%; position:absolute; left:11px; } /*左眼睛*/ .eye_left { width:30px; height:30px; background-color:#000; border-radius:50%; position:absolute; left:110px; top:60px; overflow:hidden; } /*左眼白*/ .eye_shading_left { width:15px; height:15px; background-color:#fff; border-radius:50%; position:absolute; left:5px; } /*鼻子*/ .nose { width:15px; height:10px; background-color:#000; border-radius:50%; left:73px; top:88px; position:absolute; overflow:hidden; } /*嘴巴右*/ .mouth_right { width:35px; height:30px; background:#ffe100; position:absolute; top:67px; left:72px; border-radius:50%; border:3px solid #ffe100; border-bottom-color:#000; } /*嘴巴左*/ .mouth_left { width:35px; height:30px; background:#ffe100; position:absolute; top:67px; left:47px; border-radius:50%; border:3px solid #ffe100; border-bottom-color:#000; } /*舌头*/ .tongue { width:23px; height:3px; background:#ff2200; position:absolute; top:102px; left:66px; border-bottom-left-radius:40% 90%; border-bottom-right-radius:40% 90%; border:3px solid #000; border-top-color:#ffe100; -webkit-animation:tongue 1s ease-in-out infinite; animation:tongue 1s ease-in-out infinite; } /*左胳膊*/ .arm_left { width:50px; height:65px; background:#ffe100; position:absolute; top:50px; left:20px; border-bottom-left-radius:40% 90%; border-bottom-right-radius:40% 90%; border:4px solid #000; border-top-color:#ffe100; -webkit-transform:skew(16deg); transform:skew(16deg); } /*右胳膊*/ .arm_right { width:50px; height:65px; background:#ffe100; position:absolute; top:50px; left:95px; border-bottom-left-radius:40% 90%; border-bottom-right-radius:40% 90%; border:4px solid #000; border-top-color:#ffe100; -webkit-transform:skew(-16deg); transform:skew(-16deg); } /*左腿*/ .leg_left { position:absolute; width:47px; height:19px; border:4px solid #000; background:#ffe100; border-radius:80% 20% 80% 10%; top:356px; left:164px; } /*右腿*/ .leg_right { position:absolute; width:47px; height:19px; border:4px solid #000; background:#ffe100; border-radius:20% 80% 10% 80%; top:356px; left:293px; } /*尾巴上*/ .tail1 { width:127px; height:70px; -webkit-transform:skew(-20deg); transform:skew(-20deg); background:#ffe100; border:4px solid #000; position:absolute; top:100px; left:-8px; } /*尾巴中*/ .tail2 { width:66px; height:149px; -webkit-transform:skew(-20deg); transform:skew(-20deg); background:#ffe100; border:4px solid #000; position:absolute; top:134px; left:96px; } /*尾巴下*/ .tail3 { width:42px; height:87px; -webkit-transform:skew(-20deg); transform:skew(-20deg); background:#ffe100; border:4px solid #000; position:absolute; top:235px; left:140px; } /*尾巴阴影*/ .tail_shading { width:29px; height:183px; -webkit-transform:skew(16deg); transform:skew(16deg); background:#ffe100; position:absolute; top:113px; left:118px; } /*尾巴摇摆*/ .tail { -webkit-animation:tail 0.2s ease-in-out infinite; animation:tail 0.2s ease-in-out infinite; } /*吐舌头*/ @-webkit-keyframes tongue { 0% { height:3px; } 30% { width:20px; height:36px; } 100% { height:3px; } }/*吐舌头*/ @keyframes tongue { 0% { height:3px; } 30% { width:20px; height:36px; } 100% { height:3px; } }/*尾巴摇摆动画*/ @-webkit-keyframes tail { 0% { -webkit-transform-origin:250px 300px; -webkit-transform:rotateZ(0deg); } 60% { -webkit-transform-origin:250px 300px; -webkit-transform:rotateZ(10deg); } 100% { -webkit-transform-origin:250px 300px; -webkit-transform:rotateZ(0deg); } }/*尾巴摇摆动画*/ @keyframes tail { 0% { transform-origin:250px 300px; transform:rotateZ(0deg); } 60% { transform-origin:250px 300px; transform:rotateZ(10deg); } 100% { transform-origin:250px 300px; transform:rotateZ(0deg); } }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>纯CSS皮卡丘注释全-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:CSS+HTML制作的皮卡丘
使用css实现的皮卡丘
jQuery垂直手风琴下拉菜单
图片翻转效果
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
745
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值