分类 css3 下的文章

2024-09-09

要实现JavaScript手动滚动图片，你可以使用scrollTo方法或者直接设置元素的scrollLeft和scrollTop属性。以下是一个简单的例子，演示了如何通过按钮点击事件来滚动图片。

HTML部分：




<div id="gallery" style="overflow: hidden; white-space: nowrap; width: 300px;">
  <img src="image1.jpg" alt="Image 1" style="display: inline;">
  <img src="image2.jpg" alt="Image 2" style="display="inline;">
  <!-- 更多图片 -->
</div>
<button id="leftBtn">向左滚动</button>
<button id="rightBtn">向右滚动</button>

JavaScript部分：




const gallery = document.getElementById('gallery');
const leftBtn = document.getElementById('leftBtn');
const rightBtn = document.getElementById('rightBtn');
 
let scrollPosition = 0;
 
leftBtn.addEventListener('click', function() {
  scrollPosition += 100; // 每次向左滚动100px
  gallery.scrollTo({
    left: scrollPosition,
    behavior: 'smooth'
  });
});
 
rightBtn.addEventListener('click', function() {
  const maxScroll = gallery.scrollWidth - gallery.clientWidth;
  scrollPosition -= 100; // 每次向右滚动100px
  scrollPosition = Math.max(0, Math.min(maxScroll, scrollPosition)); // 防止溢出
  gallery.scrollTo({
    left: scrollPosition,
    behavior: 'smooth'
  });
});

在这个例子中，我们有一个包含多张图片的容器#gallery，并且设置了overflow: hidden来隐藏超出容器的部分。我们通过监听按钮点击事件来控制滚动位置。向左滚动时，scrollPosition增加；向右滚动时，scrollPosition减少，并确保不会滚动到容器外部。

- 阅读更多 -

CSS3实现DIV右侧滑入效果

System

2024-08-27

所有,css3

要使用CSS3实现一个DIV从右侧滑入的效果，可以使用transition属性来平滑过渡，并使用transform属性配合:hover伪类来实现。以下是一个简单的例子：

HTML:




<div class="slider">
  我是从右侧滑入的盒子
</div>

CSS:




.slider {
  width: 200px;
  height: 100px;
  background-color: skyblue;
  transition: transform 0.5s ease-in-out;
  transform: translateX(100%); /* 初始状态，在视窗右侧 */
  opacity: 0; /* 初始透明度为0 */
}
 
.slider:hover {
  transform: translateX(0); /* 鼠标悬停时，滑入 */
  opacity: 1; /* 鼠标悬停时透明度为1 */
}

在这个例子中，.slider类定义了盒子的初始样式，transition属性设置了过渡效果，transform属性设置了初始状态下盒子在视窗中的位置（translateX(100%)意味着盒子在视窗的右侧）。

:hover伪类在鼠标悬停时改变transform属性，使盒子滑入视窗。opacity属性也在悬停时改变为1，以确保盒子在滑入时是可见的。

- 阅读更多 -

css中涉及到的百分比

System

2024-08-27

所有,css3

CSS百分比主要用于定义尺寸、位置、长度等，可以用来指定元素的大小、空间等。

宽度和高度可以用百分比设定：




div {
  width: 50%;  /* 宽度是父元素宽度的50% */
  height: 20%; /* 高度是父元素高度的20% */
}

对于位置属性（如top, right, bottom, left），也可以使用百分比来设定：




div {
  position: absolute;
  top: 10%;    /* 距离顶部10%的位置 */
  left: 20%;   /* 距离左边20%的位置 */
}

在transform: translate()中，也可以使用百分比设定：




div {
  transform: translate(50%, 100%); /* 向右移动自身宽度的50%，向下移动自身高度的100% */
}

在flex布局中，也可以使用百分比设定flex项目的占用空间：




.container {
  display: flex;
}
.item {
  flex: 1; /* 等同于flex: 1 1 0; 表示flex项目将会占据可用空间的1/3 */
}

在background-size属性中，也可以使用百分比设定背景图片的尺寸：




div {
  background-image: url('image.jpg');
  background-size: 50% 100%; /* 背景图片宽度是元素宽度的50%，高度是元素高度的100% */
}

在font属性中，也可以使用百分比设定字体大小：




body {
  font-size: 62.5%; /* 将默认字体大小设置为10px，便于后续使用百分比设置更加精确的字体大小 */
}
h1 {
  font-size: 5em;  /* 相当于5*10px=50px */
}

