我的第一个微信小程序

这是一个超级简单的微信小程序

同理，我是为了备份，我准备拿它来做实验，来解决我文件老是被清空的问题
pages/demo/demo.wxml

<!--pages/demo/index.wxml-->
<!--旋转的加载-->
<view id="wrap">
<view class = "new v1">
    <view></view>
    <view></view>
  </view>

  <view class = "new v2">
<view></view>
<view></view>
<view></view>
</view>
</view>

demo.wxss

* pages/demo/index.wxss */
page{
  height: 100%;
  width: 100%;
}

.new{
  width: 300rpx;
  height: 300rpx;
  position: relative;
  overflow: hidden;
  /*溢出的隐藏*/
  margin: 10rpx auto;
  /*外边距离，10rpx 上下距离，左右距离auto*/

}
.v1{
  background-color: skyblue;
}

.v1 view{
width: 200rpx;
height: 200rpx;
margin: 30rpx;
/*the distance of outline*/

position: absolute;
border:20rpx wheat solid;
border-radius: 50%;
}

.v1 view:nth-of-type(1){
  opacity: 0.3;
}

.v1 view:nth-of-type(2){
  border-color: transparent;
  /*外边线颜色为透明*/
  border-top-color: pink;
  /*外边线 头部的颜色为白色*/
}

/*
.v1 view:nth-of-type(3){
  border-color: transparent;
  border-left-color: yellowgreen;
}

.v1 view:nth-last-of-type(4){
  border-color: transparent;
  border-right-color: pink;
}

.v1 view:nth-last-of-type(5){
  border-color: transparent;
  border-bottom-color:sandybrown;
}
*/

.v1 view:nth-of-type(2){
  animation: roll 1s infinite;
  /*Name, 2s-long animation, inifnity of playing times*/
}



@keyframes roll{
  from{transform: rotate(0)}
  /*The original state*/
  to{transform: rotate(360deg)}
  /*The running state*/
}



.v2{
  background-color: powderblue;
  display: flex;
  justify-content: center;
  /*项目在主轴上面居中对齐*/
  align-items: center;
  /*弹性盒子元素在该行的侧轴*/
}

.v2 view{
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background: rgba(233, 230, 40, 0.849);
  margin: 0 20rpx;
  /*上下为0，左右为20rpx*/
}

.v2 view{
  animation: change 1s linear infinite alternate;
  /*change是@keyframe名字，1s动画时间，linear曲线，无限播放，alternate是替换轮流*/
}
@keyframes change{
  from{transform: scale(0.8);opacity: 0.5}
/*scale(.8)是变小，opacity0.5是半透明*/
  to{transform: scale(1.2);opacity: 1}
  /*大小本身的大小，不透明*/
}

.v2 view:nth-of-type(2){
  animation-delay: 0.5s;
  /*延迟0.5s*/
}

pages/demo1/demo1.wxml

<!--pages/demo1/index.wxml-->
<!--小方块-->
<view id = 'wrap'>
<view class = 'little'></view>
<view class = 'little'></view>
<view class = 'little'></view>
<view class = 'little'></view>
<view class = 'little'></view>
<view class = 'little'></view>
<!--大方块-->
<view class = 'big'></view>
<view class = 'big'></view>
<view class = 'big'></view>
<view class = 'big'></view>
<view class = 'big'></view>
<view class = 'big'></view>
</view>

demo1.wxss

/* pages/demo1/index.wxss */
page{
  background: gray;
}
#wrap{
  background-color: transparent;
  /*背景透明*/
  width: 400rpx;
  height: 400rpx;
  left: 100rpx;
  top:200rpx;
  position: relative;
  /*相对定位*/
}
#wrap view{
  opacity: 0.4;
  position: absolute;
  /*绝对定位*/
}

.little{
  top:100rpx;
  left:100rpx;
  width: 200rpx;
  height: 200rpx;
}

.big{
  height: 400rpx;
  width:400rpx;
}
/*井号代表id*/
#wrap view:nth-of-type(1){
  background-color: tomato;
  transform: rotateX(90deg)translateZ(100rpx);
}
/*X是前后，Y是左右，Z是顺时针 translateZ(100rpx)定义3D转换，只在Z轴的值*/

#wrap view:nth-of-type(2){
  background-color: rgba(84, 150, 84, 0.822);
  transform: rotateX(-90deg)translateZ(100rpx);
}

#wrap view:nth-of-type(3){
  background-color:palevioletred;
  transform: rotateY(90deg)translateZ(100rpx);
}

#wrap view:nth-of-type(4){
  background-color: peachpuff;
  transform: rotateY(-90deg)translateZ(100rpx);
}

#wrap view:nth-of-type(5){
  background-color:aquamarine;
  transform: translateZ(-90deg);
}

#wrap view:nth-of-type(6){
  background-color: azure;
  transform: rotateX(180deg)translateZ(100rpx);
}

#wrap view:nth-of-type(7){
  background-color:rosybrown;
  transform: rotateX(90deg)translateZ(200rpx);
}

#wrap view:nth-of-type(8){
  background-color: olivedrab;
  transform: rotateX(-90deg)translateZ(200rpx);
}

#wrap view:nth-of-type(9){
  background-color: thistle;
  transform: rotateY(90deg)translateZ(200rpx);
}

#wrap view:nth-of-type(10){
  background-color: sandybrown;
  transform: rotateY(-90deg)translateZ(200rpx);
}

#wrap view:nth-of-type(11){
  background-color: cornflowerblue;
  transform: translateZ(200rpx);
}

#wrap view:nth-of-type(12){
  background-color: mediumaquamarine;
  transform: rotateY(180deg)translateZ(200rpx);
}

#wrap{
  transform-style: preserve-3d;
  animation: roll 6s linear infinite;
}
@keyframes roll{
  from{transform: rotateX(0) rotateY(0) rotateZ(0)}
  to{transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg)}
}