background属性:
backgroundImage: "url(data:.....(base64地址))",
backgroundSize: "100% 80%",
backgroundPosition: "0 9px"
图片呼吸效果:
animation: 1000ms linear 0ms infinite normal none running pulse;
上下浮动效果:
.float-anime-up{
animation: floatAnimeup 4s linear infinite;
}
@keyframes floatAnimeup{
0% {
transform : translateY(0);
}
25% {
transform : translateY(10%);
}
50% {
transform : translateY(0);
}
75% {
transform : translateY(-10%);
}
100% {
transform : translateY(0);
}
}
css图片一亮一暗:
.breath{
animation: blink 2s linear infinite;
}
@keyframes blink {
from { opacity: 0.1; } /* 动画开始时的不透明度 */
50% { opacity: 1; } /* 动画50% 时的不透明度 */
to { opacity: 0.1; } /* 动画结束时的不透明度 */
}
反正常用的就那3个 自适应 拉伸 剪裁
自适应。有黑边
剪裁 有滚动条
拉伸 会变形
字体:
font-family: PangMenZhengDaoBiaoTi;
文字溢出显示省略号:
width:180px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
设置文字发光效果:
text-shadow: 0px 0px 10px #fff;
画一条渐变线,注意不要用border边框去画,这样不会有渐变效果,直接给span一个高度就可以画出渐变线:
<span style='dispaly:inline-block;width:${jinduTwo}px;height:4px;position:absolute;border-radius:5px;left:150px;top:32px;background: linear-gradient(90deg, #FF1D2D,#FF654C,#FFFFFF);'></span>
vedio标签:
<video autoplay="autoplay" loop="loop" data-v-1f96acf7="" id="video_d5212a20-94c6-11ee-b7e4-9b8d5192308d" src="${vedio}" emptytext="" volume="1">
您的浏览器不支持 HTML5 video 标签
</video>
子级文字水平居中,垂直居中,在父级元素使用text-align和line-height
<div style='width: 69px;height: 80px;border: 1px solid;order-image: linear-gradient(45deg, #0084FF, #FFFFFF) 10 10;background: linear-gradient(45deg, #0084FF 0%);z-index:999;background-color: #0084FF; position:absolute;bottom:0px;text-align:center;line-height:80px;'>
<span style='font-size: 36px;font-family: PangMenZhengDaoBiaoTi;background: linear-gradient(0deg, #00E4FF 0%, #EFFDFF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;'>aaa</span>
</div>
最简单的echars结构:
let arr = data.data
let datas = []
arr.forEach(x=>{
datas.push({
"series": "系列A",
"name": x.name,
"value": Math.random()* 300
})
})
return {
data:datas,
option:{
yAxis: {
max: 500
},
}}
鼠标移动到文本上显示文本:
title="${"yss3006log"}"
标题名超出长度滚动:
视频控件在自定义展板无法固定宽度的问题:
object-fit: fill; 样式可以解决这个问题
<video style='width:100%;height:83%; object-fit: fill;' autoplay loop data-v-1f96acf7="" id="video_d5212a20-94c6-11ee-b7e4-9b8d5192308d" src="" emptytext="" volume="1">
您的浏览器不支持 HTML5 video 标签
</video>
画一条有间隔的线:
.dashed-line {
width: 300px;
height: 4px;
background: repeating-linear-gradient(90deg, #f00, #3498db 5px, transparent 5px, transparent 10px);
}
我们使用repeating-linear-gradient创建了一条水平方向的间隔线,颜色从#f00渐变到#3498db,每个线段的长度为5px,每个间隔的长度也为5px,每个间隔10像素
内容竖直展示:
writing-mode:vertical-rl;
div水平居中