分类前端技术下的文章

css3实现div动画效果（横向循环播放，首尾相连）（animation和transform）

2024-08-10

以下是一个使用CSS3的@keyframes和animation属性实现的横向循环动画效果的示例代码：




<!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 {
    overflow: hidden;
    white-space: nowrap;
    background: #f0f0f0;
    width: 300px;
    height: 100px;
    position: relative;
  }
 
  .slider {
    display: inline-block;
    height: 100%;
    background: #3498db;
    width: 100px;
    position: relative;
    animation: slide 5s linear infinite;
  }
 
  .slider:before,
  .slider:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: #3498db;
  }
 
  .slider:before {
    left: -100%;
  }
 
  .slider:after {
    right: -100%;
  }
 
  @keyframes slide {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(300px);
    }
  }
</style>
</head>
<body>
 
<div class="container">
  <div class="slider"></div>
</div>
 
</body>
</html>

这段代码中，.container是一个容器，.slider是需要动画化显示的元素。通过CSS @keyframes slide 规则定义了一个从左至右平移300px的动画，在动画结束时返回到初始位置，形成一个循环的效果。使用:before和:after伪元素是为了实现首尾相连的效果，使得动画看起来是无界限循环的。

- 阅读更多 -

CSS3DRenderer, CSS3DSprite API 使用案例demo

System

2024-08-10

所有,css3

CSS3DRenderer和CSS3DSprite是Three.js中的两个API，用于在3D空间中渲染CSS元素。以下是一个简单的使用案例：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3D 示例</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: #ff0000;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <div class="box"></div>
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://threejs.org/examples/js/renderers/CSS3DRenderer.js"></script>
    <script src="https://threejs.org/examples/js/sprites/CSS3DSprite.js"></script>
    <script>
        let camera, scene, renderer;
        let container = document.getElementById('container');
 
        init();
        animate();
 
        function init() {
            camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
            camera.position.z = 1;
 
            scene = new THREE.Scene();
 
            // 创建CSS3DRenderer
            renderer = new THREE.CSS3DRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            container.appendChild(renderer.domElement);
 
            // 创建CSS3DSprite
            let sprite = new THREE.CSS3DSprite();
            sprite.scale.set(0.1, 0.1, 0.1); // 设置sprite的大小
            scene.add(sprite);
 
            // 更新sprite的CSS内容
            sprite.element.style.background = "url(https://threejs.org/examples/textures/sprites/snowflake.png) center center";
 
            // 渲染
            renderer.render(scene, camera);
        }
 
        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
    </script>
</body>
</html>

这段代码创建了一个简单的3D场景，其中包含一个CSS3DSprite元素，该元素使用了一个雪花的图片作为背景。CSS3DRenderer用于渲染这个3D场景，并将其显示在网页中。通过调整sprite的位置和旋转，可以实现更复杂的3D动画效果。

- 阅读更多 -

纯JS+Vue和canvas实现一个仪表盘

System

2024-08-10

所有,css3




<template>
  <div>
    <canvas ref="gaugeCanvas" width="200" height="200"></canvas>
  </div>
</template>
 
<script>
export default {
  name: 'Gauge',
  props: {
    value: {
      type: Number,
      default: 0
    },
    maxValue: {
      type: Number,
      default: 100
    },
    color: {
      type: String,
      default: '#42b983'
    }
  },
  mounted() {
    this.drawGauge(this.value);
  },
  watch: {
    value(newValue) {
      this.drawGauge(newValue);
    }
  },
  methods: {
    drawGauge(value) {
      const canvas = this.$refs.gaugeCanvas;
      const ctx = canvas.getContext('2d');
      const radius = canvas.height / 2;
      const startAngle = -0.5 * Math.PI;
      const endAngle = 0.5 * Math.PI;
      const counterClockwise = false;
 
      // 清空画布
      ctx.clearRect(0, 0, canvas.width, canvas.height);
 
      // 绘制背景弧形
      ctx.beginPath();
      ctx.arc(radius, radius, radius, startAngle, endAngle, counterClockwise);
      ctx.lineWidth = 10;
      ctx.strokeStyle = '#e5e5e5';
      ctx.stroke();
 
      // 绘制当前值的弧形
      const progressAngle = (value / this.maxValue) * Math.PI;
      ctx.beginPath();
      ctx.arc(radius, radius, radius, startAngle, progressAngle, counterClockwise);
      ctx.lineWidth = 10;
      ctx.strokeStyle = this.color;
      ctx.stroke();
 
      // 绘制中心点
      ctx.beginPath();
      ctx.arc(radius, radius, 5, 0, 2 * Math.PI);
      ctx.fillStyle = this.color;
      ctx.fill();
    }
  }
};
</script>
 
