6种高质量css样式-[:ug]Waris[:zh]Waris[:]

最常见的6种css样式包括幻灯片，卡片，按钮特效和动画效果等

1.幻灯片轮播图

HTML代码：

<div class="slideshow-container">
  <div class="slide fade">
    < img src="https://via.placeholder.com/800x400" alt="Slide 1">
  </div>
  <div class="slide fade">
    < img src="https://via.placeholder.com/800x400/ff7f7f" alt="Slide 2">
  </div>
  <div class="slide fade">
    < img src="https://via.placeholder.com/800x400/87ceeb" alt="Slide 3">
  </div>
</div>
<br>
<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span>
</div>

CSS代码：

/* 幻灯片容器 */
.slideshow-container {
  max-width: 800px;
  position: relative;
  margin: auto;
}

/* 每一张幻灯片 */
.slide {
  display: none;
}

.slide img {
  width: 100%;
  border-radius: 10px;
}

/* 幻灯片淡入淡出动画 */
.fade {
  animation: fadeEffect 1.5s ease-in-out;
}

@keyframes fadeEffect {
  from {opacity: 0.4} 
  to {opacity: 1}
}

/* 小圆点样式 */
.dot {
  cursor: pointer;
  height: 12px;
  width: 12px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot.active, .dot:hover {
  background-color: #717171;
}

JS代码：

let slideIndex = 0;
showSlides();

function showSlides() {
  const slides = document.getElementsByClassName("slide");
  const dots = document.getElementsByClassName("dot");
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) { slideIndex = 1 }
  for (let i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
  setTimeout(showSlides, 3000); // 3秒切换
}

2.卡片样式（带阴影和悬停动画）

HTML代码：

<div class="card-container">
  <div class="card">
    < img src="https://via.placeholder.com/300x200" alt="Card Image">
    <div class="card-content">
      <h3>卡片标题</h3>
      <p>这是卡片的简要描述信息，内容可以自由调整。</p >
    </div>
  </div>
</div>

CSS代码：

.card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.card {
  width: 300px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card img {
  width: 100%;
  display: block;
}

.card-content {
  padding: 15px;
  text-align: center;
}

.card h3 {
  margin: 0 0 10px;
  color: #333;
}

.card p {
  color: #666;
  font-size: 14px;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

3.按钮悬停特效

HTML代码：

<div class="button-container">
  <button class="btn">悬停我试试</button>
</div>

CSS代码：

.button-container {
  text-align: center;
  margin-top: 50px;
}

.btn {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

.btn:hover {
  background-color: #45a049;
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

4.图片悬停放大效果

HTML代码：

<div class="image-container">
  < img src="https://via.placeholder.com/300" alt="Image Hover Effect">
</div>

CSS代码：

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px;
}

.image-container img {
  width: 300px;
  height: auto;
  border-radius: 10px;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.image-container img:hover {
  transform: scale(1.2);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

5.动画文本打字效果

HTML代码：

<div class="typewriter">
  <h2>欢迎来到我的网站！</h2>
</div>

CSS代码：

.typewriter h2 {
  font-family: 'Courier New', Courier, monospace;
  color: #333;
  border-right: 4px solid #333;
  white-space: nowrap;
  overflow: hidden;
  animation: typing 3s steps(22, end), blink-caret 0.75s step-end infinite;
}

/* 打字动画 */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* 光标闪烁 */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #333; }
}

6.卡片模式（效果图👇）

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VIP Card Layout</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card-container">
        <!-- 第一个卡片 -->
        <div class="card">
            <div class="vip-tag">VIP</div>
            < img src="https://via.placeholder.com/200x300" alt="Card Image">
            <div class="card-title">标题 1</div>
            <div class="card-footer">
                <span class="icon music-icon">🎵</span>
                <span class="view-count">116</span>
            </div>
        </div>

        <!-- 第二个卡片 -->
        <div class="card">
            <div class="vip-tag">VIP</div>
            < img src="https://via.placeholder.com/200x300" alt="Card Image">
            <div class="card-title">标题 2</div>
            <div class="card-footer">
                <span class="icon music-icon">🎵</span>
                <span class="view-count">99</span>
            </div>
        </div>

        <!-- 第三个卡片 -->
        <div class="card">
            <div class="vip-tag">VIP</div>
            < img src="https://via.placeholder.com/200x300" alt="Card Image">
            <div class="card-title">标题 3</div>
            <div class="card-footer">
                <span class="icon music-icon">🎵</span>
                <span class="view-count">99</span>
            </div>
        </div>
    </div>
</body>
</html>

CSS代码：

/* 全局设置 */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
}

/* 卡片容器布局 */
.card-container {
    display: flex;
    justify-content: center;
    gap: 20px; /* 卡片之间的间距 */
    padding: 20px;
    flex-wrap: wrap;
}

/* 卡片样式 */
.card {
    position: relative;
    width: 200px;
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    font-size: 16px;
}

.card img {
    width: 100%;
    display: block;
}

/* VIP 标签样式 */
.vip-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: red;
    color: white;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 3px;
}

/* 卡片标题样式 */
.card-title {
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    color: white;
    font-weight: bold;
    font-size: 18px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    text-align: center;
}

/* 底部播放和观看图标 */
.card-footer {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    color: white;
    font-size: 14px;
}

.card-footer .icon {
    margin-right: 5px;
    font-size: 18px;
}

到此结束，如有需要的但是这儿没得请留言

本站致力于为软件爱好者提供国内外软件开发技术和软件共享，着力为用户提供优资资源。本站提供的所有下载文件均为网络共享资源，请于下载后的24小时内删除。如需体验更多乐趣，还请支持正版。我站提供用户下载的所有内容均转自互联网，如有内容侵犯您的版权或其他利益的，请编辑邮件并加以说明发送到站长邮箱，站长会进行审查之后，情况属实的会在三个工作日内为您删除。邮箱：2359736355@qq.com

THE END