微信小程序相关css写小黄人

张小雪、      2022-02-08     572

关键词:

小程序上课第三天,因为今天院里有活动,所以没去上课,第四天上午又因为要召开入党转正大会,又耽误了一上午,下午去上课,要了资料。这两天讲了一些零零碎碎的东西,做的实例有上面这个小黄人

都是用的css,基本上都是用border,transform:rotate(),animation,和一些细节做的,左边的对话框那里的小尖头也是一个重点细节

下面附上代码:

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6     <title>小黄人模仿</title>
  7     <link rel="stylesheet" href="">
  8     <link rel="stylesheet" type="text/css" href="css/index.css">
  9 </head>
 10 <body>
 11 <!-- 最外层的容器 -->
 12     <div class="wrapper">
 13         <!-- 身体的容器 -->
 14         <div class="bodyH">
 15             <!-- 将裤子分成两个部分,裤子下面其实是个矩形(超出身体容器的部分给隐藏了),裤子上面的矩形-->
 16             <div class="kuzi">
 17                 <div class="kuzi-bottom">
 18                     
 19                 </div>
 20                 <!-- 裤子下面结束 -->
 21                 <div class="kuzi-top">
 22                         
 23                 </div>
 24                 <!-- 裤子上面结束 -->
 25                 <!-- 衣服上面的线是通过1旋转,2设边框3弧度实现的 -->
 26                 <!-- 左边的线 -->
 27                 <div class="left-line">
 28                     
 29                 </div>
 30                 <!-- 中间的线 -->
 31                 <div class="middle-line">
 32                     
 33                 </div>
 34                 <!-- 右边的线 -->
 35                 <div class="right-line">
 36                     
 37                 </div>
 38                 <!-- 小口袋 -->
 39                 <div class="koudai">
 40                     
 41                 </div>
 42                 <!-- 左边的背带 -->
 43                 <div class="left-beidai">
 44                     
 45                 </div>
 46                 <!-- 右边的背带 -->
 47                 <div class="right-beidai">
 48                     
 49                 </div>
 50 
 51             </div>
 52             <!-- 裤子部分结束 -->
 53         </div>
 54         <!-- 身体容器结束 -->
 55 
 56         <!-- 脚的部分开始 -->
 57         <div class="foot">
 58             <div class="left-foot">
 59                 
 60             </div>
 61             <div class="right-foot">
 62                 
 63             </div>
 64         </div>
 65         <!-- 脚下面的阴影 -->
 66         <div class="foot-shadow">
 67             
 68         </div>
 69         <!-- 脚的部分结束 -->
 70         <!-- 嘴的部分开始 -->
 71         <div class="mouse">
 72         <!-- 嘴巴是一个矩形进行旋转,弧度,上面那个横线用after元素在加了一个矩形的bottom边框 -->
 73             <div class="mouse-shape">
 74                 
 75             </div>
 76         </div>
 77 
 78         <!-- 眼睛开始 -->
 79         <div class="eye">
 80             <div class="left-eye">
 81                 <div class="eye-line"></div>
 82                 <div class="eye-circle">
 83                     <div class="eye-yanzhu">
 84                         <div class="eye-baidian">
 85                             
 86                         </div>
 87                     </div>
 88                 </div>
 89             </div>
 90             <div class="right-eye">
 91                 <div class="eye-line"></div>
 92                 <div class="eye-circle">
 93                     <div class="eye-yanzhu">
 94                         <div class="eye-baidian">
 95                             
 96                         </div>
 97                     </div>
 98                 </div>
 99             </div>
