时间:2015-08-24 来源:

使用CSS3画出一个叮当猫(超级可爱!) 【移动开发】

今天在网上看到一篇文章承接网站前端,一个童鞋写的CSS的一些内容,承接网站前端其中有一个我比较感兴趣,html切图报价就是使用CSS3画出一个叮当猫团队网页接活,效果比较可爱,团队网页接活大家有兴趣喜欢的可以试试哈,手机网页制作我在这里整理一下代码给大家网页切图制作,效果图也一并附上.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication4._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <link href="progress.css" rel="stylesheet" type="text/css" /> <title></title> </head> <body> <form id="form1" runat="server"> <div class="wrapper"> <!--叮当猫整体--> <div class="doraemon"> <!--头部--> <div class="head"> <!--眼睛--> <div class="eyes"> <div class="eye left"> <!--眼珠--> <div class="black bleft"> </div> </div> <div class="eye right"> <div class="black bright"> </div> </div> </div> <!--脸部--> <div class="face"> <!--白色脸底--> <div class="white"> </div> <!--鼻子--> <div class="nose"> <!--鼻子高光部分--> <div class="light"> </div> </div> <!--鼻子的竖线--> <div class="nose_line"> </div> <!--嘴巴--> <div class="mouth"> </div> <!--胡须--> <div class="whiskers"> <div class="whisker rTop r160"> </div> <div class="whisker rMiddle"> </div> <div class="whisker rBottom r20"> </div> <div class="whisker lTop r20"> </div> <div class="whisker lMiddle"> </div> <div class="whisker lBottom r160"> </div> </div> </div> </div> <!--脖子和铃铛--> <div class="choker"> <!--铃铛--> <div class="bell"> <div class="bell_line"> </div> <div class="bell_circle"> </div> <div class="bell_under"> </div> <div class="bell_light"> </div> </div> </div> <!--身体--> <div class="bodys"> <!--肚子--> <div class="body"> </div> <!--肚兜--> <div class="wraps"> </div> <!--口袋--> <div class="pocket"> </div> <!--遮住一半口袋,网页切图制作使其呈现半圆--> <div class="pocket_mask"> </div> </div> <!--右手--> <div class="hand_right"> <!--手臂--> <div class="arm"> </div> <!--手掌--> <div class="circle"> </div> <!--遮住手臂和身子交接处的线--> <div class="arm_rewrite"> </div> </div> <!--左手--> <div class="hand_left"> <div class="arm"> </div> <div class="circle"> </div> <div class="arm_rewrite"> </div> </div> <!--脚--> <div class="foot"> <div class="left"> </div> <div class="right"> </div> <!--双脚之间的缝隙--> <div class="foot_rewrite"> </div> </div> </div> </div> </form> </body> </html> css3文件代码:

.wrapper{ margin: 50px 0 0 500px; } .doraemon{ position: relative; } .doraemon .head { position:relative; width: 320px; height: 300px; border-radius: 150px; background: #07bbee; background: -webkit-radial-gradient(right top,#07bbee 20%,#000); background: -moz-radial-gradient(right top,#07bbee 20%,#000); background: -ms-radial-gradient(right top,#07bbee 20%,#000); border:2px solid #555; box-shadow:-5px 10px 15px rgba(0,0,0.45); } /*脸部*/ .doraemon .face { position: relative; /*让所有脸部元素可自由定位*/ z-index: 2; /*脸在头部背景上面*/ } /*白色脸底*/ .doraemon .face .white { width: 265px; /*设置宽高*/ height: 195px; border-radius: 150px; position: absolute; /*进行绝对定位*/ top: 75px; left: 25px; background: #fff; /*此放射渐变也是使脸的左下角暗一些,psd切图html看上去更真实*/ background: -webkit-radial-gradient(right top,#eee 80%,#444); background: -moz-radial-gradient(right top,#eee 80%,#444); background: –ms-radial-gradient(right top,#eee 80%,#444); } /*鼻子*/ .doraemon .face .nose{ width:30px; height:30px; border-radius:15px; background:#c93300; border:2px solid #000; position:absolute; top:110px; left:140px; z-index:3; /*鼻子在白色脸底下面*/ } /*鼻子上的高光*/ .doraemon .face .nose .light { width:10px; height:10px; border-radius: 5px; box-shadow: 19px 8px 5px #fff; /*通过阴影实现高光*/ } /*鼻子下的线*/ .doraemon .face .nose_line{ width:3px; height:100px; background:#333; position:absolute; top:143px; left:155px; z-index:3; } /*嘴巴*/ .doraemon .face .mouth{ width:220px; height:400px; /*通过底边框加上圆角模拟微笑嘴巴*/ border-bottom:3px solid #333; border-radius:120px; position:absolute; top:-160px; left:45px; } /*眼睛*/ .doraemon .eyes { position: relative; z-index: 3; /*眼睛在白色脸底下面*/ } /*眼睛共同的样式*/ .doraemon .eyes .eye{ width:72px; height:82px; background:#fff; border:2px solid #000; border-radius:35px 35px; position:absolute; top:40px; } /*眼珠*/ .doraemon .eyes .eye .black{ width:14px; height:14px; background:#000; border-radius:7px; position:absolute; top:40px; } .doraemon .eyes .left{ left:82px; } .doraemon .eyes .right { left: 156px; } .doraemon .eyes .eye .bleft { left: 50px; } .doraemon .eyes .eye .bright { left: 7px; } /*胡须背景网页切图制作,主要用于挡住嘴巴的一部分,网页切图制作不要显得太长*/ .doraemon .whiskers{ width:220px; height:80px; background:#fff; border-radius:15px; position:absolute; top:120px; left:45px; z-index:2; /*在鼻子和眼睛下面*/ } /*所有胡子的公用样式*/ .doraemon .whiskers .whisker { width: 60px; height: 2px; background: #333; position: absolute; z-index: 2; } /*右上胡子*/ .doraemon .whiskers .rTop { left: 165px; top: 25px; } /*右中胡子*/ .doraemon .whiskers .rMiddle { left: 167px; top: 45px; } /*右下胡子*/ .doraemon .whiskers .rBottom { left: 165px; top: 65px; } /*左上胡子*/ .doraemon .whiskers .lTop { left: 0; top: 25px; } /*左中胡子*/ .doraemon .whiskers .lMiddle { left: -2px; top: 45px; } /*左下胡子*/ .doraemon .whiskers .lBottom { left: 0; top: 65px; } /*胡子旋转角度*/ .doraemon .whiskers .r160 { -webkit-transform: rotate(160deg); -moz-transform: rotate(160deg); -ms-transform: rotate(160deg); -o-transform: rotate(160deg); transform: rotate(160deg); } .doraemon .whiskers .r20 { -webkit-transform: rotate(200deg); -moz-transform: rotate(200deg); -ms-transform: rotate(200deg); -o-transform: rotate(200deg); transform: rotate(200deg); } /*围脖*/ .doraemon .choker { width: 230px; height: 20px; background: #c40; /*线性渐变 让围巾看上去更自然*/ background: -webkit-gradient(linear,left bottom,to(#800400)); background: -moz-linear-gradient(center top,#800400); background: -ms-linear-gradient(center top,#800400); border: 2px solid #000; border-radius: 10px; position: relative; top: -40px; left: 45px; z-index: 4; } /*铃铛*/ .doraemon .choker .bell { width: 40px; height: 40px; _overflow: hidden; /*IE6 hack*/ border: 2px solid #000; border-radius: 50px; background: #f9f12a; background: -webkit-gradient(linear, left bottom,color-stop(0.5, to(#a9a100)); background: -moz-linear-gradient(top, #e9e11a 75%, #f9f12a,#a9a100); box-shadow: -5px 5px 10px rgba(0,0,right top,from(#07beea), #0073b3),#00b0e0),#07beea,#00b0e0 75%,#07beea,#00b0e0 75%, right top, from(#fff),#fff),#eee),#999),#444),#fff,#eee 83%,#444 95%,#fff,#eee 83%,#444 95%, right top, from(#fff),#fff),#f8f8f8),#eee),#ddd), #fff,#f8f8f8 75%,#ddd 88%, #fff,#f8f8f8 75%,#ddd 88%, .doraemon .hand_left { height: 100px; width: 100px; position: absolute; top: 272px; left: 248px; } /*左手*/ .doraemon .hand_left { left: -10px; } /*手臂公共部分*/ .doraemon .arm { width:80px; height:50px; background: #07beea; background: -webkit-gradient(linear, left bottom,color-stop(0.85, to(#555)); background: -moz-linear-gradient(center top, #07BEEA 85%, #07BEEA, #555); border: 1px solid #000000; box-shadow: -10px 7px 10px rgba(0, 0, 0.35); z-index: -1; position: relative; } /*右手手臂*/ .doraemon .hand_right .arm { top: 17px; -webkit-transform: rotate(35deg); -moz-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); transform: rotate(35deg); } /*左手手臂*/ .doraemon .hand_left .arm { top: 17px; background: #0096be; /*背光一面使用纯色,页面div重构使其有立体感*/ box-shadow: 5px -7px 10px rgba(0, 0, right top, from(#fff),#fff),#eee),#ddd), #fff, #eee 70%,#999); background: -ms-linear-gradient(right top, #fff 50%, #ddd 80%,#999); position: absolute; } /*右手手掌*/ .doraemon .hand_right .circle { left: 40px; top: 32px; } /*左手手掌*/ .doraemon .hand_left .circle { left: -20px; top: 32px; } /*手臂和身体结合处,div切图排版使用背景遮住边框*/ .doraemon .arm_rewrite { height: 45px; width: 5px; background: #07beea; position: relative; } /*右手结合处*/ .doraemon .hand_right .arm_rewrite { top: -45px; left: 22px; } /*左手结合处*/ .doraemon .hand_left .arm_rewrite { top: -45px; left: 60px; background: #0096be; /*同理网页切图制作,背光一面使用纯色,网页切图制作使其有立体感*/ } /*脚部*/ .doraemon .foot { width: 280px; height: 40px; position: relative; top: 55px; left: 20px; } /*左右脚共同样式*/ .doraemon .foot .left, right top, from(#fff),#fff),#eee), #fff, #eee 85%, #fff, #eee 85%, 0, 0.35); position: relative; } .doraemon .foot .left { left: 8px; top: 65px; } .doraemon .foot .right { top: 31px; left: 141px; } /*双脚之间的缝隙div+css+js切图, right top, from(#666),#fff), #666, #fff); background: -ms-linear-gradient(right top, #fff 83%, #fff); /*制作半圆效果*/ border: 2px solid #000; border-bottom: none; border-radius: 40px 40px 0 0; position: relative; top: -11px; left: 130px; _left: 127px; } /*眼珠*/ .doraemon .eyes .eye .black { width: 14px; height: 14px; background: #000; border-radius: 7px; position: absolute; top: 40px; -webkit-animation: eyemove 3s linear infinite; -moz-animation: eyemove 3s linear infinite; -ms-animation: eyemove 3s linear infinite; -o-animation: eyemove 3s linear infinite; animation: eyemove 3s linear infinite; } /*让眼睛动起来*/ @-webkit-keyframes eyemove { 70%{ margin:0 0 0 0; } 80% { margin: -22px 0 0 0; } 85% { margin: -22px 0 0 5px; } 90% { margin: -22px 10px 0 0; } 93% { margin: -22px 0 0 0; } 96% { margin: 0 0 0 0; } } @-moz-keyframes eyemove { 70% { margin: 0 0 0 0; } 80% { margin: -22px 0 0 0; } 85% { margin: -22px 0 0 5px; } 90% { margin: -22px 10px 0 0; } 93% { margin: -22px 0 0 0; } 96% { margin: 0 0 0 0; } } @-o-keyframes eyemove { 70% { margin: 0 0 0 0; } 80% { margin: -22px 0 0 0; } 85% { margin: -22px 0 0 5px; } 90% { margin: -22px 10px 0 0; } 93% { margin: -22px 0 0 0; } 96% { margin: 0 0 0 0; } } @keyframes eyemove { 70% { margin: 0 0 0 0; } 80% { margin: -22px 0 0 0; } 85% { margin: -22px 0 0 5px; } 90% { margin: -22px 10px 0 0; } 93% { margin: -22px 0 0 0; } 96% { margin: 0 0 0 0; } }

版权声明:本文为博主原创文章,页面div重构未经博主允许不得转载.

html文件代码:

点击次数:23006
作者:
web前端行业资讯
Web new NewsList
英特尔宣布与法拉利跨界合作欲将AI技术用于赛车运动 ,,2018年01月11日甲骨文服务器出漏洞:攻击者用漏洞挖矿获取加密货币 ,,2018年01月11日用深度学习设计图像视频压缩算法:更简洁、更强大 ,,2018年01月11日Ubuntu内核和NVIDIA更新:修复Meltdown和Spectre两处漏洞 ,,2018年01月11日AntDesign3.1.1发布,阿里企业级UI设计语言 ,,2018年01月11日微信「跳一跳」带火小游戏,开发者如何快速上手? ,,2018年01月11日谷歌公布最新安卓系统份额:你用上奥利奥了么? ,,2018年01月11日腾讯开发出“3D音效”算法:普通耳机实现3D实时语音效果 ,,2018年01月11日谷歌工程师点赞中国程序员实现Node.js启动超4倍提速 ,,2018年01月11日三星电子总裁兼CE部门负责人金炫奭:万物互联时代到来 ,,2018年01月11日NVIDIA和大众合作建立智能驾驶助手 ,,2018年01月11日GIMPS项目报告发现已知最大素数 ,,2018年01月11日微软与生物技术公司开展AI驱动的血液检测同时诊断数十种疾病 ,,2018年01月11日微软跨平台移动开发工具套件HockeyApp宣布免费 ,,2018年01月11日《硅谷》里神乎其神的压缩技术,AI正在一点点做出来 ,,2018年01月11日LinuxMint19代号敲定为“Tara”预计2018年5月至6月期间发布 ,,2018年01月11日Facebook发布wav2letter工具包,用于端到端自动语音识别 ,,2018年01月11日开源数据库ArangoDB正进行约1156万美元股权融资 ,,2018年01月11日IntelCPU漏洞闹大:腾讯云紧急升级 ,,2018年01月11日2018年1月全球数据库排名:Redis夺回第八 ,,2018年01月11日Lyft将联手无人驾驶公司于CES上展示无人驾驶汽车 ,,2018年01月11日京东X无人超市首家社会门店开业:刷脸进、微信自动结算 ,,2018年01月11日担心被AI取代是杞人忧天?高晓松跨年演讲说的有几分对 ,,2018年01月11日免费授权技术许可Intel宣布在未来CPU中集成雷电3 ,,2018年01月11日算法决定你在社交媒体上看到的信息 ,,2018年01月11日谷歌安全博客披露“英特尔内核漏洞”更多细节 ,,2018年01月04日Postgres10开发者新特性 ,,2017年12月28日阿里巴巴、狗尾草、苏大联合论文:基于对抗学习的众包标注用于中文命名实体识别 ,,2017年12月28日柯洁的2017:20岁,与AI斗与人类斗,其乐无穷 ,,2017年12月28日如果机器人拥有痛觉,这个世界会有哪些不一样? ,,2017年12月28日vs2013编译的程序在其他机器上运行的环境设置【移动开发】2015年02月11日myeclipse新建项目部署到tomcat中,点击finish键没反应 【系统运维】2015年08月30日巧用Logcat把日志记录到文件【架构设计】2015年02月28日php静态方法及静态属性的使用及定义2014年01月28日现代“迪林杰黑帮”——银行大盗的四个攻击方向【移动开发】2014年11月08日《高性能MySQL》读书笔记--MySQL逻辑架构 【综合】2015年05月07日HDU1428漫步校园(BFS+记忆化搜索) 【移动开发】2015年04月27日《程序员面试金典》像素翻转 【编程语言】2015年09月16日SpringToolSuite字体大小和颜色设置2015年04月13日iisapp.vbsiispid了解对应的网站或应用池2014年01月29日Login,cookie,session等概念理解【移动开发】2015年01月09日Linux在C语言下的时区设置与修改(三)【编程语言】2015年02月15日几张图看懂列式存储【互联网】2014年11月17日WPS表格三步从身份证号提取出生日期2014年01月28日android三级菜单BaseExpandableListAdapter 【架构设计】2015年07月02日【参与翻译】Spring4.x框架参考文档 【架构设计】2015年01月04日Android实现静默安装与卸载【编程语言】2014年11月08日使用PowerDesigner将Oracle中的表结构转为物理数据模型【移动开发】2015年06月17日2011年最受欢迎的五款Web开发工具 1,收藏 ,,2016年06月23日JS的基础类型与引用类型 【架构设计】2015年07月21日工厂方法模式(FactoryMethod)——创建型模式【移动开发】2015年06月02日黑马程序员--Java基础--IO基本操作 【综合】2015年07月21日AnsiString和String的区别、使用【综合】2015年08月29日年终总结,--走向社会的转变,我拿什么来盛放你—我的思绪,我的未来!【Web前端】2015年08月29日ios加急审核【移动开发】2015年05月18日IOS---UITableViewCell自适应行高(非AutoLayout) 【移动开发】2015年04月24日Twitter将其使用的MySQL开源 ,,2016年07月24日第三届沈阳航空航天大学校赛(大连海事大学赛)---I:Spoors(预处理)【互联网】2014年12月11日Android服务端开发1-使用Eclipse搭建JavaWeb服务端 【编程语言】2015年05月11日什么时候用堆,什么时候用栈?【互联网】2015年01月21日
我们保证
We guarantee
> psd效果文件手工切图,保证图片效果最好体积最小利于传输
> 100%手写的HTML(DIV+CSS)编码,绝对符合W3C标准
> 代码精简、css沉余量小、搜索引擎扫描迅速,网页打开快捷
> 应用Css Sprite能够减少HTTP请求数,提高网页性能
> 跨浏览器兼容(IE6、7、8、9,Firefox火狐,Chrome谷歌)