在微信小程序 里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS

wxml:

<!-- 复制的跑马灯效果 -->
<view class="marquee_container" style="--marqueeWidth--:-12em">
  <view class="bulletin_box_img2">
    <image src="../../images/icon/bulletin.png" alt=""></image>
  </view>
  <view class="marquee_text">积分商城兑换商品将于每月25日集中发货,请耐心等待,介意慎拍</view>
</view>

wxss:

/*首页跑马灯效果*/
@keyframes around {
  from {
   margin-left: 50%;
  }
  to {
   /* var接受传入的变量 */
   margin-left: var(--marqueeWidth--);
  }
  }
   
 .marquee_container{
  background-color: #fff;
  height: 80rpx;
  line-height: 80rpx;
  position: relative;
  width: 100%;
  margin-top:0rpx;
 }
 .marquee_container:hover{
  /* 不起作用 */
  animation-play-state: paused;
 }
 .marquee_text{
  color:#333;
  font-size: 28rpx;
  display: inline-block;
  white-space: nowrap;
  animation-name: around;
  animation-duration: 10s; /*过渡时间*/
  animation-iteration-count: infinite;
  animation-timing-function:linear;
 }
 .bulletin_box_img2{
  position: absolute;
  width: 60rpx;
  height: 54rpx;
  z-index: 9;
  padding-left: 15rpx;
  padding-right: 15rpx;
  margin-top: 14rpx;
  background: #fff;
}
.bulletin_box_img2 image{
  width: 100%;
  height: 100%;
}

参考链接:https://www.jb51.net/article/160412.htm

微信小程序里实现跑马灯效果的更多相关文章

  1. 微信小程序实现文字跑马灯

    wxml: <view>1 显示完后再显示</view> <view class="example"> <view class=" ...

  2. 微信小程序-实现文字跑马灯-wepy

    百度蛮多例子的,但是代码太长懒得看了 前言 要实现跑马灯主要就是获得判断开始定界和结束定界, 1.9.3新增的wxml操作接口 就可以拿到节点长宽等属性,当然你也可以直接用 文字数量 * 文字大小(注 ...

  3. 微信小程序里如何用阿里云上传视频,图片。。

    纯手写,踩了半天多的坑干出来了... 网上也有对于阿里云如何在微信小程序里使用,但是很不全,包括阿里云文档的最佳实践里. 话不多说上代码了. upvideo(){ var aliOssParams = ...

  4. 微信小程序里使用 Redux 状态管理

    微信小程序里使用 Redux 状态管理 前言 前阵子一直在做小程序开发,采用的是官方给的框架 wepy , 如果还不了解的同学可以去他的官网查阅相关资料学习:不得不说的是,这个框架确相比于传统小程序开 ...

  5. 微信小程序实现标签页滑块效果

    微信小程序实现标签页滑块效果 小程序完整代码: wxml: <view class="swiper-tab"> <view class="swiper- ...

  6. 在微信小程序里使用 watch 和 computed

    在开发 vue 的时候,我们可以使用 watch 和 computed 很方便的检测数据的变化,从而做出相应的改变,但是在小程序里,只能在数据改变时手动触发 this.setData(),那么如何给小 ...

  7. 微信小程序里碰到的坑和小知识

    本文作者:dongtao   来自:授权地址 本人低级程序员,以下bug不能确保在其它地方可以以相同的原因复现.同时, 出现很多bug的原因是小程序的基本知识还有编码的基本功不到位造成 路还很长,共勉 ...

  8. 微信小程序实现“鲜肉APP”首页效果

    项目地址http://git.oschina.net/djcx/WeiXinXiaoChengXu/tree/master 如果您觉得不错,记得给一个star 由于微信小程序目前是当下趋势,正好昨天弄 ...

  9. 微信小程序里的bug---video 的play()

    微信小程序hidden转换后执行play()用真机测试不会播放.在调试器里可以. 解决方法,把hidden换成wx:if. 我刚开始以为网速问题,其实不是, 具体我也不知道为什,换上wxif解决了.

随机推荐

  1. golang中打印格式化的一些占位符

    package main import ( "fmt" ) func main() { var a byte = 255 // byte = uint8 rune = int32 ...

  2. vue 快速入门 系列 —— 侦测数据的变化 - [vue api 原理]

    其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue api 原理] 前面(侦测数据的变化 - [基本实现])我们已经介绍了新增属性无法被侦测到,以及通过 delete 删除数据也不会 ...

  3. 源码安装 python3.7

    yum install libffi-devel openssl -y wget https://www.python.org/ftp/python/3.7.4/Python-3.7.4.tgz ta ...

  4. K8S的安装部署以及基础知识

    Kubernetes(K8S)概述 Kubernetes又称作k8s,是Google在2014年发布的一个开源项目. 最初Google开发了一个叫Borg的系统(现在命名为Omega),来调度近20多 ...

  5. 企业CICD规模化落地浅析

    本次分享的题目是<企业CICD规模化落地>,因此我们不会侧重讲解CICD是什么以及怎样做CICD,而是你已经知道怎样"玩转"CICD了,要如何在一个比较大的企业中规模化 ...

  6. 不使用pvc的方式在K8S中部署apisix-gateway

    不使用pvc的方式在K8S中部署apisix-gateway 简介 我的apisix使用etcd作为数据存储服务器,官方的使用pvc方式或者docker-compose的方式,对于新手不太友好,本篇是 ...

  7. new Date时间格式转换方法

    平时经常会使用到时间转换,组件库已经有很多组件可以自动生成时间类型了,但是底层的封装方法还是得有 获取当前时间 new Date()  或者自己拥有一个毫秒时间 方法如下 /** * title: 时 ...

  8. StarUML官网地址 http://staruml.io/

    StarUML官网地址 http://staruml.io/

  9. bom案例3-放大镜

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  10. VC 获取已系统安装的字体

    转载请注明来源:https://www.cnblogs.com/hookjc/ BOOL CALLBACK EnumFonts(CONST LOGFONT* lplf, CONST TEXTMETRI ...