今日分享【微信小程序中一个左右摇摆的小灯泡】代码

1、废话少说，先上效果：

2、具体实现代码如下：

• wxml

<view class="con {{off?'off':''}}" catchtap="close">
  <view class="box {{off?'off':''}}">
    <view class="box_view {{off?'off':''}}"></view>
  </view>
</view>
<view class="demo">welcome to here!</view>
<view class="bottom">
  <view class="shadow {{off?'off':''}}"></view>
</view>

• wxss

page {
  background: #001933;
}

::after,
::before {
  box-sizing: border-box
}

.con {
  width: 75rpx;
  height: 275rpx;
  animation: box-swing 3s infinite ease-in-out;
  transform-origin: top center;
  position: absolute;
  top: -10rpx;
  left: 40px;
}

.con.off {
  animation: none;
}


.box {
  z-index: 10;
  display: block;
  width: 75rpx;
  height: 75rpx;
  border-radius: 50%;
  position: absolute;
  top: 200rpx;
  left: calc(50% -(75rpx/2));
  background: white;
  box-shadow: 5rpx 5rpx 80rpx #e4cedf, 5rpx -5rpx 80rpx #e4cedf, -5rpx 5rpx 80rpx #e4cedf, -5rpx -5rpx 80rpx #e4cedf;
  cursor: pointer;
}

.box::before {
  content: "";
  position: absolute;
  width: 35rpx;
  height: 50rpx;
  background: #222;
  bottom: 100%;
  left: calc(50% -(35rpx/2));
  z-index: -1;
  border-top-left-radius: 10rpx;
  border-top-right-radius: 10rpx
}

.box::after {
  content: "";
  position: absolute;
  width: 10rpx;
  height: 250rpx;
  background: #222;
  bottom: 100%;
  left: calc(50% - 5rpx);
  z-index: -1
}

.box .box_view {
  display: block;
  position: absolute;
  width: 2rpx;
  height: 30rpx;
  background: #fff;
  top: 2rpx;
  left: 28rpx;
  box-shadow: 17rpx 0 #fff;
  opacity: 0;
}

.box .box_view::after {
  content: "";
  position: absolute;
  bottom: -2rpx;
  left: 4rpx;
  background: #fff;
  width: 2rpx;
  height: 12rpx;
  display: block;
  box-shadow: 4.5rpx 0 #fff, 9rpx 0 #fff;
}

.box.off {
  background: transparent;
  box-shadow: none;
  border: 1px solid #fff;
}

.box_view.off {
  opacity: 1
}

@keyframes box-swing {
  0% {
    transform: rotate(-10deg)
  }

  50% {
    transform: rotate(10deg)
  }

  100% {
    transform: rotate(-10deg)
  }
}

.bottom {
  position: absolute;
  background: rgb(0, 0, 0, .1);
  height: 200rpx;
  width: 100%;
  bottom: 0;
  left: 0
}

.bottom .shadow {
  position: absolute;
  background: rgb(228, 206, 223, 0.4);
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  top: calc(50% - 25rpx);
  left: calc(50% - 25rpx);
  box-shadow: 20rpx 20rpx 100rpx #e4cedf, -20rpx 20rpx 100rpx #e4cedf, 20rpx -20rpx 100rpx #e4cedf, -20rpx -20rpx 100rpx #e4cedf;
  animation: shadow-swing 3s infinite ease-in-out;

}

.shadow.off {
  display: none;
}

@keyframes shadow-swing {
  0% {
    transform: translateX(100px)
  }

  50% {
    transform: translateX(-100px)
  }

  100% {
    transform: translateX(100px)
  }
}

.demo{
  width: 500rpx;
  height: 300rpx;
  background: rgba(85, 59, 59, 0.2);
  box-shadow: 0px 3rpx 40rpx rgba(0, 0, 0, 0.36);
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 30rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

• js

Page({
  data: {
    off: false, //关灯泡是否闭
  },
  close() {
    this.setData({
      off: !this.data.off
    })
  },
})

3、写在最后：实现简单，勤于动手，不需要任何插件，你自己就可以纯手撸一个‘花里胡哨’的页面效果，一起来试试吧，粘贴复制即用哦hahaha
4、贴下自己的小程序，有很多花里胡哨的东西，喜欢可以扫码查看