易视界常用css

weixin_39030846

已于 2023-12-14 15:02:20 修改

阅读量71

点赞数

分类专栏： css 文章标签： css

于 2023-11-01 11:04:42 首次发布

本文链接：https://blog.csdn.net/weixin_39030846/article/details/134157044

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了CSS中的各种特效技巧，如背景图片、动画、自适应布局、字体样式、文本处理、HTML5video的使用以及一些高级CSS3功能，如渐变线和鼠标悬停效果。

摘要由CSDN通过智能技术生成

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);
    }