100         </div>
101         <!-- 眼睛结束 -->
102         <!-- 胳膊开始 -->
103         <div class="arm">
104         <!-- after伪元素增加了一点胳膊肘的地方的线条 -->
105             <div class="left-arm"></div>
106             <div class="right-arm"></div>
107         </div>
108         <!-- 胳膊结束 -->
109         <!-- 头发开始 -->
110         <div class="hair">
111             <div class="tophair"></div>
112             <div class="middlehair"></div>
113             <div class="bottomhair"></div>
114         </div>
115         <!-- 头发结束 -->
116 
117     </div>
118 
119     <!-- 对话框 -->
120     <div class="duihuakuang">
121         <span class="hello">
122             我是计科141班张雪
123         </span>
124         
125     </div>
126 </body>
127 </html>
  1 /*
  2 * @Author: ÐéÖñ
  3 * @Date:   2017-06-04 15:36:24
  4 * @Last Modified by:   虚竹
  5 * @Last Modified time: 2017-06-04 20:48:44
  6 */
  7 *{margin:0;padding:0;}
  8 
  9 .wrapper {
 10     width: 300px;
 11     margin: 50px auto;
 12     position: relative;
 13 }
 14 /*小黄人身体容器*/
 15 .bodyH{
 16     width: 240px;
 17     height: 400px;
 18     border: 5px solid black;
 19     border-radius: 115px;
 20     background: rgb(249, 217, 70);
 21     position: relative;
 22     /* 溢出 */
 23     overflow: hidden;
 24 }
 25 /*裤子*/
 26 .kuzi-bottom {
 27     height: 100px;
 28     width: 100%;
 29     position: absolute;
 30     background: #2074A0;
 31     bottom: 0;
 32     border-top: 5px solid black;
 33 }
 34 
 35 .kuzi-top {
 36     height: 60px;
 37     width: 65%;
 38     background: #2074A0;
 39     position: absolute;
 40     bottom: 100px;
 41     left: 0px;
 42     right: 0px;
 43     margin: auto;
 44     border: 5px solid black;
 45     border-bottom: none;
 46 }
 47 
 48 /* 裤子下面的线条*/
 49 .left-line{
 50     width: 30px;
 51     height: 30px;
 52     position: absolute;
 53     bottom: 60px;
 54     left: 5px;
 55     /*  1旋转*/
 56     transform: rotate(10deg);
 57     /*  2设置边框*/
 58     border-right: 5px solid black;
 59     border-bottom: 5px solid black;
 60     /*  3弧度*/
 61     border-radius: 0px 0px 60px 0px;
 62 }
 63 .right-line {
 64     width: 30px;
 65     height: 30px;
 66     position: absolute;
 67     bottom: 60px;
 68     right: 5px;
 69     transform: rotate(-10deg);
 70     border-left: 5px solid black;
 71     border-bottom: 5px solid black;
 72     border-radius: 0px 0px 0px 60px;
 73 }
 74 
 75 .middle-line {
 76     width: 5px;
 77     height: 40px;
 78     background: black;
 79     position: absolute;
 80     left: 0;
 81     right: 0;
 82     margin:  auto;
 83     bottom: 0px;
 84     border-radius: 2px;
 85 }
 86 
 87 /*裤子上的小口袋*/
 88 .koudai {
 89     width: 60px;
 90     height: 40px;
 91     border: 5px solid black;
 92     border-radius: 0px 0px 25px 25px;
 93     position: absolute;
 94     bottom: 65px;
 95     left: 0px;
 96     right: 0px;
 97     margin:  auto;
 98 }
 99 