以上都是CSS百分比的应用场景，具体使用哪种取决于你的设计需求。

- 阅读更多 -

css3 瀑布流布局遇见截断下一列展示后半截现象

System

2024-08-27

所有,css3

瀑布流布局通常用于展示图片集合，当一列中的图片因为某种原因被截断时，会影响整体的视觉效果。为了解决这个问题，可以采取以下策略：

等比缩放：确保所有图片等比缩放，这样即使某些图片被截断，也不会影响整体的视觉效果。
懒加载：只加载当前视口内的图片，其他图片等待用户滚动到视口内再进行加载，减少页面初始加载时间和服务器压力。
调整列宽：根据图片的宽高比动态计算列宽，使得整个页面的布局更加合理。

以下是一个简单的等比缩放瀑布流布局的CSS示例：




.waterfall {
  position: relative;
  width: 100%;
}
 
.column {
  position: absolute;
  top: 0;
  left: 0;
  padding-bottom: 100%; /* 创建等高的列 */
}
 
.item {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 5px; /* 图片之间的间隔 */
}
 
.item img {
  width: 100%;
  height: auto; /* 保持等比缩放 */
  display: block;
}
 
/* 样式内容略，需要自行添加 */




<div class="waterfall">
  <div class="column">
    <div class="item"><img src="image1.jpg"></div>
    <!-- 其他图片 -->
  </div>
</div>

这个布局方式确保了图片会等比缩放，避免了截断的问题。在实际应用中，可能还需要结合JavaScript来动态管理瀑布流的列和图片位置。

- 阅读更多 -

前端H5+CSS3回到顶部功能

System

2024-08-26

所有,css3




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H5+CSS3 回到顶部示例</title>
<style>
  .back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    cursor: pointer;
    z-index: 9999;
  }
  .back-to-top:hover {
    opacity: 0.8;
  }
</style>
</head>
<body>
<!-- 页面内容 -->
 
<div class="back-to-top">回到顶部</div>
 
<script>
  // 获取页面中的“回到顶部”按钮
  const btn = document.querySelector('.back-to-top');
 
  // 监听滚动事件
  window.addEventListener('scroll', function() {
    // 当页面向下滚动超过500px时显示按钮，否则隐藏按钮
    if (window.pageYOffset > 500) {
      btn.style.display = 'block';
    } else {
      btn.style.display = 'none';
    }
  });
 
  // 点击按钮回到顶部的功能
  btn.addEventListener('click', function() {
    // 平滑滚动到页面顶部
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  });
</script>
</body>
</html>

这段代码实现了一个简单的回到顶部按钮，当页面向下滚动超过500px时显示这个按钮，点击按钮会平滑滚动至页面顶部。CSS部分定义了按钮的样式和位置，JavaScript部分则监听了滚动事件并处理了按钮的显示和点击事件。

- 阅读更多 -

前端JS特效第6波：H5+CSS3幻灯片图片切换代码

System

2024-08-26

所有,css3

以下是一个简单的H5和CSS3应用于创建幻灯片图片切换效果的代码示例：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>幻灯片图片切换</title>
<style>
  .slider {
    position: relative;
    width: 300px;
    height: 200px;
    margin: 50px;
    overflow: hidden;
  }
  .slider img {
    width: 100%;
    height: auto;
    display: block;
    position: absolute;
    opacity: 0;
    transition: opacity 1s;
  }
  .slider img.active {
    opacity: 1;
  }
</style>
</head>
<body>
 
<div class="slider">
  <img class="active" src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>
 
<script>
  let currentIndex = 0;
  const images = document.querySelectorAll('.slider img');
  const imageCount = images.length;
 
  setInterval(function() {
    images[currentIndex].classList.remove('active');
    currentIndex = (currentIndex + 1) % imageCount;
    images[currentIndex].classList.add('active');
  }, 3000); // 切换时间
</script>
 
</body>
</html>

这段代码使用了CSS3中的transition属性来平滑地过渡图片的透明度，并使用了JavaScript中的setInterval函数来定期更换当前活跃的图片。这个示例假设您有至少3张图片，并且它们的路径分别是image1.jpg、image2.jpg和image3.jpg。您可以根据实际情况调整图片的路径和数量。

- 阅读更多 -

学习css3，使用代码实现一根心爱的二踢脚_css画脚丫，源码+原理+手写框架

System

2024-08-26

所有,css3

