注：この記事は研究室講座【Web版「ババイ」を作る】から転載したものです、転載する場合は出典を明記してください〜
のシーンを思い出してください。 「スーパーマリーンズ」「温かい男」「ダバイ」？本当に持ちたいですか？ HTMLとCSSを使って自分だけの「ダバイ」を作ろう！
最終結果はこんな感じです、可愛いですね...
追伸: 慣れた方が良いですHTMLとCSSはある程度理解できたけど、初心者でも大丈夫！「ダバイ」なら初心者でも大丈夫！
PS: この「Dabai」のチュートリアルの手順は研究室の環境に基づいています。オンラインでコースを視聴するために研究室の建物に行くこともできます~
名前を Baymax.html にします (他の名前も使用できます)ただし、サフィックスは .html である必要があります):
gedit で開き、コードを編集する準備をします:
2. HTML を記述します
<!doctype html><html> <head><meta charset="utf-8"><title>Baymax</title></head><body> <div id="baymax"> <!-- 定义头部，包括两个眼睛、嘴 --> <div id="head"> <div id="eye"></div> <div id="eye2"></div> <div id="mouth"></div> </div> <!-- 定义躯干，包括心脏 --> <div id="torso"> <div id="heart"></div> </div> <!-- 定义肚子腹部，包括 cover（和躯干的连接处） --> <div id="belly"> <div id="cover"></div> </div> <!-- 定义左臂，包括一大一小两个手指 --> <div id="left-arm"> <div id="l-bigfinger"></div> <div id="l-smallfinger"></div> </div> <!-- 定义右臂，同样包括一大一小两个手指 --> <div id="right-arm"> <div id="r-bigfinger"></div> <div id="r-smallfinger"></div> </div> <!-- 定义左腿 --> <div id="left-leg"></div> <!-- 定义右腿 --> <div id="right-leg"></div> </div></body><html>
「ダバイ」は白色なので、識別しやすいように背景を濃い色にしています。
次に最初に頭:
body { background: #595959;}#baymax{ /*设置为 居中*/ margin: 0 auto; /*高度*/ height: 600px; /*隐藏溢出*/ overflow: hidden;}#head{ height: 64px; width: 100px; /*以百分比定义圆角的形状*/ border-radius: 50%; /*背景*/ background: #fff; margin: 0 auto; margin-bottom: -20px; /*设置下边框的样式*/ border-bottom: 5px solid #e0e0e0; /*属性设置元素的堆叠顺序； 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/ z-index: 100; /*生成相对定位的元素*/ position: relative;}エフェクトのプレビュー:
急いで目と口を追加してください!
#eye,#eye2{ width: 11px; height: 13px; background: #282828; border-radius: 50%; position: relative; top: 30px; left: 27px; /*旋转该元素*/ transform: rotate(8deg);}#eye2{ /*使其旋转对称*/ transform: rotate(-8deg); left: 69px; top: 17px;}#mouth{ width: 38px; height: 1.5px; background: #282828; position: relative; left: 34px; top: 10px;}ミニ「ダバイ」、プロトタイプが現れ始めています:
次は胴体と腹部です:
#torso,#belly{ margin: 0 auto; height: 200px; width: 180px; background: #fff; border-radius: 47%; /*设置边框*/ border: 5px solid #e0e0e0; border-top: none; z-index: 1;}#belly{ height: 300px; width: 245px; margin-top: -140px; z-index: 5;}#cover{ width: 190px; background: #fff; height: 150px; margin: 0 auto; position: relative; top: -20px; border-radius: 50%;}『ベイマックス』に生命の象徴を与える心臓:
#heart{ width:25px; height:25px; border-radius:50%; position:relative; /*向边框四周添加阴影效果*/ box-shadow:2px 5px 2px #ccc inset; right:-115px; top:40px; z-index:111; border:1px solid #ccc;}現在の『ベイマックス』はこんな感じです
まだ手も足も付いていません、とても可愛いですそして愛らしい... 「ベイマックス」には暖かさが必要です 腕:
#left-arm,#right-arm{ height: 270px; width: 120px; border-radius: 50%; background: #fff; margin: 0 auto; position: relative; top: -350px; left: -100px; transform: rotate(20deg); z-index: -1;}#right-arm{ transform: rotate(-20deg); left: 100px; top: -620px;}指はまだありません:
#l-bigfinger,#r-bigfinger{ height: 50px; width: 20px; border-radius: 50%; background: #fff; position: relative; top: 250px; left: 50px; transform: rotate(-50deg);}#r-bigfinger{ left: 50px; transform: rotate(50deg);}#l-smallfinger,#r-smallfinger{ height: 35px; width: 15px; border-radius: 50%; background: #fff; position: relative; top: 195px; left: 66px; transform: rotate(-40deg);}#r-smallfinger{ background: #fff; transform: rotate(40deg); top: 195px; left: 37px;}ですちょっと興味深い:
「Dabai」に脚を追加するのが待ちきれません:
#left-leg,#right-leg{ height: 170px; width: 90px; border-radius: 40% 30% 10px 45%; background: #fff; position: relative; top: -640px; left: -45px; transform: rotate(-1deg); z-index: -2; margin: 0 auto;}#right-leg{ background: #fff; border-radius:30% 40% 45% 10px; margin: 0 auto; top: -810px; left: 50px; transform: rotate(1deg);}duang~ duang~ duang~ スタントが完了しました!
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
