HTML로 구현된 새끼 고양이 웃는 얼굴의 애니메이션 사진
- 零下一度원래의
- 2017-06-24 13:09:054505검색
고양이 컨테이너
-
그림을 그릴 때마다 먼저 컨테이너를 결정하고 그래픽의 위치와 크기를 결정해야 합니다.
<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;}
고양이 머리와 머리의 무늬를 그려주세요
-
그리는 습관에 따라 가장 큰 머리를 먼저 그려야 머리가 결정되어야 귀와 입의 위치가 결정됩니다.
<!-- 猫咪的头部框架 --> <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; }
cat head.png
고양이 귀를 그려주세요
고양이 귀는 머리의 왼쪽과 오른쪽에 분포되어 있으므로 두 개의 div로 그려야 합니다. 그렇게 보이도록... 뻣뻣해지도록 양쪽 귀의 크기를 약간 다르게 만들 수 있습니다.
귀 모양이 이렇게 이상한데 어떻게 그렸지?라고 생각하실 텐데요. 실제로는 매우 간단합니다. 직사각형을 사용하고 각 각도에서 테두리 반경을 설정하여 날카로운 각도 효과를 만든 다음 머리에 맞게 해당 각도를 회전하면 됩니다.
-
마지막으로 귀를 얼굴 뒤로 숨기고 귀끝을 살짝 노출시켜주세요.
<!--绘制耳朵的容器--> <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; }
ears.jpg
고양이 눈 그리기
-
눈은 세심한 연구와 강한 상상력 없이는 그리기가 좀 어렵습니다. 해부하여 만들어집니다. 위쪽 및 아래쪽 타원은 가운데에 있는 갈색 눈알이 위쪽 원에 있는 검은색 직사각형입니다.
<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; }
cat eyes.jpg
고양이 얼굴 패턴 그리기
고양이 수염은 아주 중요해요. 실수로 잘라버리면 정말 심각하고 고양이도... 얼마나 큰 구멍에 들어갈 수 있는지 측정할 수 없습니다. 하하.
-
자세히 살펴보면 패턴은 실제로 왼쪽과 오른쪽에 5개의 선으로 구성되어 있습니다. 선을 그리고 이에 맞게 변형하면 됩니다.
<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; }
고양이 얼굴 패턴.jpg
고양이 코를 그려주세요
-
고양이 전체를 그리는 데는 여기가 가장 좋은 것 같아요. 간단한 반원 하나로 문제가 해결될 수 있어요~라랄랄라~
<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; }
고양이 코.png
고양이 입을 그려보세요
咦? 계속 그리다 보면 이제 마지막 부분에 다다른 것 같지 않나요? ㅎㅎㅎㅎㅎㅎㅎ 너무 행복해요~ 또 행복하게 성장하고 있어요~
-
입이 콧수염 두 개로 되어있어요 두 개의 직사각형 테두리.
<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; }
Catmouth.jpg
다양한 파츠가 엮어져 완성된 새끼 고양이가 됩니다
-
파츠를 다 그린 후에는 다시 베이맥스처럼 퍼즐을 맞추는 시간, 하하~ 넣어봅시다 같이 같이 귀여운 새끼 고양이를 만들어 보세요~ (주로 전환 속성을 사용하고, 후 속성 설정: 호버 후 전환을 사용하여 속성 설정을 사용하여 변경의 전환 시간을 완료합니다)
퍼즐--하하. jpg
마우스 움직임의 역동적인 효과 만들기
저희 퍼볼은 토끼처럼 움직이는 녀석이니까 고양이에게 특수효과를 좀 더해볼까요~(^__^)
마우스 움직임 올라간 후 귀가 좌우로 흔들립니다
눈이 가늘게 뜨여 웃는 얼굴 모양을 보여줍니다
-
입꼬리가 올라가요
/*鼠标浮动耳朵样式*/.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: 눈을 가늘게 뜨고 난 후 , 아래에 빨간색 부분이 나타나는데 반투명한 배경색을 가진 두 개의 작은 타원입니다. 마우스를 움직이면 타원만 표시되도록 구성되어 있습니다.
눈 밑 붉은기.png
학습 과정에서 문제가 발생하거나 학습 자료를 얻고 싶다면 학습 교류 그룹에 가입하실 수 있습니다
위 내용은 HTML로 구현된 새끼 고양이 웃는 얼굴의 애니메이션 사진의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：양식의 HTML 기본 튜토리얼 예시다음 기사：양식의 HTML 기본 튜토리얼 예시