Heim > Artikel > Web-Frontend > Ein animiertes Bild eines lächelnden Kätzchengesichts, realisiert in HTML
Ein animiertes Bild eines lächelnden Kätzchengesichts, realisiert in HTML
- 零下一度Original
- 2017-06-24 13:09:054434Durchsuche
Katzenbehälter
-
Jedes Mal, wenn wir ein Bild zeichnen, müssen wir zunächst einen Behälter bestimmen und die Position und Größe der Grafik festlegen.
<div class="mao_box"> <div class="mao"></div> </div>body {margin: 0px;background: #F6F7A7;}.mao_box {position: relative;top: 50px ;}/*设置宽度并且居中显示*/.mao {margin: 0 auto;width: 400px;}
Zeichnen Sie den Kopf der Katze und die Muster auf ihrem Kopf
-
Je nach Malgewohnheiten müssen wir nur den größten Kopf zuerst zeichnen Nachdem Kopf und Kopf bestimmt sind, kann die Position der Ohren und des Mundes bestimmt werden.
<!-- 猫咪的头部框架 --> <div class="mao_head"> <div class="huawen"> <div><!--头部花纹——左边橙色--></div> </div> </div>.mao_head { width: 400px; /*设置高度和宽度*/ height: 340px; background: #F6F7F2; position: relative; border-radius: 50% 50% 35% 35%; /*画出猫脸的形状*/ border: solid 2px #2e2e2e; /*给猫咪画一个偏黑色的边框*/ overflow: hidden; z-index: 10; }.huawen { position: absolute; height: 160px; /*设置宽度和高度*/ width: 180px; background: #8D8D8D; left: 110px; /*距离猫脸左面110px的位置，正好在中间位置 (400-180)/2*/ border-radius: 0% 0% 50% 50%; /*画出花纹的形状，下面为圆角边框*/ overflow: hidden; /*花纹超出头部的部分隐藏*/ }.huawen > div:first-child { /*花纹的左右两边颜色不一样，所以改变左边半边的颜色为橙色*/ height: 160px; width: 90px; /*宽度和花纹总宽度的一半*/ background: #F0AC6B; }
Katzenkopf.png
Zeichne die Ohren der Katze
-
Die Ohren der Katze sind auf der linken und rechten Seite des Kopfes verteilt, daher müssen sie in zwei Teilen gezeichnet werden. Damit sie nicht so steif aussehen, können wir die Ohren auf beiden Seiten etwas unterschiedlich groß zeichnen.
Sie denken bestimmt: Die Form der Ohren ist so seltsam, wie haben Sie sie gezeichnet? Tatsächlich ist es ganz einfach: Verwenden Sie einfach ein Rechteck und stellen Sie den Randradius für jeden Winkel ein, um einen spitzen Winkeleffekt zu erzielen, und drehen Sie dann den entsprechenden Winkel, um ihn an den Kopf anzupassen.
-
Zuletzt verstecken Sie die Ohren hinter dem Gesicht und legen einen kleinen Teil der Ohrstöpsel frei.
<!--绘制耳朵的容器--> <div class="erduo"> <div></div><!--绘制左耳--> <div></div><!--绘制右耳--> </div>/*耳朵*/.erduo { width: 374px; /*设置耳朵容器的高度和宽度*/ height: 120px; position: absolute; top: -6px; /*将耳朵的位置放到对应的地方*/ left: 50%; margin-left: -187px; } /*左耳*/ .erduo > div:first-child { height: 200px; /*设置左耳的高度和宽度*/ width: 160px; border: 2px solid #2e2e2e; /*给左耳设置一个边框*/ background: #f3f3f3; border-radius: 4% 80% 0% 50%; /*设置左耳各个角度的圆角程度*/ transform: rotate(-15deg); /*设置左耳的旋转角度*/ -ms-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); -o-transform: rotate(-15deg); position: absolute; left: -20px; top: 0px; transition: transform 1s,left 1s; /*设置左耳的hover动效*/ } /*右耳跟左耳的画法同理*/ .erduo > div:last-child { height: 180px; width: 160px; border: 2px solid #2e2e2e; background: #f3f3f3; transform: rotate(15deg); -ms-transform: rotate(15deg); -moz-transform: rotate(15deg); -webkit-transform: rotate(15deg); -o-transform: rotate(15deg); border-radius: 80% 4% 50% 0%; position: absolute; right: -20px; top: 0px;transition: transform 1s,right 1s; }
Ohren.jpg
Zeichne die Augen der Katze
-
Die Augen sind etwas kompliziert, ohne sorgfältiges Studium und starke Vorstellungskraft zu zeichnen: Die Anatomie besteht darin, dass sich die oberen und unteren Ovale überlappen und der braune Augapfel in der Mitte verborgen ist der Kreis oben.
<div class="yanjing"> <div> <div class="yanquan"> <div></div> <!--存放竖着的眼球的div--> </div> <div class="yanquan_hedding"> <!--存放眼睛下睫毛的div--> </div> <div class="hong"></div> </div> <div class="yan_right"> <div class="yanquan"> <div></div> </div> <div class="yanquan_hedding"> </div> <div class="hong"></div> </div> <div style="clear:both"></div> </div>/*眼睛*/.yanjing { height: 60px; /*设置眼睛整体的高度和宽度，多余的部分隐藏*/ width: 300px; position: absolute; /*设置眼睛的位置，使它定位在脸部中间*/ top: 200px; z-index: 20; left: 50%; margin-left: -150px; overflow: hidden; }/*左眼*/.yanquan { height: 100px; /*设置左眼的高度和宽度，多余的部分隐藏*/ width: 100px; border: 2px solid #2e2e2e; border-radius: 50% 50% 50% 50%; overflow: hidden; position: absolute; }/*黑色眼珠子 左*/ .yanquan > div { height: 100px; width: 30px; background-color: #2e2e2e; margin-left: 35px; /*将黑色眼珠子定义在眼睛的中间*/ transition:all 1s; }/*眼睛下睫毛部分*/.yanquan_hedding { height: 100px; width: 180px; border-top: 2px solid #2e2e2e; border-radius: 50% 50% 50% 50%; background: #F6F7F2; /*背景色脸部的背景色一样，这样就只能看见上边框了*/ margin-top: 50px; /*定义位置与眼睛融为一体*/ margin-left: -40px; position: absolute; transition: margin-top 1s; /*为后面的hover动态做准备*/ }/*右边眼睛的整体定义，其它都跟左眼一样，就是位置不一样*/.yan_right { left: 196px; top: 0px; position: absolute; }
Katzenaugen.jpg
Zeichnen Sie das Gesichtsmuster der Katze
Die Schnurrhaare einer Katze sind sehr wichtig, wenn man sie versehentlich schneidet, kann die Katze nicht mehr abschätzen, wie groß das Loch ist, haha.
-
Wenn Sie genau hinschauen, besteht das Muster tatsächlich aus 5 Linien auf der linken und rechten Seite. Zeichnen Sie einfach die Linien und nehmen Sie entsprechende Transformationen vor.
<div class="face_huawen"> <!-- 存放花纹的div --> <div class="face_huawen_huawen huawen_left"> <!-- 存放每一个线条的div --> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="face_huawen_huawen huawen_right"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div style="clear:both"></div> </div>/*脸部花纹*//*左边花纹*/.face_huawen { height: 80px; /*设置花纹整体的高度和宽度*/ width: 380px; position: absolute; /*设置花纹在脸部的位置*/ top: 190px; z-index: 20; left: 50%; margin-left: -190px; }.face_huawen_huawen > div:first-child { /*设置第一条花纹的宽高和变化情况（圆角大小和旋转角度）*/ width: 30px; height: 10px; border-top: 6px #E53941 solid; border-radius: 30% 80% 20% 50%; transform: rotate(25deg); -ms-transform: rotate(25deg); -moz-transform: rotate(25deg); -webkit-transform: rotate(25deg); -o-transform: rotate(25deg); margin-left: 20px; }.face_huawen_huawen > div:nth-child(2) { /*设置第二条花纹*/ width: 20px; height: 6px; background-color: #E53941; border-radius: 50% 50% 50% 50%; transform: rotate(25deg); -ms-transform: rotate(25deg); -moz-transform: rotate(25deg); -webkit-transform: rotate(25deg); -o-transform: rotate(25deg); margin-left: 20px; }.face_huawen_huawen > div:nth-child(3) {/*设置第三条花纹*/ /*margin-top:10px;*/ width: 32px; height: 10px; border-bottom: 4px #E53941 solid; border-radius: 30% 0% 90% 30%; transform: rotate(25deg); -ms-transform: rotate(25deg); -moz-transform: rotate(25deg); -webkit-transform: rotate(25deg); -o-transform: rotate(25deg); margin-left: 8px; }.face_huawen_huawen > div:nth-child(4) {/*设置第四条花纹*/ margin-top: 20px; width: 26px; height: 20px; border-bottom: 4px #E53941 solid; border-radius: 30% 0% 90% 30%; transform: rotate(30deg); -ms-transform: rotate(30deg); -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); -o-transform: rotate(30deg); margin-left: 28px; }.face_huawen_huawen > div:last-child {/*设置第二五条花纹*/ width: 22px; height: 10px; border-bottom: 3px #E53941 solid; border-radius: 0% 0% 50% 50%; transform: rotate(-15deg); -ms-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); -o-transform: rotate(-15deg); margin-left: 40px; margin-top: -8px; }/*右边花纹，右边花纹的位置和旋转角度跟左边花纹不一样，其它变换都一样*/.huawen_right { float: right; transform: rotateY(180deg); -webkit-transform: rotateY(180deg); /* Safari 和 Chrome */ -moz-transform: rotateY(180deg); /* Firefox */ margin-top: -85px; }
Katzengesichtsmuster.jpg
Zeichne die Nase der Katze
-
Ich denke, dass dies der beste Ort ist, um die ganze Katze zu zeichnen ~ la la la la ~
<div class="bizi"> <div></div> </div>/*鼻子，不多做解释了，方法都差不多：确定位置和形状即可*/.bizi { width: 30px; height: 36px; position: absolute; left: 50%; margin-left: -15px; top: 260px; z-index: 30; } .bizi > div { width: 30px; height: 10px; border-bottom: 8px solid #2e2e2e; border-radius: 0% 0% 50% 50%; margin-top: -10px; }
Katze Nose.png
Zeichne das Maul der Katze
Häh? Hast du nicht das Gefühl, dass du den letzten Teil erreicht hast, während du weiter zeichnest? Hahahahahaha, ich bin so glücklich~ ich freue mich, wieder zu wachsen~
-
Der Mund ist Wie bei zwei Schnurrbärten kann mit zwei Schnurrbärten ein rechteckiger Rand erreicht werden.
<div class="zuiba_box"> <div class="zuiba"> <div></div> <div></div> </div> </div>.zuiba { /*设置嘴巴的位置*/ margin-left: 85px; margin-top: 6px; } /*右半边嘴巴*/ .zuiba > div:first-child { width: 50px; height: 40px; border-bottom: 4px solid #2e2e2e; /*设置底部和左边边框，形成直角矩形*/ border-left: 4px solid #2e2e2e; border-radius:40% 0% 20% 50%; /*设置各边的圆角程度*/ margin-left: 13px; margin-top: -26px; position:absolute; transition: border-radius 1s; /*为动效做过渡效果*/ } /*左半边嘴巴*/ .zuiba > div:nth-child(2) { width: 50px; height: 40px; border-bottom: 4px solid #2e2e2e; border-right: 4px solid #2e2e2e; border-radius:0% 40% 50% 20%; margin-left: -38px; margin-top: -26px; position:absolute; transition: border-radius 1s; }
Katzenmaul.jpg
Die verschiedenen Teile werden zu einem kompletten Kätzchen zusammengefügt
-
Nachdem alle Teile gezeichnet sind, ist es wieder Zeit, wie Baymax zu puzzeln, haha~ lasst uns zusammen ein süßes Kätzchen zusammensetzen~ (hauptsächlich die Verwendung des Übergangsattributs, Einstellungen: Attribute nach Hover, und verwenden Sie dann den Übergang, um das Attribut festzulegen, um die Übergangszeit der Änderung abzuschließen)
Puzzle--haha.jpg
Erstellen Sie einen dynamischen Effekt, wenn sich die Maus nach oben bewegt
Unser Fellball ist so beweglich wie ein Kaninchen, also fügen wir der Katze einige Spezialeffekte hinzu~( ^__^)
Bewegen Sie die Maus und die Ohren schwingen nach links und rechts
Schielen Sie Ihre Augen zusammen, um wie ein lächelndes Gesicht auszusehen
-
Die Mundwinkel sind angehoben
/*鼠标浮动耳朵样式*/.mao:hover .erduo > div:first-child { left: -10px; transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); border-radius: 4% 80% 0% 60%; }.mao:hover .erduo > div:last-child { right: -10px; transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); border-radius: 80% 4% 60% 0%; /*transition: transform 1s,right 1s;*/ }/*眯眼并且出现红晕的动态效果，眼珠的宽度变宽*/.mao:hover .yanquan > div:first-child {width:40px; margin-left: 30px; }.hong { position: absolute; height: 28px; width: 70px; background: red; top: 34px; /*top: 64px;*/ left: 18px; border-radius: 50% 50% 50% 50%; background-image: -moz-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%); background-image: -webkit-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%); background-image: -ms-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%); opacity: 0.0; /*transition: opacity 0.5s ease-in 0.2s;*/ }/*眼睛浮动属性*/.mao:hover .yanquan_hedding { margin-top: 30px; /*transition: margin-top 1s;*/ }.mao:hover .hong { /*top: 34px;*/ opacity: 0.8; transition: opacity 0.5s ease-in 0.2s; }/*嘴巴上扬的效果*/.mao:hover .zuiba > div:first-child { border-radius: 50% 50% 50% 50%;width: 40px; }.mao:hover .zuiba > div:nth-child(2) { width: 40px;margin-left: -30px;border-radius: 50% 50% 50% 50%; }PS: Nach dem Zusammenkneifen der Augen erscheint unten ein Teil des Rouges, das sich zusammensetzt zwei kleine Ovale mit durchscheinender Hintergrundfarbe. Solange Sie die Maus bewegen, wird nur die Ellipse angezeigt.
Rötung unter den Augen.png
Wenn Sie während des Lernprozesses auf Probleme stoßen oder Lernressourcen erhalten möchten, können Sie gerne der Lernaustauschgruppe beitreten
Das obige ist der detaillierte Inhalt vonEin animiertes Bild eines lächelnden Kätzchengesichts, realisiert in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!