css和效果实现

帆About 23 min

date: 2022-01-02 category:

  • css tag:
  • css
  • less
  • scss star: true

css和效果实现

grid布局

Grid网格布局实例 - 掘金 (juejin.cn)open in new window

CSS Grid 网格布局教程 - 阮一峰的网络日志 (ruanyifeng.com)open in new window

grid布局调试：[CSS Grid Generator (cssgrid-generator.netlify.app)open in new window

grid - CSS：层叠样式表 | MDN (mozilla.org)open in new window

CSS 网格布局 | 菜鸟教程 (runoob.com)open in new window

基本使用

画出一个3行，2列的表格布局，间隙为 10px;

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

grid布局一行代码响应式（minmax规定响应式的范围）

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

grid布局居中

.container{
  display: grid;
  place-content: center;
}

容器内一个项目占用多行或多列（容器内部 项目加属性）

//grid-row     是 grid-row-start 和 grid-row-end 属性的简写属性。
//grid-column  是 grid-column-start 和 grid-column-end 属性的简写属性。

.center{
  //  从第一个网格线到第三个网格线，占据两个网格的大小
  grid-row: 1/3;
  grid-column: 1/3;
}

.center{
  //  从第一个网格开始，占据三个网格的大小  关键字 "span" 来定义元素将跨越的行数
  grid-row: 1/span 3;
  grid-column: 1/span 3;
}

css特殊效果

毛玻璃效果

backdrop-filter: blur(6px);

毛玻璃生成网站Glassmorphism CSS Generator | SquarePlanet | SquarePlanet (hype4.academy)open in new window

多边形生成

Clippy — CSS clip-path 生成器 (jiangweishan.com)open in new window

动态背景生成

https://wweb.dev/resources/animated-css-background-generatoropen in new window

input样式修改

<input placeholder-style="color: #dfdfdf"  class="input" type="text" placeholder="请输入账号" maxlength="30" />

<style>
        .input {
		  &:focus{
		  // 聚焦时不显示外边框
			  outline: none;
		  }
		  // 修改 placeholder 的样式
		  &::placeholder {
				color: #dfdfdf;
			}
        }
</style>

文字溢出省略号

文字单行溢出:

overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
white-space: nowrap; // 规定段落中的文本不进行换行

多行文字溢出:

overflow: hidden;      // 溢出隐藏  
text-overflow: ellipsis;   // 溢出用省略号显示    
display:-webkit-box;     // 作为弹性伸缩盒子模型显示。    
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列   
-webkit-line-clamp:3;    // 显示的行数

JS如何判断文字被ellipsis了？ 微信公众平台 (qq.com)open in new window

CSS定制多行省略:https://hai.li/2017/03/08/css-multiline-overflow-ellipsis.htmlopen in new window

文字竖着排列

[html div文字竖向显示,css怎么让文字竖着？-CSDN博客](https://blog.csdn.net/weixin_29731589/article/details/117890453#:~:text=css设置文字竖着排列的方法：1、writing-modeopen in new window (设置对象书写方向)语法：writing-mode,%3A lr-tb、tb-rl参数：lr-tb：从左向右，从上往下 　tb-rl：从上往下，从右向左示例：css代码：di..._div文字竖排)

div { writing-mode: tb-rl; }

html文本自动换行

  • word-wrap: break-word; ：当单词太长超出容器宽度时，强制换行，将单词拆分成多行显示。
  • white-space: pre-wrap; ：保留空白符，自动换行。

页面平滑滚动

scroll-behavior： smooth

css变量

CSS变量又称CSS自定义属性，通过在css中自定义属性--var与函数var()组成，var()用于引用自定义属性。谈到为何会在CSS中使用变量，以下使用一个示例讲述。

:root {
 --c-color: orange;
}
.title {
 background-color: var(--c-color);
}

css文字分散对齐

text-align-last:justify

css画三角形（多边形）

// 根据对border-color的修改来实现三角形 transparent可用于表示背景透明

width: 0;
height: 0;
border: 50px solid;
border-color: transparent transparent orangered transparent;

CSS clip-path 生成器(多边形) Clippy — CSS clip-path 生成器 (jiangweishan.com)open in new window

边框样式

CSS给元素添加边框（样式、颜色、宽度）_css加边框-CSDN博客open in new window

css阴影

box-shadow: 10px 10px 5px #888888;
box-shadow:0 16px 60px rgba(111, 126 ,206 , 17%);
// 第一个参数是x轴偏移量  第二个参数是y轴偏移量 第三个参数是模糊距离 第四个参数是阴影颜色
//  偏移量可以为0， 也可以是负数，负数代表反方向 
box-shadow: 0px 10px 5px #888888, -10px 10px 5px #888888;
// 设置多个阴影用 , 隔开

box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

 box-shadow:0 5px 12px 0 #E7E9EC;  （类似el-card的阴影）

css实现鼠标选中字体，字体样式改变

这个可以用::selection来实现

<p>这个是一段文字</p>

p::selection{
  color:red     
  //文字选中时改变的样式
}

css实现渐变色边框

https://juejin.cn/post/7017701121619656711open in new window

 border-top: 3px solid #55BEFB;
 border-image: linear-gradient(to right,#54BEFB,#289a47,#e74032,#68217a,#5197dd) 1;

图像填充文本

h6{
  background-image: url('images/dog.jpg');
  background-clip: text;
  color: transparent;
  background-color: red;
}

css实现渐变色 彩色字体

<div style="width:100px;height:30px;font-size:20px;font-weight:bold;background:linear-gradient(to right,#289a47,#e74032,#fcc522,#68217a,#5197dd);-webkit-background-clip: text;color:transparent">
        彩色字体
    </div>

div{
	background:linear-gradient(to right,#289a47,#e74032,#fcc522,#68217a,#5197dd);
    -webkit-background-clip: text;  //  -webkit-  要带上，否则会有兼容问题
    color:transparent
}

CSS 两行文字两端对齐与字符间距的处理 (qq.com)open in new window

渐变字体被text-shadow遮挡问题:

 .top-title {

          font-family: HYYakuHei;
          font-size: 70px;
          text-align: center;
          letter-spacing: 0em;

          background: linear-gradient(180deg, #FFFFFF 44%, #95BFFF 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          text-fill-color: transparent;
          // text-shadow: 0px 4px 0px #1147A8;
		  // text-shadow放到伪元素上,  content 是变色文字
          &::before {
            content: "haohaohao";
            position: absolute;
            color: transparent;
            text-shadow: 0px 4px 0px #1147A8;
            z-index: -1;
          }
        }

为文本添加描边效果

 -webkit-text-stroke: 5px crimson;
 // 使用text-stroke属性可以使文本更清晰可见，因为会向文本添加描边笔触或轮廓。
  text-stroke: 5px crimson;

渐变

渐变分为线性渐变、 径向渐变 ，在使用线性渐变的时候，使用角度以及百分比去控制渐变，会更加的灵活

线性渐变使用方式:

background: linear-gradient（）用于设置线性渐变 （Linear Gradients）- 向下/向上/向左/向右/对角方向

括号内容（方向，颜色1，颜色2，颜色3......）

方向可以是 to left, to right, to bottom right 等，也可以是角度 0deg, 90deg等。

颜色可以设置多个，支持设置透明度。

//渐变(方向)
background: linear-gradient(to right, rgba(255, 255, 255, 0),#3FB6F7,rgba(255,255,255,0));

//渐变(角度)
background: linear-gradient(88deg, #4DF7BF 0%, rgba(77, 247, 191, 0.26) 12%, rgba(77, 247, 191, 0) 100%);

边框渐变:

border有个border-image的属性，类似background也有个background-image一样,通过为其设置渐变颜色后，实现的渐变，后面的数字4为x方向偏移量

使用方式:

.border-grident{
  margin-top: 20px;
  width: 200px;
  height: 200px;
  border: 4px solid;
  border-image: linear-gradient(to right, #8f41e9, #578aef) 4;
}

径向渐变使用方式

background-image: radial-gradient() 用于设置径向渐变 （Radial Gradients）- 由它们的中心定义

括号内容（shape size at position, start-color, ..., last-color）

background-image: radial-gradient(red 5%, yellow 15%, green 60%);

颜色后加上百分比 颜色节点不均匀分布

shape设置形状

background-image: radial-gradient(circle, red, yellow, green);

形状设置的circle,呈圆形渐变

size 参数定义了渐变的大小。它可以是以下四个值：

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

at position设置中心位置

background-image: radial-gradient(closest-side at 50% 50%, red, yellow, black);

css3 2D 转换

transform

translate() 方法 用于平面移动位置

transform: translate(50px,100px); 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

其中50px是距离左边的大小，100px是距离右边的大小，（只有两个参数）

rotate() 方法 用于平面旋转

transform: rotate(30deg); 在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

30deg是旋转的角度（只有一个参数）

scale() 方法 用于元素放大或缩小

transform: scale(2,3); /* 标准语法 */ 增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

其中的2代表的是横向变化的倍数，3代表纵向变化的倍数

skew() 方法 用于元素的倾斜

transform:skew(<angle> [,<angle>]);

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

1 skewX();表示只在X轴(水平方向)倾斜。

2 skewY();表示只在Y轴(垂直方向)倾斜。

transform: skew(30deg,20deg); 元素在 X 轴和 Y 轴上倾斜 20 度 30 度。

matrix() 方法 2D变换方法合并成一个

有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

transform:matrix(0.866,0.5,-0.5,0.866,0,0);

css 3D 转换

rotateX() 围绕其在一个给定度数X轴旋转的元素。

transform: rotateX(120deg); 沿着x轴转动120度

rotateY() 围绕其在一个给定度数Y轴旋转的元素。

transform: rotateY(120deg); 沿着y轴转动120度

css3 过渡

transitionopen in new window简写属性，用于在一个属性中设置四个过渡属性。3
transition-propertyopen in new window规定应用过渡的 CSS 属性的名称。3
transition-durationopen in new window定义过渡效果花费的时间。默认是 0。3
transition-timing-functionopen in new window规定过渡效果的时间曲线。默认是 "ease"。3
transition-delayopen in new window规定过渡效果何时开始。默认是 0。3

transition-property: width;

transition-duration: 1s;

transition-timing-function: linear;

transition-delay: 2s;

等效于

transition: width 1s linear 2s;

transition-timing-function的可取值如下表所示

值描述
linear规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

CSS3 动画

属性描述CSS
@keyframesopen in new window规定动画。3
animationopen in new window所有动画属性的简写属性。3
animation-nameopen in new window规定 @keyframes 动画的名称。3
animation-durationopen in new window规定动画完成一个周期所花费的秒或毫秒。默认是 0。3
animation-timing-functionopen in new window规定动画的速度曲线。默认是 "ease"。3
animation-fill-modeopen in new window规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。3
animation-delayopen in new window规定动画何时开始。默认是 0。3
animation-iteration-countopen in new window规定动画被播放的次数。默认是 1。3
animation-directionopen in new window规定动画是否在下一周期逆向地播放。默认是 "normal"。3
animation-play-stateopen in new window规定动画是否正在运行或暂停。默认是 "running"。3
// 以下是最通常的用法

div{
    animation: myName 5s;
    //  myName 指的是@keyframes后面的名字   5s指的是动画持续的事件
}

@keyframes myfirst
{
    from {background: red;}    // 从什么样式开始
    to {background: yellow;}   //  到什么样式结束
}
@keyframes myfirst
{
    0% {background: red;}    
    25% {background: yellow;} 
    50% {background: yellow;}  
    75% {background: yellow;}  
    100% {background: yellow;}  
    //  用百分比表示动画运行到百分比时间时的样式
}

animation-timing-function:linear;

animation-timing-function使用的数学函数，称为三次贝塞尔曲线，速度曲线。使用此函数，您可以使用您自己的值，或使用预先定义的值之一：

值描述测试
linear动画从头到尾的速度是相同的。测试open in new window
ease默认。动画以低速开始，然后加快，在结束前变慢。测试open in new window
ease-in动画以低速开始。测试open in new window
ease-out动画以低速结束。测试open in new window
ease-in-out动画以低速开始和结束。测试open in new window
steps(int,start|end)指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。 第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。含义分别如下：start：表示直接开始。end：默认值，表示戛然而止。
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

background-size：cover和contain以及100%**

contain:图片放大至满足背景区域的最小边即止，当背景区域与背景图片的宽高比不一致的情况下，背景区域可能会长边下有空白覆盖不全。cover:图片放大至能满足最大变时为止，当背景区域与背景图片的宽高比不一致时，背景图片会在短边下有裁切，显示不全。

百分比:可以设置两个值

  • 第一个设置宽度，第二个设置高度

  • 如果只设置了一个值，那么第二个值默认会被设置为auto

    body {
    /* 加载背景图 */
    background-image: url(images/bg.jpg);
    /* 背景图垂直、水平均居中 */
    background-position: center center;
    /* 背景图不平铺 */
    background-repeat: no-repeat;
    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
    background-attachment: fixed;
    /* 让背景图基于容器大小伸缩 */
    background-size: cover;
    /* 设置背景颜色，背景图加载过程中会显示背景色 */
    background-color: #464646;
    
    
     background-image: url(/static/background.png);
  background-repeat: no-repeat;
  background-position-x: 0;
  background-position-y: 0;
  background-size: 100% auto;
}

组件库样式修改的方式:

样式穿透

vue项目中，在修改elementui的样式时通常使用样式穿透，style使用css的预处理器(less, sass, scss)等， 即

<style lang="less" scoped>
</style>

主要的样式穿透如下

1. >>>
适用与 css、stylus，不太推荐，可能会有问题
外层类 >>> 想要修改类名 {
修改样式
}

2. /deep/
适用于 scss、less
外层类 /deep/ 想要修改类名 {
修改样式
}

3. ::v-deep
通用，据说可以加快编译速度
::deep 想要修改类名 {
修改样式
}

4  Vue3的 :deep()伪类

the ＞＞＞ and /deep/ combinators have been deprecated. Use :deep() instead终端报该警告的解决办法_霜雪遥的博客-CSDN博客open in new window (警告不影响正常运行)

使用样式穿透还是无效

有时会发现使用了以上方法修改 element 组件样式还是会不生效，对于这种情况可以重写一个style标签，在style标签里对需要穿透的样式进行修改

<a-input class="search-out" allow-clear />

<style lang="less" scoped>
</style>
<style lang="less">
   // 对于组件年内样式穿透不生效的，去掉scoped
   .search-out{
    .ant-input{
        border: 0px ;
        border-radius: 8px;

    }

    .ant-select-selection{
        border: 0px ;
        border-radius: 8px;
    }

}
</style>

el-cascader-panel修改样式

<style lang="less">
.el-cascader-node__label {
    color: #2e65fd;
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #2e65fd;
    border-color: #2e65fd;
}

css 改变网页的滚动条样式

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  background-color: #f5f5f5;
  width: 5px;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background-color: #f5f5f5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px 6px rgba(0, 0, 0, 0.3);
  background-color: #ddd;
}

css-滚动但不显示滚动条的两种写法_css不显示滚动条但可以滚动_永远不会太晚的博客-CSDN博客open in new window

不显示滚动条

::-webkit-scrollbar {
        width: 0px;
    }

https://www.php.cn/faq/477233.htmlopen in new window

::-webkit-scrollbar {display:none}

裁剪的3种方式，CSS 如何隐藏移动端的滚动条？ (qq.com)open in new window

vue 项目引入animate.css

Animate.css | A cross-browser library of CSS animations.open in new window

npm install animate.css --save

main.js(全局引入，也可局部页面引入)

import animate from "animate.css";

Vue.use(animate)

在需要动画的页面加入相关类名

class里面要加入animate__animated，否则样式可能不生效，样式效果参考官网

animate__animated 中间有两条下划线（注意）

<div  class="animate__animated animate__bounce ">  bounce 动画</div>

Vue通过事件修改dom的样式

<div ref="animate" >  123456 </div>
<div @click="changeColor">改变颜色</div>

changeColor(){
  this.$refs.animate.style.color="red"   //  修改style样式
  this.$refs.animate.className="reds"    //  修改类名
}

<style>
.reds{
  color:red
}
</style>

css 字体

下载字体文件如： --.ttf , --.otf ， 优设标题黑.ttf

@font-face 设置字体名，引入字体文件， 类名引用font-family

@font-face {

  font-family:"YouSheBiaoTiHei";

  src:url("../font/优设标题黑.ttf")

}

.font{
	font-family: YouSheBiaoTiHei;
}

编辑器格式报红：Unexpected missing generic font family

解决： stylelint检查报错：Unexpected missing generic font family font-family-no-missing-generic-family-keyword-CSDN博客open in new window

/* 一个字体族名和一个通用字体族名 */
font-family: "Gill Sans Extrabold", sans-serif;

阿里巴巴图标库

iconfont-阿里巴巴矢量图标库open in new window

**推荐使用svg引入，能够保全图标的颜色，但svg兼容性不如另外的引入方式。**使用另两种可能图标颜色失效。（Unicode 引用和font class 引入的 iconfont 基础样式一定要有，否则不生效）每次增加或删除图标时，记得及时更新css代码

Unicode 引用

复制代码到 iconfont.css 文件，加入icontfont 类样式，否则图标显示不出来 index页面引入

css代码内要补齐路径的协议名，否则可能不生效，类似

@font-face {
  font-family: "iconfont"; /* Project id 3282941 */
  src: url('//at.alicdn.com/t/c/font_3282941_jbr83zz08v.woff2?t=1673325748491') format('woff2'),
       url('//at.alicdn.com/t/c/font_3282941_jbr83zz08v.woff?t=1673325748491') format('woff'),
       url('//at.alicdn.com/t/c/font_3282941_jbr83zz08v.ttf?t=1673325748491') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

的要补齐url路径，如下：

@font-face {
    font-family: 'iconfont';
    src: url('https://at.alicdn.com/t/c/font_3282941_jbr83zz08v.woff2?t=1673325748491') format('woff2'),
        url('https://at.alicdn.com/t/c/font_3282941_jbr83zz08v.woff?t=1673325748491') format('woff'),
        url('https://at.alicdn.com/t/c/font_3282941_jbr83zz08v.ttf?t=1673325748491') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

<link rel="stylesheet" href="./iconfont.css">

span标签内容从网页中图标处复制

<span class="iconfont">&#xe66c;</span>

font class 引入

打开font class页面，复制代码到 iconfont.css 文件，index页面引入

注意复制的css代码补如上 Unicode 引用 要补齐协议名，否则可能不生效

<link rel="stylesheet" href="./iconfont.css">

如下使用图标：

<span class="iconfont icon-xxx"></span>

svg引入

打开代码页，复制代码到 svg.js 文件，index页面引入js文件

<script src="./svg.js"></script>

加入通用 CSS 的icon样式代码（引入一次就行）：

<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

svg标签使用

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

单个图标引入（svg）

点击图标下载按钮，复制svg代码，新建 icon.svg 文件，粘贴代码

index页面，使用 img 标签引入svg文件即可

<img src="./gpu.svg" />

下载后引入

下载时，点项目设置，字体格式要勾选 base64，

将下载后的css文件引入到要用的页面里，如上设置图标即可

<span class="iconfont icon-***"></span>

css跑马灯效果(图片跑马灯和文字跑马灯)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css try</title>
    <style>
        .box {
            /* 我们不想看到超出盒子范围的图片，因此需要overflow：hidden；进行隐藏 */
            overflow: hidden;
            /* 子绝父相，对div盒子设置相对定位 */
            position: relative;
            /*设置可见部分长度*/
            width: 800px;
            height: 150px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        
        .box:hover ul {
            /* 当鼠标放在图片上的时候能够暂停动画 */
            animation-play-state: paused;
        }
        
        ul {
            position: absolute;
            top: 0;
            left: 0;
             /*width设置所有图片加在一起的长度*/
            width: 2600px;
            height: 150px;
            animation: run 5s infinite linear;
        }
        
        li {
            float: left;
            width: 200px;
            height: 150px;
            list-style: none;
        }
        
        img {
            /* 设置一张图片的宽度高度 */
            width: 200px;
            height: 150px;
        }
        
        @keyframes run {
            0% {
                transform: translate(0);
            }
            100% {
                /* 轮播宽度还是按照原来的9张图片进行设置 这样在播完9张图片后就会跳转回第一张*/
                transform: translate(-1800px);
            }
        }
        
        #box2 {
            border: 1px solid #eee;
            overflow: hidden;
            width: 400px;
            height: 100px;
            border: 1px solid skyblue;
            margin: 100px auto;
            color: red
        }
        
        @keyframes moving {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(calc(400px - 100%));
            }
        }
        
        .text {
            display: inline-block;
            min-width: 100%;
            white-space: nowrap;
            animation: moving 15s infinite;
            animation-direction: alternate;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <img src="./images/dot.png" />
            </li>
            <li>
                <img src="./images/dot.png" />
            </li>
            <li>
                <img src="./images/dot.png" />
            </li>
            <li>
                <img src="./images/dot.png" />
            </li>
            <li>
                <img src="./images/favicon.ico" />
            </li>
            <li>
                <img src="./images/favicon.ico" />
            </li>
            <li>
                <img src="./images/favicon.ico" />
            </li>
            <li>
                <img src="./images/favicon.ico" />
            </li>
            <li>
                <img src="./images/favicon.ico" />
            </li>
            <!-- 解决滚动问题的关键在于在最后加四张图片 使末尾留白有内容 -->
            <li>
                <img src="./images/dot.png" />
            </li>
            <li>
                <img src="./images/dot.png" />
            </li>
            <li>
                <img src="./images/dot.png" />
            </li>
            <li>
                <img src="./images/dot.png" />
            </li>
            <!-- 将末尾四张图换成一样的就能理解原理 -->
        </ul>
    </div>
     <!-- 文字跑马灯 -->
    <div id="box2">
        <div class="text">张三李斯王二麻子张三李斯王二麻子张三李斯王二麻子张三李斯王二麻子张三李斯王二麻子张三李斯王二麻子张三李斯王二麻子张三李斯王二麻子</div>
    </div>
</body>

</html>

文字底下加下滑线的样式

通过::before实现

//  底下下滑线样式
 .work-active{
        // border-bottom:5px solid #00d5a6;
        // font-weight:600
        &::before {
          position: absolute;
          width: 75px;
          content: '';
          height: 6px;
          border-radius: 3px;
          bottom: 5px;
          background: linear-gradient(90deg, #00d793, #00cee0);
        }
      }

通过::before ::after实现 左右底下都有下划线

底部 底下下滑线样式
<div class="title-line-index" >
    <span class="title-index " >智能推荐</span>
    <span  class="more-index ">more>></span>
</div>

.title-line-index {
  padding: 10px 20px 15px 20px;
  display: flex;
  justify-content: space-between;
  color: #a1a1a1;
  position: relative;
  margin-bottom: 10px;

  .title-index {
    font-size: 18px;
    color: #000;
    font-weight: bold;
    display: flex;
    align-items: center;
  }

  .more-index {
    cursor: pointer;
  }

  &::before {
    position: absolute;
    width: 90px;
    content: '';
    height: 6px;
    border-radius: 3px;
    bottom: 0px;
    background: linear-gradient(90deg, #00d793, #00cee0);
    z-index: 2;
  }

  &::after {
    position: absolute;
    width: calc(100% - 30px);
    content: '';
    height: 6px;
    border-radius: 3px;
    bottom: 0px;
    background: #f2f9f8;
    z-index: 1;
  }
}

实现页脚始终在页面底部

css让页脚保持在底部位置的四种方案_CSS教程_CSS_网页制作_脚本之家 (jb51.net)open in new window

<div class="all-container">
	<div class="footers" style="height:430px"></div>
</div>

<style>
.all-container{
  background:#f3f5f9;
  min-height:100vh;
  position:relative;
  padding-bottom:430px;  
}
.footers{
  position:absolute;
  width:100%;bottom:0;
}
</style>

实现页面元素滚动到一定位置后的吸顶效果

1 position:sticky （简单方便，优先使用）

position:sticky可以在页面滚动到父元素的边缘的时候实现吸顶效果（父元素在屏幕上可以看见，只在父元素内才能生效）

2.使用js判断滚动距离，再用fixed定位

<template>
  <div class="nav-sub ">
          <div :class="fixed == true ? 'fixed' : ''">
            滚动内容</active-btn
          >
 </div>
</template>

<script>
export default {
  data () {
    return { fixed: false }
  },
  mounted () {
    window.addEventListener('scroll', this.fixedActiveBtn)
  },
  methods: {
    fixedActiveBtn () {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      scrollTop >= 120 ? (this.fixed = true) : (this.fixed = false)
    }
  }
}
</script>

<style scoped>
.nav-sub {
  position: relative;
  top:0;
  height: 90px;
  // position: sticky;
}
.fixed {
  position: fixed;
  z-index: 10;
  top: 0;
}

</style>

// 原文链接：https://blog.csdn.net/weixin_45957275/article/details/120842008

css实现聊天对话框

css实现聊天对话框 - 掘金 (juejin.cn)open in new window

卡片悬浮发光

Vue3 实现最近很火的酷炫功能：卡片悬浮发光 (qq.com) 实测可用，若没有使用ts，需要删除类型相关代码open in new window

特殊效果（非必须css实现）

为什么ChatGPT采用SSE协议而不是Websocket？ (qq.com)open in new window

类似chatGpt那种内容一个一个输出

ai生成的讲解

ChatGPT的逐字逐行回答效果是通过一种称为Server-Sent Events (SSE)的技术实现的。SSE是一种允许服务器主动向客户端推送数据的HTTP技术，它基于HTTP协议，但与WebSocket不同，SSE仅支持单向通信，即服务器向客户端推送消息，客户端不能主动向服务器发送消息。

在ChatGPT中，当用户输入内容后，服务器会开始处理请求，并在生成回答的过程中，逐步将生成的内容通过SSE推送给客户端。这样，客户端可以实时接收到服务器发送的文本片段，从而实现逐字逐行展示的效果。这种流式传输方式提高了用户体验，使得对话看起来更像是实时的、自然的对话。

实现这一功能的关键步骤通常包括：

  1. 客户端请求：客户端（如Web浏览器）通过HTTP GET请求向服务器发起请求，请求包含SSE支持的头部信息，如Accept: text/event-stream。
  2. 服务器处理：服务器接收到请求后，开始处理用户的输入，并调用ChatGPT模型生成回答。在生成过程中，服务器会将每个生成的文本片段作为SSE事件发送回客户端。
  3. 流式传输：服务器通过设置HTTP响应头，如Content-Type: text/event-stream和Connection: keep-alive，来维持长连接，并持续推送数据。每个数据片段前会有一个特殊的data:前缀。
  4. 客户端接收与展示：客户端使用EventSource对象监听服务器的SSE流。每当接收到新的数据时，EventSource会触发message事件，客户端的JavaScript代码会解析这些数据，并将其逐字逐行显示在页面上。

这种实现方式使得ChatGPT能够模拟出类似人类打字的交互体验，增强了对话的自然感和参与感。

代码示例：

node 服务器生成后台简易代码：

npm init -> npm install express sse cors

在Node.js中，要实现SSE，你需要手动处理HTTP响应流，并在数据准备好时写入响应流。

const http = require('http');
const cors = require('cors');     // 用于解决本地浏览器跨域的问题
const port = 3000;

const server = http.createServer((req, res) => {
  // 使用cors中间件处理CORS
  cors()(req, res, () => {
    // 检查请求的路径和方法
    if (req.url === '/chat' && req.method === 'GET') {
      // 设置响应头
      res.writeHead(200, {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive'
      });

      // 模拟ChatGPT的响应
      let response = "Hello, I'm a chatbot. How can I help you?";
      let index = 0;

      // 发送数据
      function sendChunk() {
        if (index < response.length) {
          const chunk = response.slice(index, index + 1);
          index++;
          res.write(`data: ${chunk}\n\n`);
          // 如果是最后一个字符，结束响应并关闭连接
          if (index === response.length) {
            res.end();
            return;
          }
          // 继续发送下一个字符
          setTimeout(sendChunk, 100); // 每100毫秒发送一次
        }
      }

      // 立即开始发送第一个字符
      sendChunk();
    } else {
      // 如果不是SSE请求，返回404
      res.writeHead(404);
      res.end();
    }
  });
});

server.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

index.html 展示文字生成

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SSE Chat</title>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 定义一个变量来存储EventSource对象
    var eventSource;

    // 点击按钮时触发的函数
    function startChat() {
      // 关闭之前可能存在的连接
      if (eventSource) {
        eventSource.close();
      }

      // 创建新的EventSource对象
      eventSource = new EventSource('http://localhost:3000/chat');

      // 当连接打开时触发
      eventSource.onopen = function(event) {
        console.log('Connection opened.');
      };

      // 当接收到消息时触发
      eventSource.onmessage = function(event) {
        var data = event.data;
        document.getElementById('chatOutput').innerHTML += data;
      };

      // 当出现错误时触发
      eventSource.onerror = function(event) {
        console.error('EventSource failed:', event);
        eventSource.close();
      };
    }

    // 获取按钮元素并绑定点击事件
    var chatButton = document.getElementById('startChatButton');
    chatButton.addEventListener('click', startChat);
  });
</script>
</head>
<body>
  <button id="startChatButton">Start Chat</button>
  <div id="chatOutput"></div>
</body>
</html>
Loading...
Default footer
Copyright © 2024 帆