<style scoped>
canvas {
  display: block;
  margin: auto;
}
</style>

这段代码使用Vue和canvas创建了一个简单的仪表盘组件。它接受value（当前值）、maxValue（最大值）和color（颜色）作为props。在mounted钩子中，它会绘制初始仪表盘。使用watch属性监听value的变化，当值改变时重绘仪表盘以反映新的进度。这个例子展示了如何结合Vue和canvas实现数据驱动的可视化组件。

- 阅读更多 -

解决CSS中鼠标移入到某个元素其子元素被遮挡的问题

System

2024-08-10

所有,css

解决方案：

使用CSS的pointer-events属性。如果子元素不希望接收鼠标事件，可以将其设置为pointer-events: none;。
调整HTML结构，使得鼠标事件绑定到父元素上，然后通过事件委托处理子元素的事件。
使用JavaScript来处理事件的监听和处理，可以在鼠标移入父元素时禁用子元素的事件监听。

示例代码：




/* 方案1：子元素不接收鼠标事件 */
.child {
  pointer-events: none;
}
 
/* 方案2：HTML结构不变，JavaScript处理事件 */
window.onload = function() {
  var parent = document.getElementById('parent');
  parent.onmouseenter = function() {
    // 禁用子元素的事件监听
  };
};
 
/* 方案3：使用jQuery进行事件委托 */
$(document).ready(function() {
  $('#parent').on('mouseenter', '.child', function(event) {
    // 处理鼠标移入事件
  });
});




<!-- HTML结构 -->
<div id="parent">
  <div class="child">这是子元素</div>
</div>

请根据实际情况选择合适的方案并进行代码实现。

- 阅读更多 -

有趣的css - 好看的开关按钮

System

2024-08-10

所有,css

以下是一个简单的好看的开关按钮的CSS样式代码示例：




.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin: 0;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
 
/* Hide the browser's default radio button */
.switch input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
 
/* Create a custom radio button */
.switch-label {
  position: relative;
  display: block;
  width: 60px;
  height: 34px;
  border-radius: 34px;
  background-color: #757575;
  transition: background-color 0.2s;
}
 
/* On mouse-over, add a background color */
.switch-label:hover {
  background-color: #9e9e9e;
}
 
/* Create the indicator (the dot/circle - hidden at first) */
.switch-label:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  border-radius: 34px;
  background-color: white;
  transition: left 0.2s;
}
 
/* On mouse-over, move the indicator (dot/circle) */
.switch:hover .switch-label:after {
  left: 30px;
}
 
/* When the radio button is checked, move the indicator (dot/circle) to the right by 30px */
.switch input:checked + .switch-label:after {
  left: 30px;
}
 
/* When the radio button is checked, change the background color of the slider */
.switch input:checked + .switch-label {
  background-color: #4caf50;
}
 
/* When the radio button is checked, the slider immediately jumps to the right position. */
.switch input:checked + .switch-label:after {
  left: 30px;
}
 
/* When the radio button is disabled, gray it out */
.switch input:disabled + .switch-label {
  opacity: 0.6;
  pointer-events: none;
}

HTML部分：




<label class="switch">
  <input type="radio" id="on" name="switch" checked>
  <span class="switch-label"></span>
</label>

这段代码为一个简单的开关按钮设置了样式，当鼠标悬停在按钮上时，按钮的背景色会改变，当选中（勾选）时，按钮的背景色会变为绿色，并且滑块会向右移动。同时，当按钮被禁用时，滑块会变灰并且不可点击。这个示例展示了如何使用CSS和HTML创建一个用户友好、易于操作的界面元素。

- 阅读更多 -

CSS--解决目录的锚点定位被顶部导航栏盖住的问题

System

2024-08-10

所有,css




/* 确保锚点正确定位，不被顶部导航栏遮挡 */
:target {
    padding-top: 60px; /* 假设顶部导航栏的高度是60px */
}
 
/* 或者，如果顶部导航栏是固定位置 */
.navbar-fixed {
    position: fixed; /* 固定位置 */
    top: 0; /* 导航栏位于视窗顶部 */
    width: 100%; /* 导航栏横跨整个视窗宽度 */
    z-index: 1000; /* 确保导航栏在其他内容之上 */
}
 
/* 当锚点被触发时，通过负的padding-top调整内容区域 */
.content-adjust {
    padding-top: 60px; /* 高度等同于顶部导航栏的高度 */
}

这个例子展示了如何通过CSS来确保当一个锚点被触发时，页面内容不会被顶部导航栏遮挡。通过为:target选择器添加样式，当一个锚点被访问时，页面会自动添加适当的内边距来避免内容被遮挡。

- 阅读更多 -

css设置弹性flex后，如果设置100vh高度不撑满的原因