在CSS中，我们可以使用边框（border）、圆角（border-radius）和透明度（opacity）等特性来画出一根心爱的二踢脚丫。以下是实现这个图案的代码示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>心爱的二踢脚丫</title>
<style>
  .shoe {
    position: relative;
    width: 100px;
    height: 150px;
    background: #f0e68c;
    border-top-left: 50px solid #333;
    border-top-right: 50px solid #333;
    border-bottom: 10px solid #333;
    border-radius: 70% 70% 50% 50%;
    margin: 50px auto;
  }
 
  .shoe:before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 100px;
    height: 100px;
    background: #f0e68c;
    border-radius: 50%;
    z-index: -1;
  }
 
  .shoe:after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: -40px;
    width: 80px;
    height: 80px;
    background: #333;
    border-radius: 50%;
    z-index: -2;
  }
</style>
</head>
<body>
<div class="shoe"></div>
</body>
</html>

这段代码定义了一个.shoe类，它创建了一个带有底部边框的椭圆，并使用:before和:after伪元素来创建脚丫的上半部分和底部的圆形。通过调整尺寸和边框半径，可以进一步完善和优化这个图案，使其更加逼真。

- 阅读更多 -

flex: 1；子元素高度较高时不展示滚动条而是撑开父元素

System

2024-08-25

所有,css3

flex: 1; 是CSS样式中的Flexbox布局属性，用于分配容器内的可用空间。当子元素的高度较高时，父容器将会被撑开以适应子元素的高度。

如果你希望在子元素高度较高时展示滚动条而不是撑开父元素，你可以使用以下CSS样式：




.parent {
  display: flex;
  overflow: auto; /* 添加滚动条 */
}
 
.child {
  flex: 1;
  min-height: 0; /* 防止flex项目被最小高度min-height:0的项目撑开 */
}

HTML结构如下：




<div class="parent">
  <div class="child">
    <!-- 子元素内容 -->
  </div>
</div>

这样设置后，当子元素的高度超出父容器时，父容器将展示滚动条而不是撑开。

- 阅读更多 -

Web 页面如何实现动画效果

System

2024-08-25

所有,css3

在Web页面中实现动画效果，可以使用以下几种方法：

CSS动画：使用CSS的@keyframes规则定义动画，然后将其应用到元素上。




@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}
 
@-webkit-keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}
 
.animatedBox {
  animation-name: example;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

JavaScript动画：使用JavaScript结合requestAnimationFrame或setInterval来实现动画。




function animate(element, property, start, end, duration) {
  let startTime = performance.now();
  
  const step = (timestamp) => {
    if (!startTime) startTime = timestamp;
    const progress = Math.min((timestamp - startTime) / duration, 1);
    element.style[property] = (progress * (end - start)) + start + 'px';
    if (progress < 1) {
      window.requestAnimationFrame(step);
    }
  };
  
  window.requestAnimationFrame(step);
}
 
const box = document.querySelector('.box');
animate(box, 'width', 10, 200, 2000); // 动画从10px宽度变到200px宽度

使用第三方库：如GreenSock Animation Platform (GSAP)、anime.js等。




anime({
  targets: '.box',
  width: 200,
  easing: 'easeInOutQuad',
  duration: 2000
});

以上是实现动画效果的几种方法，具体使用哪种取决于项目需求和开发偏好。

- 阅读更多 -

使用vue3写一个自动获取宽度高度变化的过渡动画

System

2024-08-25

所有,css3




<template>
  <div class="transition-box" :style="{ width: boxWidth + 'px', height: boxHeight + 'px' }">
    <!-- 内容 -->
  </div>
</template>
 
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
 
const boxWidth = ref(200);
const boxHeight = ref(200);
 
function handleResize() {
  boxWidth.value = window.innerWidth / 2;
  boxHeight.value = window.innerHeight / 2;
}
 
onMounted(() => {
  window.addEventListener('resize', handleResize);
  handleResize(); // 初始化尺寸
});
 
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
</script>
 
<style>
.transition-box {
  transition: width 0.3s, height 0.3s;
  background-color: #42b983;
}
</style>

这段代码使用Vue 3的Composition API创建了一个响应窗口尺寸变化的方形div。当窗口大小变化时，handleResize函数会更新boxWidth和boxHeight的值，并且Vue的响应式系统会自动更新DOM。CSS中的过渡效果会让尺寸的变化看起来平滑自然。

- 阅读更多 -