css通知页面,CSS3 transition 实现通知消息轮播条

7888510e0dab25c1a906109f50949726.png

Vue 版本,拷贝到文件即可使用

export default {

data () {

return {

// 开启动画

isAnimated: false,

// 轮播数据

dataSource: ['dzm', 'xyq', '啊啊']

}

},

created () {

// 开启定时器

setInterval(this.scroll, 1000)

},

methods: {

// 滚动动画

scroll () {

// 开启动画

this.isAnimated = true

// 倒计时动画时间

setTimeout(() => {

// 将数组第一个元素添加到数组尾部

this.dataSource.push(this.dataSource[0])

// 移除数组第一个元素

this.dataSource.shift()

// 关闭动画

this.isAnimated = false

// 动画时间需要与 .carousel-animated 中设置的时间一致

}, 500)

}

}

}

#carousel-view {

width: 100%;

height: 32px;

background-color: red;

overflow: hidden;

}

#carousel-list-view {

margin: 0;

padding: 0;

list-style: none;

}

#carousel-list-view li {

line-height: 32px;

height: 32px;

}

.carousel-animated {

transition: transform 0.5s;

transform: translateY(-32px);

}

到此这篇关于CSS3 transition 实现通知消息轮播条的文章就介绍到这了,更多相关CSS3 transition轮播条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值