CSS畫出一個(gè)可愛神奇的多啦A夢(mèng)
發(fā)布時(shí)間：2016-07-05 15:23:50 作者：佚名 
我要評(píng)論
我要評(píng)論想不想擁有可愛的多啦A夢(mèng)，這篇文章主要教大家使用CSS畫出一個(gè)可愛神奇的多啦A夢(mèng),感興趣的小伙伴們可以參考一下
小叮當(dāng)簡(jiǎn)單顏色單一，操作起來也很容易上手。接下來的一個(gè)實(shí)例就是用css畫出一個(gè)多啦A夢(mèng)，首先將其分為頭部，和身體。然后，再根據(jù)身體各部分細(xì)節(jié)進(jìn)行進(jìn)一步的具體刻畫。
由于最近一直在學(xué)習(xí)JavaWeb方面的東西，所以，我的這個(gè)小叮當(dāng)就是用jsp頁面進(jìn)行映襯。
代碼如下：首先是寫jsp頁面，將其分成多個(gè)塊，然后再分塊操作：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
- <%
- String path = request.getContextPath();
- String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
- %>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <base href="<%=basePath%>">
- <link rel="stylesheet" type="text/css" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
- <link rel="stylesheet" type="text/css" href="css/DLAM.css">
- <title>here</title>
- <meta http-equiv="pragma" content="no-cache">
- <meta http-equiv="cache-control" content="no-cache">
- <meta http-equiv="expires" content="0">
- <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
- <meta http-equiv="description" content="This is my page">
- <!--
- <link rel="stylesheet" type="text/css" href="styles.css">
- -->
- </head>
- <body>
- <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 rt"></div>
- <div class="whisker rBottom r20"></div>
- <div class="whisker lTop r20"></div>
- <div class="whisker lt"></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>
- </body>
- </html>
再接下來就是每一個(gè)div的細(xì)致描寫刻畫：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- @CHARSET "UTF-8";
- .CC{
- font-size:100px;
- font-weight:600;
- font-family:"華文楷體";
- text-align: center;
- }
- .doraemon{
- position:relative;
- margin-top:5px;
- margin-left:530px;
- }
- .doraemon .head{
- width:320px;
- height:300px;
- border-radius:150px;
- background:#07bbee;
- background:-webkit-radial-gradient(right top,#fff 10%, #07bbee 20%,#10a6ce 75%,#000);
- background:-moz-radial-gradient(right top,#fff 10%, #07bbee 20%,#10a6ce 75%,#000);
- background:-ms-radial-gradient(right top,#fff 10%, #07bbee 20%,#10a6ce 75%,#000);
- border:#555 2px solid;
- box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
- position:relative;
- }
- .doraemon .face{
- position:relative;
- z-index:2;
- }
- .doraemon .face .white{
- border:#000 2px solid;
- width:265px;
- height:195px;
- border-radius:150px 150px;
- position:absolute;
- top:75px;left:25px;
- background:#fff;
- background:-webkit-radial-gradient(right top,#fff 75%, #eee 75%,#eee 80%,#999 90%,#444);
- background:-moz-radial-gradient(right top,#fff 75%, #eee 75%,#eee 80%,#999 90%,#444);
- background:-ms-radial-gradient(right top,#fff 10%, #eee 75%,#eee 80%,#999 90%,#444);
- }
- .doraemon .face .nose{
- border: 2px solid #000;
- width:30px;
- height:30px;
- border-radius:30px;
- position:absolute;
- background:#c93300;
- top:110px;left:140px;
- z-index:3;
- }
- .doraemon .face .nose .light{
- border-radius:5px;
- box-shadow:19px 8px 5px #FFF;
- width:10px;
- height:10px;
- }
- .doraemon .face .nose_line{
- background:#333;
- width:3px;
- height:100px;
- top:140px;left:155px;
- position:absolute;
- z-index:3;
- }
- .doraemon .face .mouth{
- width:220px;
- height:400px;
- border-radius:120px;
- border-bottom:3px solid #333;
- position:absolute;
- top:-160px;left:45px;
- }
- .doraemon .eyes{
- position:relative;
- z-index:3;
- }
- .doraemon .eyes .eye{
- width:72px;
- height:82px;
- position:absolute;
- top:40px;
- background:#fff;
- border: 2px solid #000;
- border-radius:35px 35px;
- }
- .doraemon .eyes .eye .black{
- width:14px;
- height:14px;
- background:#000;
- border-radius:14px;
- position:relative;
- 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;
- position:relative;
- border-radius:15px;
- top:120px;left:45px;
- z-index:2;
- }
- .doraemon .whiskers .whisker{
- background:#333;
- width:60px;
- height:2px;
- position:absolute;
- z-index:2;
- }
- .doraemon .whiskers .rTop{
- top:25px;left:165px;
- }
- .doraemon .whiskers .rt{
- top:45px;left:167px;
- }
- .doraemon .whiskers .rBottom{
- top:65px;left:165px;
- }
- .doraemon .whiskers .lTop{
- top:25px;left:0px;
- }
- .doraemon .whiskers .lt{
- top:45px;left:-2px;
- }
- .doraemon .whiskers .lBottom{
- top:65px;left:0px;
- }
- .doraemon .whiskers .r160{
- transform:rotate(160deg);
- -webkit-transform:rotate(160deg);
- }
- .doraemon .whiskers .r20{
- transform:rotate(20deg);
- -webkit-transform:rotate(20deg);
- }
- .doraemon .choker{
- position:relative;
- z-index:4;
- top:-40px;left:45px;
- background:#c40;
- background:-webkit-gradient(linear,left top,left bottom,from(#c40),to(#800400));
- background:-moz-linear-gradient(center top,#c40,#800400);
- background:-ms-linear-gradient(center top,#c40,#800400);
- border: 2px solid #000000;
- border-radius:10px 10px 10px 10px;
- width:230px;
- height:20px;
- }
- .doraemon .choker .bell{
- width:40px;
- height:40px;
- _overflow:hidden;
- border-radius:50px;
- border: 2px solid #000;
- background:#f9f12a;
- background:-webkit-gradient(linear,left top,left bottom,from(#f9f12a),color-stop(0.5,#e9e11a),to(#a9a100));
- background:-moz-linear-gradient(top,#f9f12a,#e9e11a 75%,#a9a100);
- background:-ms-linear-gradient(top,#f9f12a,#e9e11a 75%,#a9a100);
- box-shadow:-5px 5px 10px rgba(0,0,0,0.25);
- position:relative;
- top:5px;left:90px;
- }
- .doraemon .choker .bell_line{
- background:#c40;
- border-radius:3px 3px 0px 0px;
- border:2px solid #333333;
- height:2px;width:36px;
- position:relative;
- top:10px;
- }
- .doraemon .choker .bell_circle{
- background:#000;
- border-radius:5px;
- height:10px;width:12px;
- position:relative;
- top:10px;
- left:13px;
- }
- .doraemon .choker .bell_circle{
- background:#000;
- border-radius:5px;
- height:10px;width:12px;
- position:relative;
- top:10px;
- left:13px;
- }
- .doraemon .choker .bell_under{
- background:#000;
- height:15px;width:3px;
- top:10px;
- left:18px;
- position:relative;
- }
- .doraemon .choker .bell_light{
- border-radius:10px;
- box-shadow:19px 8px 5px #fff;
- height:11px;width:11px;
- position:relative;
- top:-34px;
- left:4px;
- opacity:0.7;
- }
- .doraemon .bodys{
- position:relative;
- top:-310px;
- }
- .doraemon .bodys .body{
- background:#07beea;
- background:-webkit-gradient(linear,right top,left top,from(#07beea),color-stop(0.5,#0073b3),color-stop(0.75,#00b0e0),to(#0096be));
- background:-moz-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
- background:-ms-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
- border: 2px solid #333;
- height:165px;width:220px;
- position:absolute;
- top:265px;
- left:50px;
- }
- .doraemon .bodys .wraps{
- background:#fff;
- background:-webkit-gradient(linear,right top,left bottom,from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444),to(#000));
- background:-moz-linear-gradient(right top,#fff,#fff 50%,#eee 75%,#eee 83%,#999 90%,#444 95%,#000);
- background:-ms-linear-gradient(right top,#fff,#fff 50%,#eee 75%,#eee 83%,#999 90%,#444 95%,#000);
- border: 2px solid #000;
- border-radius:85px;
- position:absolute;
- height:170px;width:170px;
- top:230px;
- left:72px;
- }
- .doraemon .bodys .pocket{
- position:relative;
- height:130px;width:130px;
- border-radius:65px;
- background:#fff;
- background:-webkit-gradient(linear,right top,left bottom,from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd),to(#fff));
- background:-moz-linear-gradient(right top,#fff,#fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%,#fff);
- background:-ms-linear-gradient(right top,#fff,#fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%,#fff);
- border: 2px solid #000;
- top:250px;
- left:92px;
- }
- .doraemon .bodys .pocket_mask{
- position:relative;
- height:60px;width:134px;
- background:#fff;
- border-bottom:2px solid #000;
- top:125px;
- left:92px;
- }
- .doraemon .hand_right{
- height:100px;width:100px;
- position:absolute;
- top:272px;
- left:248px;
- }
- .doraemon .hand_left{
- height:100px;width:100px;
- position:absolute;
- top:272px;
- left:-10px;
- }
- .doraemon .arm{
- background:#07beea;
- background:-webkit-gradient(linear,left top,left bottom,from(#07beea),color-stop(0.85,#07beea),to(#555));
- background:-moz-linear-gradient(center top,#07beea,#07beea 85%,#555);
- background:-ms-linear-gradient(center top,#07beea,#07beea 85%,#555);
- border: 1px solid #000000;
- position:relative;
- height:50px;width:80px;
- box-shadow:-10px 7px 10px rgba(0,0,0,0.35);
- z-index:-1;
- }
- .doraemon .hand_right .arm{
- top:17px;
- transform:rotate(35deg);
- -webkit-transform:rotate(35deg);
- }
- .doraemon .hand_left .arm{
- top:17px;
- background:#0096be;
- box-shadow:5px -7px 10px rgba(0,0,0,0.25);
- transform:rotate(145deg);
- -webkit-transform:rotate(145deg);
- }
- .doraemon .circle{
- background:#fff;
- background:-webkit-gradient(linear,right top,left bottom,from(#fff),color-stop(0.5,#fff),color-stop(0.7,#eee),color-stop(0.8,#ddd),to(#999));
- background:-moz-linear-gradient(right top,#fff,#fff 50%,#eee 70%,#ddd 80%,#999);
- position:absolute;
- height:60px;width:60px;
- border: 2px solid #000;
- border-radius:30px;
- }
- .doraemon .hand_right .circle{
- left:40px;
- top:32px;
- }
- .doraemon .hand_left .circle{
- left:-20px;
- top:32px;
- }
- .doraemon .arm_rewrite{
- background:#07beea;
- position:relative;
- height:45px;width:5px;
- }
- .doraemon .hand_right .arm_rewrite{
- left:20px;
- top:-45px;
- }
- .doraemon .hand_left .arm_rewrite{
- left:60px;
- top:-45px;
- background:#0096be;
- }
- .doraemon .foot{
- height:40px;
- left:20px;
- position:relative;
- top:-141px;
- width:280px;
- }
- .doraemon .foot .left{
- background:#fff;
- background:-webkit-gradient(linear,right top,left bottom,from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee),to(#999));
- background:-moz-linear-gradient(right top,#fff,#fff 75%,#eee 85%,#999);
- background:-ms-linear-gradient(right top,#fff,#fff 75%,#eee 85%,#999);
- border: 2px solid #333;
- border-radius:80px 60px 60px 40px;
- box-shadow:-6px 0 10px rgba(0,0,0,0.35);
- height:30px;
- left:14px;
- position:relative;
- top:69px;
- width:125px;
- }
- .doraemon .foot .right{
- background:#fff;
- background:-webkit-gradient(linear,right top,left bottom,from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee),to(#999));
- background:-moz-linear-gradient(right top,#fff,#fff 75%,#eee 85%,#999);
- background:-ms-linear-gradient(right top,#fff,#fff 75%,#eee 85%,#999);
- border: 2px solid #333;
- border-radius:80px 60px 60px 40px;
- box-shadow:-6px 0 10px rgba(0,0,0,0.35);
- height:30px;
- left:141px;
- position:relative;
- top:39px;
- width:125px;
- }
- .doraemon .foot .foot_rewrite{
- position:relative;
- top:0px;
- left:132px;
- _left:127px;
- width:20px;
- height:11px;
- background:#fff;
- background:-webkit-gradient(linear,right top,left bottom,from(#666),color-stop(0.83,#fff),to(#fff));
- background:-moz-linear-gradient(right top,#666,#fff 83%,#fff);
- background:-ms-linear-gradient(right top,#666,#fff 83%,#fff);
- border-top:2px solid #000;
- border-right:2px solid #000;
- border-left:2px solid #000;
- border-top-right-radius:40px;
- border-top-left-radius:40px;
- }
這個(gè)是整體的描繪，接下來，我來根據(jù)自己的理解更加深刻地理解每一個(gè)特效的來源。
background:-webkit-radial-gradien ：這個(gè)屬性是講顏色的漸變，比如哆啦A夢(mèng)的藍(lán)色，從右上再到左下，顏色逐漸加深，線性漸變；
線性漸變實(shí)例：
border-radius：轉(zhuǎn)換為圓角；
z-index：指定該元素的層疊順序，比如說圖片，若z-index為-1，覆蓋在圖片上面的字就會(huì)顯示出來。
rgba(0,0,0,0.45)：表示透明度的；
—overflow:設(shè)置當(dāng)元素的內(nèi)容溢出其區(qū)域時(shí)發(fā)生的事情,hidden,隱藏。
transform:轉(zhuǎn)換和旋轉(zhuǎn)；
這里還有一個(gè)動(dòng)畫效果，目的是讓小叮當(dāng)?shù)难劬?dòng)起來~
CSS Code復(fù)制內(nèi)容到剪貼板
- <style type="text/css">
- @-webkit-keyframes eyemove{
- 80%{margin:0; }
- 85%{margin:-20px 0 0 0;}
- 90%{margin:0 0 0 0;}
- 93%{margin:0 0 0 7px;}
- 96%{margin:0 0 0 0;}
- }
- @-webkit-keyframes eyemove{
- 80%{margin:0; }
- 85%{margin:-20px 0 0 0;}
- 90%{margin:0 0 0 0;}
- 93%{margin:0 0 0 7px;}
- 96%{margin:0 0 0 0;}
- }
- @-webkit-keyframes eyemove{
- 80%{margin:0; }
- 85%{margin:-20px 0 0 0;}
- 90%{margin:0 0 0 0;}
- 93%{margin:0 0 0 7px;}
- 96%{margin:0 0 0 0;}
- }
- .doraemon .eyes .eye .black{
- -webkit-animation-name:eyemove;
- -webkit-animation-duration: 5s;
- -webkit-animation-timing-function:linear;
- -webkit-animation-iteration-count: 20000;
- -webkit-animation-name:eyemove;
- -webkit-animation-duration: 5s;
- -webkit-animation-timing-function:linear;
- -webkit-animation-iteration-count: 20000;
- -webkit-animation-name:eyemove;
- -webkit-animation-duration: 5s;
- -webkit-animation-timing-function:linear;
- -webkit-animation-iteration-count: 20000;
- }
- </style>
最后再來看一看哆啦A夢(mèng)的最終效果圖。
相關(guān)文章
純CSS3實(shí)現(xiàn)帶動(dòng)畫效果導(dǎo)航菜單無需js
html5+css3的出現(xiàn)給前端開發(fā)者提供了更多的可能性，以前很多只能通過JS實(shí)現(xiàn)的效果用純粹的css3就能實(shí)現(xiàn)了，下面有個(gè)不錯(cuò)的示例，大家可以學(xué)習(xí)下2013-09-27- 畫圓想必在很多的文章中都有介紹過，在本文將為大家介紹下如何使用Css+Div畫圓，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-09-18
- 下面的代碼將演示三角形如何產(chǎn)生的以及等邊三角形畫法，喜歡css的朋友可以參考下，希望對(duì)大家學(xué)習(xí)css有所幫助2013-09-08
發(fā)現(xiàn)兩個(gè)有趣的CSS3動(dòng)畫效果
CSS3畫機(jī)器貓及純css3動(dòng)畫，都是很不錯(cuò)的效果，感興趣的朋友可以研究研究哦，預(yù)覽時(shí)請(qǐng)?jiān)谥С諧SS3（HTML5）的瀏覽器下2013-08-14
css3動(dòng)畫事件—webkitAnimationEnd與計(jì)時(shí)器time事件
用css3的animation完成一個(gè)動(dòng)畫，當(dāng)只有這個(gè)動(dòng)畫完成時(shí)才執(zhí)行令一個(gè)事件，比如讓動(dòng)畫保持在終止的狀態(tài)或其他一些事件,關(guān)于這個(gè)問題，本文給出詳細(xì)的解決方案，感興趣的朋友
2013-01-31 純CSS3編寫的的精美動(dòng)畫進(jìn)度條(無flash/無圖像/無腳本/附源碼)
加載動(dòng)畫和進(jìn)度條的真正目的是讓用戶了解任務(wù)的進(jìn)度，有很多的基于JavaScript的動(dòng)畫，但我決定切換到CSS3,使用純CSS：沒有flash，沒有圖像，沒有腳本
2013-01-07 如何使用html5與css3完成google涂鴉動(dòng)畫
今天我們將介紹，如何使用css3完成google涂鴉動(dòng)畫。當(dāng)你點(diǎn)擊demo頁面的【開始】按鈕之后，頁面中的騎手和馬匹將會(huì)運(yùn)動(dòng)起來,需要的朋友可以了解下
2012-12-16 超棒的跨瀏覽器純CSS動(dòng)畫實(shí)現(xiàn) Animate.css使用方法
在今天的這篇文章中，我們將介紹一個(gè)超棒的CSS動(dòng)畫實(shí)現(xiàn)方式 - Animate.css。這套CSS動(dòng)畫是由來自Manchester， UK的設(shè)計(jì)師Dan Eden開發(fā)和設(shè)計(jì)的。使用它能夠很方便的給你的
2012-10-03
隨著CSS3的出現(xiàn)以及越來越多的瀏覽器對(duì)它的支持，設(shè)計(jì)人員和開發(fā)人員有了更多的選擇，CSS3提供了很多的設(shè)計(jì)上的新技術(shù)和高級(jí)功能，使創(chuàng)建網(wǎng)站變得更容易，用純CSS也可以實(shí)
2012-10-03