[2D CSS] -- DIV + CSS3 を使用して Dabai を描画する (詳細な手順)_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

[2D CSS] -- DIV + CSS3 を使用して Dabai を描画する (詳細な手順)_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:17 AM

もともとダバイを描きたかったのですが、クラスメイト（github: https://github.com/shiyiwang）も同じ方法で描いているのをたまたま見かけました。そして、詳細はかなり整っています。そこで、フォークしてここで共有します。

同時に、より多くの生徒が想像力を働かせて何かを見つけてくれることを願っています。

私の以前の共有を読んでいるなら、ベイマックスの各部分がどのように実現されるかをすぐに考えることができるでしょう。

GitHub ポータル: https://github.com/lancer07/css3_Baymax

ステップ 1: 頭

<div class="baymax-head">  <div class="head-highlight"></div>  <div class="baymax-eyes"></div></div>

.baymax-head {  position: absolute;  left: 50%;  margin-left: -21px;  width: 42px;  height: 28px;  -webkit-border-radius: 50%;  -moz-border-radius: 50%;  -ms-border-radius: 50%;  border-radius: 50%;  -webkit-transform: rotate(5deg);  -moz-transform: rotate(5deg);  -ms-transform: rotate(5deg);  -o-transform: rotate(5deg);  transform: rotate(5deg);  z-index: 3;  overflow: hidden;  -webkit-box-shadow: 0 6px 8px -5px rgba(128, 128, 128, 0.75), inset 0 -6px 8px -5px rgba(204, 204, 204, 0.5);  -moz-box-shadow: 0 6px 8px -5px rgba(128, 128, 128, 0.75), inset 0 -6px 8px -5px rgba(204, 204, 204, 0.5);  box-shadow: 0 6px 8px -5px rgba(128, 128, 128, 0.75), inset 0 -6px 8px -5px rgba(204, 204, 204, 0.5);}.baymax-head .head-highlight {  position: absolute;  top: 12%;  right: 25%;  width: 45%;  height: 1%;  -webkit-border-radius: 50%;  -moz-border-radius: 50%;  -ms-border-radius: 50%;  border-radius: 50%;  background: #ffffff;  -webkit-box-shadow: 0 0 18px 9px #ffffff, 0 0 0 0 transparent;  -moz-box-shadow: 0 0 18px 9px #ffffff, 0 0 0 0 transparent;  box-shadow: 0 0 18px 9px #ffffff, 0 0 0 0 transparent;}.baymax-head .baymax-eyes {  position: relative;  top: 10px;  left: 50%;  -webkit-transform: translateX(-10px);  -moz-transform: translateX(-10px);  -ms-transform: translateX(-10px);  -o-transform: translateX(-10px);  transform: translateX(-10px);  height: 1px;  width: 20px;  background: #333333;}.baymax-head .baymax-eyes:before, .baymax-head .baymax-eyes:after {  top: -3px;  width: 6px;  height: 6px;  background: #333333;  -webkit-border-radius: 50%;  -moz-border-radius: 50%;  -ms-border-radius: 50%;  border-radius: 50%;}.baymax-head .baymax-eyes:before {  left: -2px;}.baymax-head .baymax-eyes:after {  right: -2px;}

ステップ 2: 体

<div class="baymax-body">  <div class="body-highlight"></div>  <div class="baymax-heart"></div></div>

.baymax-body {  position: absolute;  top: 18.66667px;  left: 50%;  -webkit-transform: translateX(-62px);  -moz-transform: translateX(-62px);  -ms-transform: translateX(-62px);  -o-transform: translateX(-62px);  transform: translateX(-62px);  width: 124px;  height: 180px;  -webkit-border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;  -moz-border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;  -ms-border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;  overflow: hidden;  z-index: 2;}.baymax-body .body-highlight {  position: absolute;  top: 20%;  right: 40%;  width: 0%;  height: 50%;  -webkit-border-radius: 50%;  -moz-border-radius: 50%;  -ms-border-radius: 50%;  border-radius: 50%;  background: #ffffff;  -webkit-box-shadow: 0 0 45px 25px #ffffff, 0 0 0 0 transparent;  -moz-box-shadow: 0 0 45px 25px #ffffff, 0 0 0 0 transparent;  box-shadow: 0 0 45px 25px #ffffff, 0 0 0 0 transparent;}.baymax-body .baymax-heart {  position: absolute;  top: 35px;  right: 30%;  height: 12px;  width: 12px;  -webkit-border-radius: 50%;  -moz-border-radius: 50%;  -ms-border-radius: 50%;  border-radius: 50%;}.baymax-body:before, .baymax-body:after {  top: 55px;  width: 15px;  height: 40px;}.baymax-body:before {  left: -8px;  -webkit-transform: rotate(15deg);  -moz-transform: rotate(15deg);  -ms-transform: rotate(15deg);  -o-transform: rotate(15deg);  transform: rotate(15deg);}.baymax-body:after {  right: -8px;  -webkit-transform: rotate(-15deg);  -moz-transform: rotate(-15deg);  -ms-transform: rotate(-15deg);  -o-transform: rotate(-15deg);  transform: rotate(-15deg);}

Step 3: 手

rree rree

ステップ 4: 脚

<div class="baymax-arm baymax-left-arm">   <div class="arm-highlight larm-highlight"></div></div><div class="baymax-arm baymax-right-arm">   <div class="arm-highlight rarm-highlight"></div></div>

.baymax-arm {  position: absolute;  top: 28px;  height: 145px;  width: 40px;  overflow: hidden;  z-index: 1;}.baymax-arm:after {  top: 60px;  height: 50px;  width: 25px;}.baymax-arm .arm-highlight {  position: absolute;  top: 25%;  width: 1%;  height: 65%;  -webkit-border-radius: 50%;  -moz-border-radius: 50%;  -ms-border-radius: 50%;  border-radius: 50%;  background: #ffffff;  -webkit-box-shadow: 0 0 16px 7px rgba(255, 255, 255, 0.8), 0 0 0 0 transparent;  -moz-box-shadow: 0 0 16px 7px rgba(255, 255, 255, 0.8), 0 0 0 0 transparent;  box-shadow: 0 0 16px 7px rgba(255, 255, 255, 0.8), 0 0 0 0 transparent;}.baymax-left-arm {  left: 65px;  -webkit-transform: rotate(25deg);  -moz-transform: rotate(25deg);  -ms-transform: rotate(25deg);  -o-transform: rotate(25deg);  transform: rotate(25deg);  -webkit-border-radius: 90px 20px 20px 90px/200px 40px 40px 200px;  -moz-border-radius: 90px 20px 20px 90px/200px 40px 40px 200px;  -ms-border-radius: 90px 20px 20px 90px/200px 40px 40px 200px;  border-radius: 90px 20px 20px 90px/200px 40px 40px 200px;}.baymax-left-arm:after {  left: -20px;}.baymax-left-arm .larm-highlight {  left: 30%;}.baymax-right-arm {  right: 65px;  -webkit-transform: rotate(-25deg);  -moz-transform: rotate(-25deg);  -ms-transform: rotate(-25deg);  -o-transform: rotate(-25deg);  transform: rotate(-25deg);  -webkit-border-radius: 20px 90px 90px 20px/40px 200px 200px 40px;  -moz-border-radius: 20px 90px 90px 20px/40px 200px 200px 40px;  -ms-border-radius: 20px 90px 90px 20px/40px 200px 200px 40px;  border-radius: 20px 90px 90px 20px/40px 200px 200px 40px;}.baymax-right-arm:after {  right: -20px;}.baymax-right-arm .rarm-highlight {  right: 30%;}

コメント大歓迎です

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。