爱编程

爱编程

小程序开发 - 文章占位样式布局

腾讯云主机推荐

类似豆瓣 APP 动画闪烁效果

QQ截图20200526141737.png


WXML

<view class="text-loading">
  <view class='pic-loading-line'></view>
  <view class='text-loading-line-first'>
    <view class='text-loading-line'></view>
    <view class='text-loading-line'></view>
    <view class='text-loading-line'></view>
  </view>
  <view class='text-loading-line-second'>
    <view class='text-loading-line'></view>
    <view class='text-loading-line'></view>
    <view class='text-loading-line'></view>
  </view></view>


WXSS

.text-loading {
  width: 90%;
  margin:50rpx;
  /* border:1rpx solid #ccc; */}.text-loading .pic-loading-line {
  display: inline-block;
  width: 130rpx;
  height: 130rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  animation: pulse 1s infinite ease-in-out;}.text-loading .text-loading-line-first {
  display: inline-block;
  width: 70%;
  height: 150rpx;}.text-loading .text-loading-line-second {
  display: inline-block;
  width: 100%;
  height: 150rpx;}.text-loading-line {
  height: 30rpx;
  margin-bottom: 20rpx;  
  width: 100%;
  animation: pulse 1s infinite ease-in-out;}.text-loading-line:nth-child(1) {
  width: 100%;}.text-loading-line:nth-child(2) {
  width: 90%;}.text-loading-line:nth-child(3) {
  width: 50%;}@keyframes pulse {
  0% {
    background-color: rgba(165, 165, 165, 0.1);
  }

  50% {
    background-color: rgba(165, 165, 165, 0.3);
  }

  100% {
    background-color: rgba(165, 165, 165, 0.1);
  }}


本文标题:小程序开发 - 文章占位样式布局
本文链接:https://www.masoft.cn/post/114.html
作者授权:除特别说明外,本文由 智汇软件 原创编译并授权 爱编程 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。
阿里云主机推荐

2020-05-26 0 /
笔记
/
标签:  小程序

评论回复

分享:

支付宝

微信