微信开发工具制作会动的海绵宝宝

一个会动的海绵宝宝<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;}

微信开发工具制作会动的海绵宝宝相关推荐

使用微信开发工具制作一个简单的古诗词展示微信小程序
效果截图: 1.运行环境:微信开发者工具 2.数据准备:博主是使用Mock进行存储模拟数据 Mock数据准备格式如下: {"code": 0,"data": { ...
使用WEX5移动开发工具制作仿淘宝APP
毕业设计-使用WEX5移动开发工具制作仿淘宝APP 系统设计的意义本课题来源于对日常逛超市.购物的生活体验和指导老师的提示.本系统是基于 WeX5的仿淘宝App系统,它商家们提供了一个更广阔的商品推 ...
运行uniapp跳转微信开发工具后一直卡在微信开发工具首页的解决方法
运行uniapp跳转微信开发工具后一直卡在这先检查一下uni-app端的微信小程序的AppID与微信开发者工具的是否是一致的,不一致就会出现图片上面的情况. 解决方法:打开微信公众平台开发管理复制 ...
微信开发工具报错：UNKNOWN ERROR:tunneling socket could not be established,cause=getaddrinfo ENOTFOUND socks
新建小程序时报错:UNKNOWN ERROR:tunneling socket could not be established,cause=getaddrinfo ENOTFOUND socks 发 ...
微信开发工具BUG（漏洞），魔法加法
起点:在使用微信开发工具开发小程序发现了一个漏洞目的:希望大神看到本篇文章能解决一下麻烦运行步骤: 1.使用微信开发工具新建一个小程序 2.然后在后台进行加法计算 3. 4.那么问题来了,微信开发 ...
微信小程序之微信开发工具使用教程详解
如果你要开发自己的微信小程序或者小游戏,微信开发者工具是必不可少的,因为有些微信封装的方法只有微信开发者工具上才能使用,还有一个重要的原因就是,我们提交我们的代码审核必须通过该工具来提交,所有要做微信 ...
微信开发工具任务栏图标不显示
这几天想研究一下微信的小程序,就下载了一个微信开发工具,下载完成之后发现任务栏竟然没有对应的图标,我的强迫症又犯了, . 在安装的时候我发现了好像这个工具是依赖于NW就是node-webkit开发的, ...
微信开发工具常用快捷键
微信开发工具常用快捷键官网:https://developers.weixin.qq.com/miniprogram/dev/devtools/shortcut.html 常用快捷键 Windows ...
linux 微信开发工具报错：System limit for number of file watchers reached, watch
在linux 用命令打开微信开发工具的时候,报错:System limit for number of file watchers reached, watch... 解决方案:在终端依次执行一下命令 ...

微信开发工具制作会动的海绵宝宝

微信开发工具制作会动的海绵宝宝相关推荐

最新文章

热门文章