1. 首页
  2. 分类
  3. css3
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秒钟切换到下一张图片。这个例子教会开发者如何用最基本的代码实现一个轮播效果，而无需依赖外部库。

- 阅读更多 -
解决在vue2上使用swiper6出现的问题（自动播放，前进后退按钮，分页器）完整版
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样式文件。

- 阅读更多 -
Vue2仿网易云风格音乐播放器
System
2024-08-20
所有,css3

以下是一个简化版本的Vue 2音乐播放器示例代码，仅包含核心功能和样式：




<template>
  <div class="music-player">
    <div class="progress-bar">
      <button @click="prev">上一曲</button>
      <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
      <button @click="next">下一曲</button>
      <div class="progress" @click="setProgress($event)">
        <div class="played" :style="{ width: progressBarWidth }"></div>
      </div>
    </div>
    <div class="song-info">
      <h2>{{ currentSong.name }}</h2>
      <artist-list :artists="currentSong.artists"></artist-list>
    </div>
  </div>
</template>
 
<script>
import ArtistList from './ArtistList.vue';
 
export default {
  components: {
    ArtistList
  },
  data() {
    return {
      currentSong: {
        name: '歌曲名称',
        artists: [{ name: '艺术家1' }, { name: '艺术家2' }]
      },
      isPlaying: false,
      progress: 0,
      songDuration: 200 // 假设的歌曲总时长（单位：秒）
    };
  },
  computed: {
    progressBarWidth() {
      return `${this.progress / this.songDuration * 100}%`;
    }
  },
  methods: {
    togglePlay() {
      this.isPlaying = !this.isPlaying;
    },
    prev() {
      // 上一曲的逻辑
    },
    next() {
      // 下一曲的逻辑
    },
    setProgress(event) {
      // 设置播放进度的逻辑
    }
  }
};
</script>
 
<style scoped>
.music-player {
  display: flex;
  align-items: center;
}
.progress-bar {
  flex-grow: 1;
  position: relative;
}
.progress {
  height: 5px;
  background-color: #e5e5e5;
  cursor: pointer;
}
.played {
  height: 100%;
  background-color: #31c27c;
  transition: width 0.1s;
}
.song-info {
  margin-left: 20px;
}
button {
  margin-right: 10px;
}
</style>

在这个示例中，我们创建了一个简单的音乐播放器界面，包括播放、暂停、上一曲和下一曲的按钮，以及一个进度条。进度条可以被点击并且调整歌曲的播放进度，同时展示了如何使用计算属性来动态设置进度条的宽度。这个示例假设ArtistList组件已经存在并正确导入。

- 阅读更多 -
Mysql 4 种方式避免重复插入数据！
System
2024-08-20
所有,css3

在MySQL中，可以使用以下四种方式来避免重复插入数据：

  1. 使用INSERT IGNORE：



INSERT IGNORE INTO table_name (column1, column2, ...)
VALUES (value1, value2, ...);
  1. 使用INSERT ... ON DUPLICATE KEY UPDATE：



INSERT INTO table_name (column1, column2, ...)
VALUES (value1, value2, ...)
ON DUPLICATE KEY UPDATE column1 = value1, column2 = value2, ...;
  1. 使用REPLACE INTO：



REPLACE INTO table_name (column1, column2, ...)
VALUES (value1, value2, ...);
  1. 使用INSERT ... SELECT结合不存在的数据：



INSERT INTO table_name (column1, column2, ...)
SELECT value1, value2, ...
WHERE NOT EXISTS (SELECT 1 FROM table_name WHERE unique_column = some_value);

每种方法都有其适用场景，选择哪种方法取决于具体需求。例如，INSERT IGNORE 和 INSERT ... ON DUPLICATE KEY UPDATE 适用于有唯一键或主键的情况，而 REPLACE INTO 会删除旧记录，再插入新记录，INSERT ... SELECT 则可用于批量插入数据时避免重复。

- 阅读更多 -
CSS 使背景色透明但是文字颜色不变
System
2024-08-20
所有,css3

要在CSS中实现背景色透明但文字颜色不变，可以使用rgba颜色格式为元素设置背景色，并确保文字颜色是使用十六进制颜色代码或者rgb格式。




.transparent-bg {
    /* 设置半透明背景 */
    background-color: rgba(255, 255, 255, 0.5); /* 白色背景，50% 透明度 */
    
    /* 确保文字颜色不受背景透明度影响 */
    color: #000000; /* 文字颜色为黑色 */
}

HTML 示例：




<div class="transparent-bg">这段文字的颜色不会透明，而背景将是半透明的。</div>

在这个例子中，.transparent-bg 类应用于一个元素，该元素的背景色将是白色的，并且透明度是50%，而文字保持为黑色不透明。

- 阅读更多 -
css动画效果代码淡入淡出折叠展开点击悬浮
System
2024-08-20
所有,css3

在CSS中，可以使用transition属性来实现淡入淡出的效果，并使用:hover伪类来实现悬浮时的折叠展开效果。以下是一个简单的例子：

HTML:




<div class="container">
  <div class="content">
    <p>这里是内容</p>
  </div>
</div>

CSS:




.container {
  width: 300px;
  height: 200px;
  position: relative;
  overflow: hidden;
}
 
.content {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #f0f0f0;
  transition: transform 0.5s ease-in-out;
  transform: translateY(100%);
}
 
.container:hover .content {
  transform: translateY(0);
}

在这个例子中，.container 是包含折叠内容的容器，.content 是要折叠的内容区域。通过设置.content的transform属性为translateY(100%)，初始时内容位于容器外部，不可见。当鼠标悬浮在.container上时，.content通过transform的过渡效果平滑地下滑至初始位置，实现了淡入的效果。

