微信小程序太阳落日效果

最新推荐文章于 2024-07-24 21:37:50 发布

妙妙6

最新推荐文章于 2024-07-24 21:37:50 发布

阅读量279

点赞数 1

文章标签： 1024程序员节微信小程序

本文链接：https://blog.csdn.net/weixin_64097025/article/details/127496097

版权

主要效果

一:wxml

<!--pages/sun/sun.wxml-->
<view class="con">
  <view class="sun"></view>
  <view wx:for="{{box}}" wx:key="index" class="rise" style="bottom:{{160 + 4 * index }}px;animation-delay: {{item.delay}}s;width:{{item.width}}px;height:{{item.height}}px;animation-duration: {{item.duration}}s;"></view>
</view>

二：js

/**
   * 页面的初始数据
   */
  data: {
    box: [],
  },

/**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let box = [];
    for (let i = 0; i < 46; i++) {
      box.push({ name: i })
    }
    box.map(item => {
      item.delay = -Math.random() * 4;
      item.width = 80 + ~~(Math.random() * 100);
      item.height = 8 + ~~(Math.random() * 7);
      item.duration = 3 + Math.random() * 3;
      return item;
    })
    this.setData({
      box,
    })
  },

三：wxss

/* pages/sun/sun.wxss */
page {
  background-color: #000;
  height: 100%;
}

.con {
  position: relative;
  width: 100%;
  height: 90%;
  overflow: hidden;
  filter: contrast(20);
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

.sun {
  position: absolute;
  width: 220px;
  height: 220px;
  bottom: 300px;
  border-radius: 50%;
  background: linear-gradient(#ff7400 50%, #ff7400);
  filter: blur(8px);
}

.sun::after {
  position: absolute;
  content: "";
  left: 10%;
  border-radius: 50%;
  width: 80%;
  height: 65%;
  top: 75%;
  background: #ff8400;
  border: #ff7400 dashed 10px;
}

.rise {
  position: absolute;
  left: -50px;
  bottom: 320px;
  width: 90px;
  height: 13px;
  background: #000;
  animation-name: move;
  animation-iteration-count: infinite;
  filter: blur(5px);
  border-radius: 50%;
  animation-timing-function: ease-in;
}

@keyframes move {
  50% {
    transform: translateX(500rpx);
  }
}