分类 css3 下的文章

2024-08-20




<!DOCTYPE html>
<html>
<head>
<style>
.slider {
  overflow: hidden;
  white-space: nowrap;
  background: #f0f0f0;
}
 
.slide {
  display: inline-block;
  width: 100%;
  transition: transform 0.4s ease-in-out;
}
 
.slide img {
  width: 100%;
  display: block;
}
 
.slide p {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
}
 
/* 初始化时显示第一张图片 */
.slider .slide:nth-child(1) {
  transform: translateX(0);
}
 
/* 控制按钮样式 */
.slider-nav {
  text-align: center;
  margin-top: 10px;
}
 
.slider-nav button {
  cursor: pointer;
  border: none;
  background: #ddd;
  padding: 5px 10px;
  margin: 0 5px;
  color: #333;
  font-size: 16px;
}
 
.slider-nav button.active {
  background: #007bff;
  color: white;
}
</style>
</head>
<body>
 
<div class="slider">
  <div class="slide">
    <img src="image1.jpg" alt="Image 1">
    <p>图片 1 的描述文字</p>
  </div>
  <div class="slide">
    <img src="image2.jpg" alt="Image 2">
    <p>图片 2 的描述文字</p>
  </div>
  <div class="slide">
    <img src="image3.jpg" alt="Image 3">
    <p>图片 3 的描述文字</p>
  </div>
</div>
 
<div class="slider-nav">
  <button onclick="changeSlide(1)" class="active">&#10094;</button>
  <button onclick="changeSlide(2)">&#10095;</button>
</div>
 
<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const navButtons = document.querySelectorAll('.slider-nav button');
 
function changeSlide(direction) {
  // 移除所有按钮的激活状态
  navButtons.forEach((button) => button.classList.remove('active'));
 
  // 根据方向更新currentSlide的值
  if (direction === 1) {
    currentSlide = (currentSlide + 1) % slides.length;
  } else {
    currentSlide = (currentSlide - 1 + slides.length) % slides.length;
  }
 
  // 为当前导航按钮添加激活状态
  navButtons[currentSlide].classList.add('active');
 
  // 更新所有幻灯片的transform属性
  slides.forEach((slide, index) => {
    slide.style.transform = `translateX(${index - currentSlide}00%)`;
  });
}
</script>
 
</body>
</html>

这个代码实例展示了如何使用JavaScript和CSS3创建一个无缝滚动的图片描述框，用户可以通过点击左右箭头来切换图片。图片描述框使用transform属性进行平滑过渡，而不是直接更改图片位置，这样可以避免网页的重绘重排，提供更流畅的用户体验。

- 阅读更多 -

css animation 实现闪烁动画gif效果，小圆圈

System

2024-08-20

所有,css3

CSS 可以实现一个类似于 GIF 的闪烁动画效果，以下是一个使用 CSS animation 属性制作的小圆点闪烁动画示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Dot Blink</title>
<style>
  .dot {
    width: 20px;
    height: 20px;
    background-color: #333;
    border-radius: 50%; /* 圆形 */
    display: inline-block;
    animation: blink 1s infinite alternate; /* 闪烁动画 */
  }
 
  @keyframes blink {
    from { opacity: 0; }
    to { opacity: 1; }
  }
</style>
</head>
<body>
<div class="dot"></div> <!-- 小圆点 -->
</body>
</html>

这段代码会创建一个小圆点，通过 CSS animation 属性和 @keyframes 规则实现闪烁效果。动画名为 blink，持续时间为 1 秒，并且设置为无限次数循环(infinite)，且每次动画交替(alternate)显示。

- 阅读更多 -

CSS常见布局整理

System

2024-08-20

所有,css3

CSS 常见的布局有以下几种：

浮动布局（Float）
Flexbox 布局
Grid 布局
相对定位布局
绝对定位布局
弹性盒子文本布局

以下是每种布局的简单示例代码：

