一个会动的海绵宝宝
<text>pages/SpongeBob/spongebob.wxml</text>
<view id="father">
<view class="lefthand">
<view class="lclothes">
</view>
<view class="larm">
</view>
<view class="lhand">
<view class="lhandc">
<view class="lfinger1">
</view>
</view>
</view>
</view>
<view class="righthand">
<view class="rclothes">
</view>
<view class="rarm">
</view>
<view class="rhand">
<view class="rhandc">
<view class="rfinger1">
</view>
</view>
</view>
</view>
<view class="head">
<view class="ellipse1">
</view>
<view class="ellipse2">
</view>
<view class="ellipse3">
</view>
<view class="ellipse4">
</view>
<view class="ellipse5">
</view>
<view class="ellipse6">
</view>
<view class="ellipse7">
</view>
<view class="eyes">
<view class="lefteyes">
<view class="lefteyesbrow1">
</view >
<view class="lefteyesbrow2">
</view>
<view class="lefteyesbrow3">
</view>
<view class="lefteye">
<view class="blueeye">
<view class="blackeye">
</view>
</view>
</view>
</view>
<view class="righteyes">
<view class="righteyesbrow1">
</view>
<view class="righteyesbrow2">
</view>
<view class='righteyesbrow3'>
</view>
<view class="righteye">
<view class="rightblueeye">
<view class="blackeye">
</view>
</view>
</view>
</view>
</view>
<view class="nose">
</view>
<view class="mouse">
<view class='tmouse'>
</view>
<view class="teeth1">
</view>
<view class="teeth2">
</view>
<view class="tongue1">
</view>
<view class="tongue2">
</view>
</view>
</view>
<view class="spongbodywhite">
<view class="triangle1">
</view>
<view class="red">
</view>
<view class="triangle2">
</view>
</view>
<view class="spongbodygray">
<view class="redtriangle">
</view>
<view class="blackline1">
</view>
<view class="blackline2">
</view>
<view class="blackline3">
</view>
</view>
<view class="legs">
<view class="leftleg">
<view class="topleftleg">
</view>
<view class="left1">
</view>
<view class="foot">
<view class="footleft">
<view class='footleft1'>
</view>
</view>
<view class="footright">
</view>
</view>
</view>
<view class="rigthleg">
<view class="toprightleg">
</view>
<view class="left2">
</view>
<view class="rfoot">
</view>
<view class="lefoot">
<view class="lefoot1">
</view>
</view>
<view class="rfoot2">
<view class='rfoot3'>
</view>
</view>
</view>
</view>
</view>
/* pages/SpongeBob/spongebob.wxss */
view{
margin: 0 auto;
padding: 0;
}
#father{
width: 100%;
height: 800px;
}
.head{
width: 120px;
height: 120px;
background: #f9ee60;
border: 3px solid #988c17;
position: relative;
z-index: 5;
}
.eyes{
margin-top: 20px;
margin-left: 25px;
width: 80px;
/* border: 1px solid red; */
}
.lefteyes{
width: 35px;
float: left;
}
.lefteyesbrow1{
width: 7px;
border: 1px solid #0c0900;
background: #0c0900;
transform: rotate(50deg);
margin-left: 7px;
position: relative;
top: 5px;
}
.lefteyesbrow2{
width: 7px;
border: 1px solid #0c0900;
background: #0c0900;
transform: rotate(90deg);
margin-left: 16px;
}
.lefteyesbrow3{
width: 7px;
margin-left: 24px;
border: 1px solid #0c0900;
background: #0c0900;
transform: rotate(120deg);
}
.lefteye{
margin-left: 5px;
width: 30px;
height: 30px;
border-radius: 50%;
border: 3px solid #474b16;
background: #fffff8;
}
.blueeye{
width: 12px;
height: 12px;
border-radius: 50%;
background: #61a0c4;
border:2px solid #32536a;
margin-top: 8px;
margin-left: 9px;
position: relative;
animation: blueeyee 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes blueeyee
{
0% {left:-2px; top:-2px; width: 20px;}
50% {left: 1px ;top :1px; width: 16px; }
100% { left:4px; top:4px; }
}
.blackeye{
width: 4px;
height: 4px;
border-radius: 50%;
background: #0b0515;
border:2px solid #0b0515;
margin-left: 3px;
margin-top: 2px;
}
.righteyes{
float: left;
width:35px;
}
.righteyesbrow1{
width: 7px;
border: 1px solid #0c0900;
background: #0c0900;
transform: rotate(50deg);
margin-left: 7px;
position: relative;
top: 5px;
}
.righteyesbrow2{
width: 7px;
border: 1px solid #0c0900;
background: #0c0900;
transform: rotate(90deg);
margin-left: 16px;
}
.righteyesbrow3{
width: 7px;
margin-left: 24px;
border: 1px solid #0c0900;
background: #0c0900;
transform: rotate(120deg);
}
.righteye{
width: 30px;
height: 30px;
border-radius: 50%;
border: 3px solid #474b16;
background: #fffff8;
margin-left: 3px;
}
.rightblueeye{
width: 12px;
height: 12px;
border-radius: 50%;
background: #61a0c4;
border:2px solid #32536a;
margin-top: 8px;
margin-left: 2px;
position: relative;
animation: blueeyee 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.ellipse1{
width: 15px;
height: 15px;
border-radius: 15px 15px 15px 15px;
background: #a3be12;
position: absolute;
left: 10px;
top: 10px;
}
.ellipse2{
width: 8px;
height: 12px;
border-radius: 50%;
background: #a3be12;
position: absolute;
right: 10px;
top: 10px;
}
.ellipse3{
width: 6px;
height: 10px;
border-radius: 50%;
background: #a3be12;
position: absolute;
left: 15px;
top: 35px;
transform: rotate(165deg);
}
.ellipse4{
width: 8px;
height: 8px;
border-radius: 50%;
background: #a3be12;
position: absolute;
left: 10px;
bottom: 35px;
}
.ellipse5{
width: 10px;
height: 12px;
border-radius: 50%;
background: #a3be12;
position: absolute;
left: 20px;
bottom: 10px;
transform: rotate(10deg);
}
.ellipse6{
width: 15px;
height: 15px;
border-radius: 15px 15px 15px 15px;
background: #a3be12;
position: absolute;
right: 6px;
bottom: 20px;
transform: rotate(20deg);
}
.ellipse7{
width: 8px;
height: 8px;
border-radius: 50%;
background: #a3be12;
position: absolute;
right: 19px;
bottom: 6px;
transform: rotate(20deg);
}
.nose{
position: relative;
border: 2px solid #3b3415;
width: 10px;
height: 22px;
border-radius: 50%;
background: #fee682;
z-index: 1;
top: 26px;
left: 5px;
transform: rotate(10deg);
}
.mouse{
width: 70px;
height: 50px;
/* border-left: 2px solid #2f1e0a; */
border-bottom: 2px solid #2f1e0a;
/* border-right: 2px solid #2f1e0a; */
background: #782220;
border-bottom-left-radius: 51px;
border-bottom-right-radius: 49px;
margin-top: 15px;
position: relative;
left: 3px;
z-index: 3;
overflow: hidden;
}
.tmouse{
width: 70px;
height: 18px;
border-bottom:2px solid #2f1e0a;
position: relative;
border-radius: 0 0 50% 50%;
z-index: 5;
background-color: #f9ee60;
}
.teeth1{
width: 10px;
height: 8px;
background: #f8f6ee;
border: 1px solid #46251d;
margin-top: -2px;
position: relative;
right: 9px;
box-shadow: 1px 1px 1px #46251d;
}
.teeth2{
width: 8px;
height: 6px;
background: #f8f6ee;
border: 1px solid #46251d;
box-shadow: 1px 1px 1px #46251d;
position: relative;
bottom: 10px;
left: 10px;
}
.tongue1{
background: #e57b7f;
width: 10px;
height: 20px;
border-radius: 50%;
border:2px solid #431b17;
float: left;
margin-left: 23px;
margin-top: 2px;
}
.tongue2{
background: #e57b7f;
width: 10px;
height: 20px;
border-radius: 50%;
border:2px solid #431b17;
position: relative;
right: 5px;
margin-top: 3px;
float: left;
}
.spongbodywhite{
width: 110px;
height: 15px;
background: white;
border: 2px solid #382f19;
margin-top: -2px;
}
.spongbodygray{
width: 110px;
height: 20px;
background: #cc972e;
border: 2px solid #2f1202;
border-top: none;
overflow: hidden;
}
.triangle1{
width: 10px;
height: 10px;
transform: rotate(-55deg);
background:white;
border: 2px solid #3a3e49;
margin-top: -8px;
margin-left: 39px;
position: relative;
z-index: 1;
float: left;
}
.triangle2{
width: 10px;
height: 10px;
transform: rotate(50deg);
background:white;
border: 2px solid #3a3e49;
margin-top: -16px;
margin-left: 64px;
position: relative;
z-index: 1;
float: left;
}
.red{
width: 10px;
height: 8px;
background: #d03718;
border: 2px solid #52171e;
transform: rotate(45deg);
margin-top: -10px;
margin-left: 50px;
position: relative;
float: left;
}
.blackline1{
background: #05010a;
width: 25px;
height: 8px;
margin-left: 8px;
position: relative;
top: 2px;
float: left;
}
.blackline2{
background: #05010a;
width: 35px;
height: 8px;
margin-left: 5px;
position: relative;
top: 2px;
float: left;
}
.blackline3{
background: #05010a;
width: 25px;
height: 8px;
margin-left: 5px;
position: relative;
top: 2px;
float: left;
}
.redtriangle{
position: absolute;
width: 10px;
height: 10px;
margin-left: 50px;
margin-top: -6px;
z-index: 3;
transform: rotate(47deg);
background: #d03718;
border: 2px solid #52171e;
}
.legs{
width: 120px;
}
.topleftleg{
position: relative;
z-index: -5;
width: 20px;
height: 5px;
background: #827136;
border-radius: 10px 20px 10px 20px;
border:3px solid #2b1502;
margin-left: 20px;
margin-top: -4px;
}
.leftleg{
width: 60px;
float: left;
}
.rightleg{
width: 50px;
float: left;
}
.left1{
width: 7px;
height: 40px;
border: 1px solid black;
background: #e3d58a;
margin-left: 30px;
}
.footleft{
width: 22px;
height: 20px;
border:1px solid black;
border-radius: 50%;
background: #0a0602;
float: left;
margin-left: 7px;
margin-top: 2px;
}
.footleft1{
width: 10px;
height:10px;
background: #dad7c9;
border-radius: 50%;
margin-top: 3px;
margin-left: 2px;
}
.footright{
width: 15px;
height: 23px;
background: #050404;
position: relative;
left: 5px;
margin-top: -7px;
}
.toprightleg{
position: relative;
z-index: -5;
width: 20px;
height: 5px;
background: #827136;
border-radius: 10px 20px 10px 20px;
border:3px solid #2b1502;
margin-left: 72px;
bottom: 4px;
}
.left2{
width: 7px;
height: 40px;
border: 1px solid black;
background: #e3d58a;
margin-left: 82px;
position: relative;
bottom: 5px;
}
.lefoot{
width: 15px;
height: 23px;
background: #050404;
position: relative;
left: 26px;
margin-top: -11px;
}
.rfoot2{
width: 22px;
height: 20px;
border:1px solid black;
border-radius: 50%;
background: #0a0602;
float: left;
margin-left: 32px;
margin-top: -20px;
}
.rfoot3{
width: 10px;
height:10px;
background: #dad7c9;
border-radius: 50%;
margin-top: 3px;
margin-right: 2px;
}
.lclothes{
position: absolute;
width: 40px;
height: 10px;
background: white;
border: 2px solid #493723;
left: 108px;
top: 126px;
}
.larm{
width: 47px;
height: 4px;
background: #e7e16c;
border: 2px solid #4d362c;
position: absolute;
left: 58px;
top: 129px;
}
.lhandc{
width:20px;
height: 20px;
border-radius: 50%;
background: #fee97a;
border:2px solid black;
position: absolute;
z-index: 3;
top: 121px;
left: 39px;
}
.rclothes{
position: absolute;
width: 40px;
height: 10px;
background: white;
border: 2px solid #493723;
right: 108px;
top: 126px;
}
.rarm{
width: 47px;
height: 4px;
background: #e7e16c;
border: 2px solid #4d362c;
position: absolute;
right: 58px;
top: 129px;
}
.rhand{
width:20px;
height: 20px;
border-radius: 50%;
background: #fee97a;
border:2px solid black;
position: absolute;
z-index: 3;
top: 121px;
right: 39px;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
