u盘内容防复制-魔兽字体修改器
2023年4月4日发(作者：360安全浏览器首页)
微信⼩程序--基于CSS3animation，公告类滚动-可配置组件
组件调⽤：
滚动组件：
结构
Content}}
样式：
.notice-content{
overflow:hidden;
position:relative;
height:61rpx;
margin-left:10rpx
}
.notice-text{
font-size:28rpx;
line-height:61rpx;
position:absolute;
color:#ffa321;
white-space:nowrap;
animation-name:around;
animation-duration:var(--duration--);/*过渡时间*/
animation-iteration-count:infinite;
animation-timing-function:linear;
}
@keyframesaround{
0%{
left:var(--left--);
}
100%{
left:var(--countWidth--);
}
}
js：
Component({
/**
*组件的属性列表
*
*comTipsOpts：{
*tipsContent需要展⽰的⽂案--必传
*speedFactor速度系数（⽂案length*系数=播放速度）
*clientwidth视⼝宽度（rpx）
*fontSize字体⼤⼩（rpx）
*}
*/
properties:{
comTipsOpts:{
type:Object,
default:{
tipsContent:"微信⼩程序--基于CSS3animation，公告类滚动-可配置组件",
speedFactor:0.45,
clientwidth:700,
fontSize:24
}
}
},
/**
*组件的初始数据
*组件的初始数据
*/
data:{
tipsWidth:"",
speed:20,
clientwidth:""
},
attached(){
letfontLength=("").length
a({
tipsWidth:fontLength*ze,
speed:fontLength*actor,
clientwidth:width
})
(ntent)
},
})
更多推荐
css3animation
发布评论