【css】常用样式

一、＜a＞下划线动画

a {
  text-decoration: none;
  position: relative; /* 用于定位伪元素 */
  display: inline-block; /* 使得伪元素可以正确地跟随文本内容 */
}
/* 使用伪元素来模拟下划线 */
a::after {
  content: "";
  position: absolute;
  left: 100px; /* 初始位置在文本左侧之外 */
  bottom: 30px; /* 下划线距离文本底部的位置 */
  width: 0; /* 初始宽度为0 */
  height: 3px; /* 下划线的粗细 */
  background-color: #eed03b; /* 下划线的颜色 */
  transition: width 0.3s ease; /* 过渡效果用于宽度变化 */
  /* 初始时不需要opacity过渡，因为我们要用动画 */
}
/* 鼠标悬停时触发动画 */
a:hover::after {
  animation: underline-animation 0.5s forwards; /* 应用动画并停留在最后一帧 */
}
/* 定义动画 */
@keyframes underline-animation {
  0% {
    left: 0; /* 动画开始时，下划线在文本左侧之外 */
    width: 0; /* 宽度为0 */
  }
  100% {
    left: 0; /* 动画结束时，下划线在文本左侧 */
    width: 100%; /* 宽度为文本宽度的100% */
  }
}

二、图片上滑动画

.r_image {
  max-width: calc(33.33% - 10px);
  margin-right: 10px;
  transition: transform .2s; /* 定义过渡效果 */
  opacity: 0; /* 初始时图片不可见 */
  animation-name: fadeUp; /* 应用动画 */
  animation-duration: 1s; /* 动画持续时间 */
  animation-fill-mode: forwards; /* 保持动画结束时的状态 */
}
.r_image:hover {
  transform: scale(1.1); /* 鼠标悬停时放大图片 */
}
/* 为每张图片定义不同的动画延迟 */
.r_image:nth-child(1) {
  animation-delay: 1s; /* 第一张图片立即开始动画 */
}
.r_image:nth-child(2) {
  animation-delay: 2s; /* 第二张图片在1秒后开始动画 */
}
.r_image:nth-child(3) {
  animation-delay: 3s; /* 第三张图片在2秒后开始动画 */
}

/* 定义淡入上滑的动画 */
@keyframes fadeUp {
  0% {
    transform: translateY(20px); /* 初始时图片上滑一点，隐藏在下方 */
    opacity: 0; /* 图片不可见 */
  }
  100% {
    transform: translateY(0); /* 动画结束时图片回到原位 */
    opacity: 1; /* 图片完全可见 */
  }
}

常用样式
overflow: hidden; /* 隐藏超出容器的部分 */
object-fit: cover; /* 保持图片的宽高比，同时填充容器 */
background-color: transparent;/* 设置元素背景颜色透明 */
cursor: pointer; /* 鼠标悬停时变为可点击状态，小手形状 */
opacity: 0.5; /* 透明度 0为完全透明，1为完全显示，0.5为半透明*/
transition: opacity 0.3s ease; /* 平滑的透明度过渡效果 */
transition: all 0.7s ease; /* 添加过渡效果以便背景变化更平滑 */
position: fixed;固定元素在原位置，一般用于首页导航固定，再配合z-index: 1; 确保它显示在 carousel 之上 ，可配合top和right调依据窗口的位置，不依赖任何元素
border-radius: 50%; /* 圆形边框 用来画圆 */
filter: blur(10px); /* 初始时带有模糊效果 ，blur(0)清除模糊*/
width: 100vw; /* 宽度等于视口宽度 */
height: 100vh;/* 宽度等于视口高度 */
background-size: cover;/* 确保背景图片覆盖整个元素 */
background-repeat: no-repeat; 图像不会重复
background-size: cover; 设置背景图像的大小。cover 值意味着背景图像将被缩放以完全覆盖元素的整个内容区域
background-position: center center;这个属性用于设置背景图像的初始位置。center 值意味着图像将被放置在元素的水平和垂直中心
background-attachment: fixed; /* 背景图片固定，不随页面滚动 */
box-shadow: 0 0 20px rgba(0, 0, 0, 10);/*外边阴影*/
background: linear-gradient(to bottom, rgba(0, 0, 0, 10), rgba(0, 0, 0, 0));/*背景颜色渐变*/
text-decoration: none; /* 移除默认下划线 */
font-weight: bold; /* 字体变粗 */
filter: brightness(80%);/* 亮度设置 */
==============================
关于位置：
居中的几种方式：
块级元素居中 margin: 0 auto;和display: flex; align-items: center;/* 垂直居中 */ justify-content: center; /* 水平居中 */
文本水平居中text-align: center;
右移50%再以元素中心点左移元素的50%：（注意块级元素，比如div）
margin-left: 50%;
transform: translateX(-50%);
======================================================
/* 设置文字展示到图片前面 */
<div style={{ position: "relative",width: "100%",height: "100%"}}>
      <img src={d.url}/>
       <div style={{position:"absolute",top:"50%",left:"40%"}}>学生活动</div>
</div>
=======================================================
  /* 设置图片自动缩放，注意用到.slick-slide和 .slick-active（进场自动播放） */
.big-image-image-container .slick-slide img {
  transform: scale(1.1);  /* 初始缩放为 110% */
  transition: transform 2s ease-in-out;  /* 添加过渡效果，持续时间为 2 秒 */
}

.big-image-image-container .slick-active img {
  transform: scale(1);  /* 缩放到 100% */
}
======================================================
  /* 设置图片光标悬浮时缩放，注意用到.hover */
.big-image-image-container.hover {
  transform: scale(1.1);  /* 悬挂时放大为 110%，离开时恢复原状 */
  transition: transform 2s ease-in-out;  /* 添加过渡效果，持续时间为 2 秒 */
}
=====================================================
滚动条
/* 滚动条的整体样式 */
::-webkit-scrollbar {
  width: 5px;
}

/* 滚动条轨道的样式 */
::-webkit-scrollbar-track {
  background: #646464;
}

/* 滚动条的样式 */
::-webkit-scrollbar-thumb {
  background: #1c00ff;
}
==========================
伪元素
.menu1::after {  /* 伪元素的初始样式 */
  content: ''; /* 伪元素的内容 */
  position: absolute;
  top: 70%; /* 线条在元素下方 */
  left: 0; /* 线条从左边开始 */
  width: 0; /* 初始宽度为0 */
  height: 5px; /* 线条的高度 */
  background-color: #ff9d00; /* 线条的颜色 */
  transition: all 0.7s ease; /* 过渡效果，使线条出现更平滑 */
}
.menu1:hover::after {
  width: 100%;
}