100 /*左右背带*/
101 .left-beidai{
102     width: 120px;
103     height: 16px;
104     border: 5px solid black;
105     /*进行了旋转*/
106     transform: rotate(45deg);
107     position: absolute;
108     left: -50px;
109     bottom: 170px;
110     background: #2074A0;
111 }
112 /*背带上面的小按扣*/
113 .left-beidai::after{
114     content: '';
115     width: 10px;
116     height: 10px;
117     display: block;
118     border-radius: 50%;
119     background: black;
120     position: absolute;
121     right: 5px;
122     top: 0px;
123     bottom: 0px;
124     margin: auto;
125 }
126 .right-beidai{
127     width: 120px;
128     height: 16px;
129     border: 5px solid black;
130     /*进行了旋转*/
131     transform: rotate(-45deg);
132     position: absolute;
133     right: -50px;
134     bottom: 170px;
135     background: #2074A0;
136 }
137 .right-beidai::after{
138     content: '';
139     width: 10px;
140     height: 10px;
141     display: block;
142     border-radius: 50%;
143     background: black;
144     position: absolute;
145     left: 5px;
146     top: 0px;
147     bottom: 0px;
148     margin: auto;
149 }
150 
151 /*开始脚*/
152 /*把脚分成了两部分,这是脚竖着的部分*/
153 .left-foot{
154     width: 40px;
155     height: 60px;
156     background: black;
157     position: absolute;
158     bottom: -30px;
159     left: 75px;
160     z-index: -1;
161     border-radius: 0px 0px 5px 0px;
162     /* 
163         leftfoot: 动画的名称;
164         0.8s: 完成这一个动画所需要的时间;
165         ease-in-out: 非匀速运动;
166         infinite: 无限循环;
167      */
168     animation: leftfoot 0.8s ease-in-out infinite;
169     /*设置旋转元素的基点位置*/
170     transform-origin: right top;
171 }
172 /*脚横着的部分*/
173 .left-foot::after{
174     content: '';
175     display: block;
176     width: 40px;
177     height: 30px;
178     background: black;
179     position: absolute;
180     bottom:  -0px;
181     left: -30px;
182     border-radius: 30px 0px 0px 20px;
183 }
184 /*左脚的动画*/
185 @keyframes leftfoot{
186     /*不同的位置进行不同的旋转*/
187     0% {
188         transform: rotate(0deg);
189     }
190 
191     30% {
192         transform: rotate(10deg);
193     }
194 
195     50% {
196         transform: rotate(0deg);
197     }
198 
199     100% {
200         transform: rotate(0deg);
201     }
202 }
203 
204 .right-foot{
205     width: 40px;
206     height: 60px;
207     background: black;
208     position: absolute;
209     bottom: -30px;
210     right: 120px;
211     z-index: -1;
212     border-radius: 0px 0px 0px 5px;
213     animation: rightfoot 0.8s ease-in-out infinite;
214     /*设置旋转元素的基点位置*/
215     transform-origin: left top;
216 }
217 .right-foot::after{
218     content: '';
219     display: block;
220     width: 40px;
221     height: 30px;
222     background

微信小程序旋转大师的代码是啥

参考技术A微信小程序旋转大师的代码是什么-百度知道2个回答回答时间:2022年12月1日最佳回答:微信小程序实现可实时改变转速的css3旋转动画实例代码,前言本文主要介绍的是关于微信小程序实现可实时改变转速的css3旋转动画... 查看详情

微信小程序中template里面怎么写样式

微信小程序的样式是在*.wxss文件里定义的,也可以直接在*.wxml模板文件里直接写style="XXX"跟普通html里写css一样的参考技术A 查看详情

微信小程序介绍怎么写?

...是用在哪里。小程序简介主要在以下2个场景中呈现:1、微信“搜索小程序”时在小程序列表展现小程序名称与简介2、用户在进入小程序后,选择“...”并点击小程序头像,呈现小程序相关资料包括简介与账号主体针对以上场景... 查看详情

微信小程序个人理解

1:小程序不是用HTML5开发,它是由微信全新定义的规范,是基于XML+JS的,不支持也不兼容HTML,兼容受限的部分CSS写法。(wxml)weixinmarkuplanguage2:小程序不是B/S模式,而恰恰相反的它是一套C/S架构的。很多人不明白C/S应用为什么也... 查看详情

开题报告微信小程序购物选题背景怎么写

参考技术A一、研究的目的、意义与应用前景等:基于微信小程序的商城平台的目的:随着信息时代的发展,用户的消费水平也在不断的上升,传统超市以及电子商务在线上推广和购物体验等方面也到了一个瓶颈期。淘宝、京东... 查看详情

微信小程序代码怎么写?

参考技术A不懂代码怎么制作微信小程序首先看一下官方的干货:mp.weixin.qq/...201714指南包括小程序产品定位功能介绍,设计规范,开发入门教程,小程序数据相关分析等等一系列新手教程,接近手把手教,只要认真看总会有所感... 查看详情

h5就是页面吗,还是微信小程序?

...但感觉不太对。h5到底是什么,是纯页面html+css+js,还是微信小程序,或者是微信jssdk。h5就是html5的简称,现在h5还有一个含义,因为很多人不懂h5是什么东西,但是都知道哪些炫酷的邀请函,节日卡等等是用h5技术做出来的,然... 查看详情

两周撸一个微信小程序(代码片段)

...里,具体实现相关可查看这篇文章:两天撸一个天气应用微信小程序。但是这个小程序和QuietWeather完全不是一个数量级的。so,该文章梳理内容会有那么一点儿多,想跳过的可以直接拉到最下面。。。这里先上效果图,感兴趣的... 查看详情

微信小程序怎么制作自己的程序

参考技术A一、认识微信小程序(1)先了解应用如何开发WebApp(内嵌内浏览器打开指定网页)NativeApp(原生开发,也就是使用iOS和Android代码开发)HybridApp(混合APP开发,写DIV+CSS+JS+PHP代码开发)(2)微信、公众号、小程序微信:... 查看详情

二次元的css——用div+less做一个小黄人构造器(代码片段)

...,通过设置一些指定的参数来生成不同种类、不同身材的小黄人。GitHub传送门:https://github.com/lancer07 查看详情

微信小程序人太多进不去怎么办

参考技术A提高一下带宽增加一下容量。这个时候就不要进了,因为进的话也进不去,需要和程序的设计人员联系一下,叫他提高一下带宽增加一下容量,这样可以使更多的人同时进入。 查看详情

微信小程序之自定义模态弹窗(带动画)实例

...etails/54700871------------------------------------------------------------微信开发者工具的快捷键微信小程序的文件结构——微信小程序教程系列(1)微信小程序的生命周期实例演示——微信小程序教程系列(2)微信小程序的动态修改视图层... 查看详情

微信小程序:css选择器

查看详情

微信小程序:css选择器

查看详情

「微信小程序」有哪些冲击与机会?

昨天晚上相信大家的朋友圈被「微信小程序」刷屏了,这影响力赶上了国务院出台新政策一样,足以说明微信在中国的影响力之大。然后今天公号后台一大堆人问我怎么看这件事,不少人很忧虑,仿佛自己将要失业一样。好吧,... 查看详情

androidui系列-自定义view手绘小黄人

...;来熟悉谷歌提供的一些自定绘图的方法,那就画一个小黄人吧。我在git上找到一个小换人的源码。它是按照比例计算的,有一定的公式,我觉得太麻烦了。就用自己的理解画了一个写死大小的小黄人。先给大家看看... 查看详情

小程序开发运营必看:微信小程序平台运营规范

一、原则及相关说明?微信最核心的价值,就是连接——提供一对一、一对多和多对多的连接方式,从而实现人与人、人与智能终端、人与社交化娱乐、人与硬件设备的连接,同时连接服务、资讯、商业。?微信团队一直致... 查看详情

微信小程序css篇----所有属性(按字母排列:c,d,e开头)

f开头的属性主要就是盒子布局和字体的,先来看图,然后在一项项来看。1.fallback:是@counter-style里的属性值。小程序里不知道怎么写,一写@counter-style就报未定义的属性。不过在css中Firefox支持。点击打开链接。2.fill:这是SVG里... 查看详情