System

2024-08-10

所有,css

设置CSS弹性盒子（flexbox）时，如果元素的高度没有撑满视口的100vh（视口高度），可能是由以下原因造成的：

父元素的高度没有被子元素撑满。
子元素内部还有其他元素或者内边距（padding）/边框（border）/外边距（margin）导致高度超出预期。
存在默认的盒子模型盒子尺寸计算方式，可能与flexbox布局冲突。
存在最小高度限制（min-height）或者最大高度限制（max-height）。
视口单位100vh包含了滚动条的高度，如果有滚动条，可能导致100vh高度不准确。

解决方法：

确保所有子元素总和不超过父元素的高度限制。
检查子元素是否有额外的空间占据，并调整这些元素的高度或者使用flex-grow属性来分配额外空间。
确保盒子模型计算正确，可以尝试设置box-sizing: border-box;使得边框和内边距不会导致元素尺寸溢出。
检查并调整最小高度（min-height）和最大高度（max-height）属性。
如果存在滚动条，可以使用calc(100vh - 滚动条高度)来调整高度，或者通过JavaScript动态计算视口高度并设置。

示例代码：




.container {
  display: flex; /* 设置弹性布局 */
  height: 100vh; /* 设置高度为视口高度 */
}
 
.child {
  flex: 1; /* 让子元素占据剩余空间 */
  box-sizing: border-box; /* 修正盒子模型 */
  /* 其他样式 */
}

确保父元素.container的高度被子元素.child撑满，并且子元素能够适当地分配父元素的高度。

- 阅读更多 -

CSS transition（过度效果）详解

System

2024-08-10

所有,css

CSS 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; /* 当宽度变化时，持续1秒，使用缓进缓出的时间曲线 */
}
 
div:hover {
  width: 200px; /* 鼠标悬停时宽度变为200像素 */
}

在这个例子中，当鼠标悬停在 div 上时，它的宽度会在 1 秒内从 100 像素平滑过渡到 200 像素，时间曲线是 ease-in-out，即开始和结束时比较慢。

- 阅读更多 -

在前端vue3 开发媒体查询代码实现响应式布局（js 和css 方式）

System

2024-08-10

所有,css

在Vue 3中，可以使用Composition API结合媒体查询来创建响应式布局。以下是一个使用JavaScript和CSS媒体查询实现响应式布局的简单例子：




<template>
  <div :class="{ 'container': !isMobile, 'container-mobile': isMobile }">
    <!-- 内容 -->
  </div>
</template>
 
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
 
const isMobile = ref(false);
 
function handleResize() {
  isMobile.value = window.innerWidth < 768;
}
 
onMounted(() => {
  handleResize(); // 初始调用
  window.addEventListener('resize', handleResize);
});
 
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
</script>
 
<style>
.container {
  display: flex;
  /* 其他样式 */
}
 
.container-mobile {
  display: block;
  /* 移动设备的样式 */
}
 
/* CSS媒体查询 */
@media (max-width: 767px) {
  .container {
    /* 移动端容器样式 */
  }
}
</style>

在这个例子中，我们定义了一个响应式的引用变量isMobile，它会在窗口宽度小于768像素时被设置为true。handleResize函数会在组件挂载时调用，并且在窗口大小变化时被调用，以更新isMobile的值。同时，我们使用了CSS媒体查询来定义在不同屏幕尺寸下的容器样式。这样，我们就可以根据isMobile的值来切换不同的容器类名，实现响应式布局。

- 阅读更多 -

CSS三大定位方式（浮动、定位、弹性盒）详细解析

System

2024-08-10

所有,css

CSS提供了三种基本的定位机制：浮动（Floats）、绝对定位（Absolute Positioning）和弹性盒（Flexbox）。

浮动（Floats）
浮动是一种机制，它允许元素脱离正常文档流，并且向左或向右移动到其父元素的边界，或者其他浮动元素的边缘。




.float-left {
  float: left;
}
 
.float-right {
  float: right;
}

绝对定位（Absolute Positioning）
绝对定位是一种机制，它允许元素相对于最近的已定位（即绝对、相对或固定定位）的祖先元素定位。




.position-absolute {
  position: absolute;
  top: 10px;
  left: 10px;
}

弹性盒（Flexbox）
弹性盒是一种用于创建复杂的布局的新CSS3模块，它提供了在不同方向上排列（水平或垂直）的项目的能力。




.flex-container {
  display: flex;
}
 
.flex-item {
  flex: 1; /* 表示该项目将占用剩余空间的1/3 */
}

每种定位方式都有其优点和适用场景，例如浮动适合创建文字环绕的布局，绝对定位适合创建小的、复杂的组件，而弹性盒适合创建大型、灵活的布局。

- 阅读更多 -