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
    评论
可以使用CSS3transition属性来实现图片的淡入淡出效果。具体步骤如下: 1. 在HTML中创建一个包含图片的容器,如下: ``` <div class="slider"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> </div> ``` 2. 使用CSS样式设置容器的宽度和高度,并将容器中的图片的位置设置为绝对定位。 ``` .slider { width: 100%; height: 500px; position: relative; } .slider img { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } ``` 3. 使用JavaScript代码来控制图片的淡入淡出效果。首先,获取所有的图片元素和它们的数量。 ``` var sliderImages = document.querySelectorAll('.slider img'); var currentImage = 0; var sliderImageCount = sliderImages.length; ``` 4. 创建一个函数,用于控制图片的淡入淡出效果。该函数将当前图片的opacity值设置为0,将下一张图片的opacity值设置为1,并将currentImage变量加1,以便下一次调用该函数时切换到下一张图片。 ``` function nextImage() { sliderImages[currentImage].style.opacity = 0; currentImage = (currentImage + 1) % sliderImageCount; sliderImages[currentImage].style.opacity = 1; } ``` 5. 使用setInterval函数来周期性地调用该函数,以实现图片的自动轮播效果。 ``` setInterval(nextImage, 5000); ``` 完整代码如下: HTML代码: ``` <div class="slider"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> </div> ``` CSS代码: ``` .slider { width: 100%; height: 500px; position: relative; } .slider img { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } ``` JavaScript代码: ``` var sliderImages = document.querySelectorAll('.slider img'); var currentImage = 0; var sliderImageCount = sliderImages.length; function nextImage() { sliderImages[currentImage].style.opacity = 0; currentImage = (currentImage + 1) % sliderImageCount; sliderImages[currentImage].style.opacity = 1; } setInterval(nextImage, 5000); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值