当鼠标从悬浮区域移出时，内容会再次上升回原来的位置，实现了淡出的效果。这个效果是通过.content的transition属性定义的，当transform属性改变时，会在0.5秒内完成过渡动画。

- 阅读更多 -
CSS流动布局-页面自适应
System
2024-08-20
所有,css3

CSS流动布局（Flow Layout）可以使网页中的元素按照从左到右，从上到下的顺序排列。为了实现页面的自适应，可以使用CSS的百分比宽度、auto 和 flex 布局等技术。

以下是一个简单的例子，展示了如何使用流动布局和百分比宽度来创建一个自适应的页面：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流动布局示例</title>
<style>
  .container {
    width: 80%;
    margin: auto;
  }
  .column {
    float: left;
    width: 33.33%;
    padding: 10px;
  }
  .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }
</style>
</head>
<body>
<div class="container clearfix">
  <div class="column">
    <p>第一列内容</p>
  </div>
  <div class="column">
    <p>第二列内容</p>
  </div>
  <div class="column">
    <p>第三列内容</p>
  </div>
</div>
</body>
</html>

在这个例子中，.container 类定义了一个宽度为80%，并且左右两边有自适应间距的容器。.column 类定义了每个列的宽度为总宽度的33.33%（因为有三个列，所以每个列的宽度应该是100% / 3），并且使用了float: left属性来实现流动布局。.clearfix::after 伪元素用来清除浮动，确保父容器能够包裹住所有子元素。

- 阅读更多 -
flex布局一个很有意思的事情----align-items你不知道的效果
System
2024-08-20
所有,css3

align-items 是 Flexbox 布局中的一个属性，它用于在弹性容器的侧轴上对齐容器内的项目。这个属性的值决定了项目在侧轴上的位置。

以下是 align-items 的一些常用值及其效果：

  1. flex-start：项目在侧轴上对齐到容器的开始位置。
  2. flex-end：项目在侧轴上对齐到容器的结束位置。
  3. center：项目在侧轴上居中对齐。
  4. stretch：如果项目未设置高度或设为 auto，项目会伸展以填满整个容器。
  5. baseline：项目在侧轴上对齐到第一行文本的基线上。

下面是一个简单的例子，演示如何使用 align-items：

HTML:




<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

CSS:




.flex-container {
  display: flex;
  height: 200px;
  background-color: lightblue;
  align-items: center; /* 修改这里的值来看不同的效果 */
}
 
.flex-item {
  width: 100px;
  margin: 5px;
  background-color: coral;
  text-align: center;
}

在这个例子中，.flex-container 是一个弹性容器，它设置了 align-items: center;，这意味着其内部的 .flex-item 会在侧轴（垂直轴）上居中对齐。如果你将 align-items 的值改为 flex-start 或 flex-end，项目会分别对齐到容器的顶部或底部。

- 阅读更多 -
使用CSS画一个简单的立方体
System
2024-08-20
所有,css3

要使用CSS创建一个简单的立方体，你可以使用3D转换和CSS3的 transform 属性。以下是一个示例代码，它创建了一个具有不同颜色面的立方体：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .cube {
    width: 100px;
    height: 100px;
    margin: 50px;
    transform-style: preserve-3d;
    animation: rotate 5s infinite linear;
  }
 
  .face {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    border: 1px solid #000;
  }
 
  .cube .front {
    background: red;
    transform: translateZ(50px);
  }
 
  .cube .back {
    background: blue;
    transform: translateZ(-50px) rotateY(180deg);
  }
 
  .cube .right {
    background: green;
    transform: translateX(50px) rotateY(90deg);
  }
 
  .cube .left {
    background: orange;
    transform: translateX(-50px) rotateY(-90deg);
  }
 
  .cube .top {
    background: purple;
    transform: translateY(-50px) rotateX(90deg);
  }
 
  .cube .bottom {
    background: yellow;
    transform: translateY(50px) rotateX(-90deg);
  }
 
  @keyframes rotate {
    0% {
      transform: rotateX(0deg) rotateY(0deg);
    }
    100% {
      transform: rotateX(360deg) rotateY(360deg);
    }
  }
</style>
</head>
<body>
<div class="cube">
  <div class="front face"></div>
  <div class="back face"></div>
  <div class="right face"></div>
  <div class="left face"></div>
  <div class="top face"></div>
  <div class="bottom face"></div>
</div>
</body>
</html>

这段代码定义了一个名为 .cube 的容器，它使用 transform-style: preserve-3d; 来确保子元素在3D空间中呈现。每个面 .face 都被绝对定位在 .cube 的中心，并使用 translateZ 和 rotateY 或 rotateX 进行定位和旋转，以创建立方体的视觉效果。动画 @keyframes rotate 使得立方体连续旋转。

- 阅读更多 -
Vue3——使用v-if或v-show来实现过渡的动画效果
System
2024-08-20
所有,css3



<template>
  <div id="app">
    <transition name="fade">
      <p v-if="show">这是一个可过渡的元素</p>
    </transition>
    <button @click="show = !show">切换元素</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>
 
<style>
/* 定义过渡样式 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

这个例子中，我们定义了一个简单的Vue组件，其中包含一个可以被v-if指令控制显示与隐藏的段落。通过点击按钮来切换show数据属性的布尔值，从而触发过渡。我们还定义了相关的CSS过渡样式，使得元素的显示和隐藏具有平滑的渐变效果。

- 阅读更多 -
Copyright © 2024 Tech Blog
All Right Reserved | 京ICP备19053165号