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

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

{{ item }}

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轮播条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

css通知页面,CSS3 transition 实现通知消息轮播条相关推荐

html中多个图片轮播代码怎么写,Html5如何快速在页面中写出多个轮播图效果
我们在做项目的过程中,有时候客户需求要求你在同一个页面中,写几个不同样式的轮播图效果,那么如何快速实现呢?(要知道若果你每个轮播图都要用原生javascript写的话,会很麻烦,代码也不够简洁) 这里 ...
CSS3动画实现背景图轮播
CSS3动画实现背景图轮播利用css3动画切换背景图的路径:使这个动画无限循环下去,以实现背景图切换的效果. 代码: <!DOCTYPE html> <html lang=&quo ...
制作一个简单HTML游戏网页（HTML+CSS）米哈游 1页带轮播图
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 游戏官网 | 游戏网站 | 电竞游戏 | 游戏介绍 | 等网站 ...
使用CSS写正方体，结合JS实现3D轮播图
立体轮播图代码+界面呈现 HTML <div class="pox"><ul class="box"><li class=&qu ...
Vuetify Carouse轮播图图片切换导致页面总是自动跳转到轮播图位置
文章目录 begin !!! Solution1 Solution2 end begin vuetify carouse轮播图的图片自动切换的时候, 会自动聚焦跳转到轮播图自身的位置. 这导致了一个 ...
数据消息轮播滚动
1.显示单条消息需求缓慢移入等待事件缓慢移出获取整体数据绝对高度动画效果实现两个定时器第一个定时器为一个消息进来到等待出去的整体间隙定时器内是消息进来的缓慢动画效果实现过程是操作整 ...
CSS3实现列表无限滚动/轮播
使用CSS3实现列表的无限滚动/轮播效果预览思路将当前列表滚动至最后一项的末尾,然后瞬间切换回第一项问题点用什么方式实现无限轮播这个问题就是列表滚动到最后时底部会留白(有多余空间)如何处理 ...
CSS3动画demmo和Vue轮播图
demo1:自动旋转的图片. <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
jQuery和CSS3商品图片预览轮播图插件
这是一款非常实用的 jQuery和 CSS3创意商品图片预览轮播图插件.该轮播图插件以每个商品作为一个轮播图,用户可以在每个商品缩略图中查看该商品的颜色和款式.一般的商务网站都是通过图片来吸引用户, ...

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

css通知页面,CSS3 transition 实现通知消息轮播条相关推荐

最新文章

热门文章