浮动布局（Float）




.float-layout {
  float: left; /* 或者使用 right */
  width: 50%; /* 需要设置宽度 */
}

Flexbox 布局




.flex-layout {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

Grid 布局




.grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等宽 */
  grid-gap: 10px; /* 格子间隔 */
}

相对定位布局




.relative-layout {
  position: relative;
  top: 10px; /* 相对于原位置向下移动 */
  left: 20px; /* 相对于原位置向右移动 */
}

绝对定位布局




.absolute-layout {
  position: absolute;
  top: 0;
  right: 0;
}

弹性盒子文本布局




.text-layout {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

这些布局可以根据具体需求进行组合和调整以实现复杂的页面布局。

- 阅读更多 -

ElInputNumber 添加单位

System

2024-08-20

所有,css3

在使用Element UI的el-input-number组件时，可以通过插槽（slot）来添加单位。以下是一个简单的例子，展示如何在输入框旁边添加单位。




<template>
  <el-input-number v-model="value" :min="1" :max="10">
    <template #suffix>
      单位
    </template>
  </el-input-number>
</template>
 
<script>
export default {
  data() {
    return {
      value: 1
    };
  }
};
</script>

在这个例子中，el-input-number组件的v-model绑定了变量value，min和max属性设置了输入数字的范围。#suffix插槽用于添加单位文本，它会显示在输入框的后缀位置。

- 阅读更多 -

列表元素有序列表无序列表定义列表 ol: ul: dl: dd: dt:

System

2024-08-20

所有,css3

在HTML中，有序列表（ordered list）由 <ol> 标签定义，无序列表（unordered list）由 <ul> 标签定义，定义列表（definition list）由 <dl> 标签定义，列表中的每一项由 <li> 标签定义。

有序列表的每一项前面会自动带有排序序号，无序列表则以项目符号显示每一项（如圆点或者数字）。定义列表通常用于展示词汇或名词解释。

以下是这些列表的HTML代码示例：

有序列表（ordered list）:




<ol>
  <li>苹果</li>
  <li>香蕉</li>
  <li>樱桃</li>
</ol>

无序列表（unordered list）:




<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>樱桃</li>
</ul>

定义列表（definition list）:




<dl>
  <dt>计算机</dt>
  <dd>一种可以进行算数和逻辑计算的电子设备</dd>
  <dt>人工智能</dt>
  <dd>研究、开发用于模拟、扩展和扩展人类智能的理论、方法、技术及应用系统的一门新的技术领域</dd>
</dl>

在HTML中，<dt> 标签定义了定义术语（definition term），<dd> 标签定义了定义描述（definition description）。

- 阅读更多 -

css3 变换 transition

System

2024-08-20

所有,css3

CSS3的transition属性用于设置一个属性的变化时间。这种变化通常在用户交互（如鼠标悬停或焦点）时发生，但也可以在元素的某个属性改变时自动触发。

基本语法如下：




transition: property duration timing-function delay;

property：定义应用过渡的CSS属性名。
duration：定义过渡效果的持续时间。
timing-function：定义过渡的速度曲线，默认为ease。
delay：定义过渡效果何时开始，默认是0，意味着过渡效果立即开始。

例子：




div {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 1s ease-in-out;
}
 
div:hover {
  width: 200px;
}

在上面的例子中，当鼠标悬停在div上时，它的宽度会在1秒钟内从100px变为200px，并且会使用ease-in-out的时间曲线。

- 阅读更多 -

html 边框圆角和阴影的基础用法

System

2024-08-20

所有,css3




<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #4CAF50;
            border-radius: 15px; /* 设置边框圆角 */
            box-shadow: 5px 5px 10px #888888; /* 设置阴影效果 */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

这段代码创建了一个类名为 .box 的 div 元素，并通过内部样式表设置了其宽度、高度、背景颜色、边框圆角和阴影。border-radius 属性设置了元素边框的圆角度，box-shadow 属性设置了元素的阴影，包括阴影的水平偏移、垂直偏移、模糊半径和颜色。

- 阅读更多 -

CSS - 文本文字增加外框、阴影、边框

System

2024-08-20

所有,css3

要给文本添加外框、阴影和边框，可以使用CSS的text-shadow属性来添加阴影，border属性来添加边框，以及box-shadow属性来添加外框。以下是一个简单的示例：




.text-box {
  display: inline-block;
  padding: 10px;
  border: 2px solid #000; /* 文本边框 */
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.5); /* 外框阴影 */
  text-shadow: 1px 1px 2px #000; /* 文本阴影 */
}




<div class="text-box">这是有外框、阴影和边框的文本</div>

在这个例子中，.text-box 类定义了文本的外框、阴影和边框样式。display: inline-block 确保元素像行内块元素一样显示，padding 增加了文本与边框之间的空间。border 属性定义了文本的边框，box-shadow 属性创建了外框的阴影效果，而text-shadow 属性为文本本身添加了阴影。

- 阅读更多 -

JS和CSS实现的原生轮播图

System

2024-08-20

所有,css3




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生轮播图</title>
<style>
  .carousel {
    position: relative;
    width: 300px;
    height: 200px;
    margin: auto;
    overflow: hidden;
  }
  .carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    transition: transform 0.5s ease-in-out;
  }
</style>
</head>
<body>
 
<div class="carousel">
  <img src="image1.jpg" alt="Image 1" class="current">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>
 
<script>
  const images = document.querySelectorAll('.carousel img');
  let currentIndex = 0;
 
  function goToNextImage() {
    images[currentIndex].classList.remove('current');
    currentIndex = (currentIndex + 1) % images.length;
    images[currentIndex].classList.add('current');
  }
 
  setInterval(goToNextImage, 3000);
</script>
 
</body>
</html>

这个简单的代码实例展示了如何使用原生的HTML、CSS和JavaScript来创建一个基本的轮播图效果。轮播图中的图片通过class="current"来控制显示，并且使用setInterval函数每3秒钟切换到下一张图片。这个例子教会开发者如何用最基本的代码实现一个轮播效果，而无需依赖外部库。

System

2024-08-20

所有,css3

在Vue 2中使用Swiper 6时，可能会遇到自动播放、前进后退按钮、分页器不起作用的问题。以下是一个解决这些问题的示例代码：

首先，确保你已经安装了Swiper 6：




npm install swiper@6

然后，在Vue组件中使用Swiper：




<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="slide in slides" :key="slide">Slide {{ slide }}</div>
    </div>
    <!-- 前进后退按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- 分页器 -->
    <div class="swiper-pagination"></div>
  </div>
</template>
 
<script>
import { Swiper, SwiperSlide, SwiperPagination, SwiperNavigation } from 'swiper/vue';
import { autoplay } from 'swiper';
 
export default {
  components: {
    Swiper,
    SwiperSlide,
    SwiperPagination,
    SwiperNavigation
  },
  data() {
    return {
      slides: [1, 2, 3, 4, 5]
    };
  },
  mounted() {
    this.swiper = new Swiper('.swiper-container', {
      autoplay: {
        delay: 2500,
        disableOnInteraction: false
      },
      navigation: true,
      pagination: {
        clickable: true
      },
      modules: [autoplay]
    });
  }
};
</script>
 
<style>
/* 引入Swiper的样式文件 */
@import 'swiper/swiper-bundle.min.css';
 
.swiper-container {
  width: 600px;
  height: 300px;
}
</style>

在这个示例中，我们使用了Swiper的Vue组件，并在mounted钩子中初始化了Swiper实例，配置了自动播放（每2.5秒一次）、前进后退按钮和分页器。确保你已经正确引入了Swiper的CSS样式文件。

- 阅读更多 -