分类 css3 下的文章

2024-08-21

要在H5中实现背景左右滚动效果，可以使用CSS动画或者通过JavaScript来控制背景图片的位置。以下是一个简单的CSS动画示例，它将使背景图片左右滚动：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景滚动效果</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
 
  .background-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background-image: url('background.jpg');
    background-position: 0 0;
    background-repeat: repeat-x;
    animation: scroll-background 10s linear infinite;
  }
 
  @keyframes scroll-background {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -100% 0;
    }
  }
</style>
</head>
<body>
<div class="background-animation"></div>
</body>
</html>

确保替换background.jpg为你的背景图片路径。这段代码会创建一个全屏的div，背景图片会以动画形式从左向右无限循环滚动。可以通过调整animation属性中的时长和其他参数来改变滚动的速度和行为。

- 阅读更多 -

Three.js教程：顶点颜色数据插值计算

System

2024-08-21

所有,css3




// 假设我们已经有了一个Three.js的场景(scene)和一个渲染器(renderer)
 
// 创建一个新的几何体对象
var geometry = new THREE.BufferGeometry();
 
// 创建顶点位置的数据
var vertices = new Float32Array([
    0.0, 0.0, 0.0, // 顶点1坐标
    1.0, 0.0, 0.0, // 顶点2坐标
    0.5, 1.0, 0.0  // 顶点3坐标
]);
 
// 将顶点位置数据分配给几何体属性
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
 
// 创建顶点颜色数据
var colors = new Float32Array([
    1.0, 0.0, 0.0, // 顶点1颜色（红色）
    0.0, 1.0, 0.0, // 顶点2颜色（绿色）
    0.0, 0.0, 1.0  // 顶点3颜色（蓝色）
]);
 
// 将顶点颜色数据分配给几何体属性
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
 
// 设置材质，使用顶点颜色进行着色
var material = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors });
 
// 创建一个网格对象
var mesh = new THREE.Mesh(geometry, material);
 
// 将网格添加到场景中
scene.add(mesh);
 
// 渲染场景
renderer.render(scene, camera);

这段代码创建了一个简单的几何体，并为它定义了顶点颜色。然后，它使用了MeshBasicMaterial材质，设置vertexColors属性为THREE.VertexColors来指定使用顶点颜色进行着色。最后，将网格添加到场景中并进行渲染。这样，三角形的每个顶点都会被它自己定义的颜色所着色。

- 阅读更多 -

vue中使用animate.css

System

2024-08-21

所有,css3

在Vue中使用animate.css，首先需要安装animate.css：




npm install animate.css --save

然后在Vue组件中引入并使用：




<template>
  <div>
    <button @click="animate">点击我</button>
    <div :class="{'animate__animated': animateClass, 'animate__bounce': animateClass}">
      这是要动画的元素
    </div>
  </div>
</template>
 
<script>
import 'animate.css';
 
export default {
  data() {
    return {
      animateClass: false
    };
  },
  methods: {
    animate() {
      this.animateClass = true;
      setTimeout(() => {
        this.animateClass = false;
      }, 1000);
    }
  }
};
</script>

在上面的例子中，我们在Vue组件中引入了animate.css，并定义了一个方法animate来切换动画类名animateClass。当按钮被点击时，会给带有动画效果的元素添加一个名为animate__animated和animate__bounce的类，这会触发动画效果。动画完成后，通过setTimeout将类名移除，以停止动画。

- 阅读更多 -

【已解决】align-items：center失效，无法垂直居中问题！

System

2024-08-21

所有,css3

align-items: center; 是一个CSS属性，用于在Flexbox布局中垂直居中flex子项。如果你遇到 align-items: center;失效，无法垂直居中 的问题，可能的原因和解决方法如下：

可能原因:

没有在父容器上设置 display: flex; 或 display: inline-flex;。
子元素的高度大于父容器的高度，导致看起来像是没有效果。
存在更高优先级的样式覆盖了你的 align-items: center; 规则。
使用了不兼容的浏览器或者CSS级别较低的属性。

解决方法:

确保在父容器上设置了 display: flex; 或 display: inline-flex;。
检查并调整子元素和父容器的高度，确保父容器有足够的高度来展示垂直居中效果。
检查是否有其他CSS规则覆盖了你的 align-items: center; 规则，并相应地提高你的样式规则的优先级或重写那些被覆盖的规则。
如果是兼容性问题，请确保使用的是现代浏览器，或者使用Autoprefixer等工具来确保CSS规则的兼容性。

示例代码:




.parent {
  display: flex; /* 确保设置了Flex布局 */
  align-items: center; /* 设置垂直居中 */
  height: 100px; /* 确保有足够高度 */
}
 
.child {
  /* 子元素内容 */
}

确保父容器有足够的高度，并且子元素的高度不会超过父容器的高度，这样 align-items: center; 应该能正常工作。

- 阅读更多 -

flex布局中盒子高度影响排版问题

System

2024-08-21

所有,css3

在Flex布局中，盒子的高度可能会影响它们的排版。如果一个盒子的高度设置为0，或者由内容推动，而其他盒子的高度不足以支撑它们时，Flex项目可能会看起来像是“跳过”了这些盒子。

解决这个问题的方法是确保Flex项目有足够的空间来显示它们的内容，或者设置合适的最小高度。可以使用min-height属性来确保盒子至少有一定的高度，即使内容很少或为空。

例如，如果你有一个Flex容器，其中包含一些可能会有高内容或者空的Flex项目，你可以这样设置CSS：




.flex-container {
  display: flex;
}
 
.flex-item {
  min-height: 100px; /* 设置最小高度 */
}

这样，即使某些盒子是空的或者内容不多，它们也会保持最小的高度，不会被布局所忽略。

- 阅读更多 -

HTML实现网站欢迎页过渡

System

2024-08-21

所有,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>
        body, html {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #2254EB;
            transition: background 2s ease-in-out;
        }
        .content {
            text-align: center;
            color: white;
        }
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #ff9a9e, #fad0c4);
            transition: opacity 2s ease-in-out;
            opacity: 1;
        }
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>欢迎来到我的网站</h1>
        <p>页面将在几秒后开始过渡...</p>
    </div>
    <div class="overlay"></div>
    <script>
        // 页面加载完成后移除overlay和相关样式
        window.onload = function() {
            setTimeout(function() {
                document.querySelector('.overlay').classList.add('hidden');
                document.body.style.background = '#2254EB';
            }, 3000);
        };
    </script>
</body>
</html>

这段代码展示了如何使用CSS样式和JavaScript来实现一个简单的网站欢迎页面过渡效果。页面加载时，会有一个渐变覆盖层，3秒后逐渐消失，背景颜色也发生变化，展示出网站的实际内容。

- 阅读更多 -

H5页面全局添加加载动效

System

2024-08-21

所有,css3

在H5页面中，可以通过JavaScript和CSS来实现全局加载动效。以下是一个简单的示例，展示了如何为整个页面添加一个简单的加载动效：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全局加载动效</title>
<style>
  /* 加载动效样式 */
  .loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* 确保加载动效在其他内容之上 */
  }
  .loading-spinner {
    border: 4px solid #f3f3f3; /* 轻颜色的边框 */
    border-top: 4px solid #3498db; /* 蓝色边框 */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>
</head>
<body>
 
<div class="loading-overlay">
  <div class="loading-spinner"></div>
</div>
 
<!-- 页面内容 -->
 
<script>
  window.onload = function() {
    // 页面加载完成后移除加载动效
    document.querySelector('.loading-overlay').style.display = 'none';
  };
</script>
 
</body>
</html>

这段代码中，.loading-overlay 类用于创建一个覆盖整个页面的遮罩层，而 .loading-spinner 类则用于创建一个旋转的加载动效图标。CSS中的 @keyframes 规则定义了旋转动画，而JavaScript的 window.onload 函数确保在页面加载完成后移除加载动效，从而向用户隐藏加载动画。

- 阅读更多 -

9个非常有趣的HTML5 Canvas动画特效合集

System

2024-08-21

所有,css3

以下是9个使用HTML5 Canvas创建的有趣动画的实现代码示例。

旋转的圆形:




var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    x = canvas.width / 2,
    y = canvas.height / 2;
 
var radius = 50,
    rotAngle = 0;
 
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
    ctx.fillStyle = 'green';
    ctx.fill();
 
    rotAngle += 0.1;
    window.requestAnimationFrame(animate);
}
 
animate();

圆形进度加载器:




var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    centerX = canvas.width / 2,
    centerY = canvas.height / 2,
    radius = 50,
    endAngle = 2 * Math.PI;
 
var progress = 0.5;
 
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, endAngle * progress, false);
    ctx.lineWidth = 10;
    ctx.strokeStyle = 'green';
    ctx.stroke();
 
    if (progress < 1) {
        progress += 0.01;
        window.requestAnimationFrame(animate);
    }
}
 
animate();

旋转的文字:




var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    x = canvas.width / 2,
    y = canvas.height / 2;
 
var fontSize = 20,
    text = "HTML5",
    rotAngle = 0;
 
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.font = fontSize + 'px Arial';
    ctx.fillStyle = 'green';
    ctx.fillText(text, x, y);
 
    rotAngle += 0.01;
    ctx.translate(x, y);
    ctx.rotate(rotAngle);
    ctx.translate(-x, -y);
 
    window.requestAnimationFrame(animate);
}
 
animate();

发光文字:




var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    x = canvas.width / 2,
    y = canvas.height / 2;
 
var fontSize = 50,
    text = "HTML5",
    glowSize = 4;
 
function animate() {
    ctx.cle

- 阅读更多 -

css渐变

System

2024-08-21

所有,css3

CSS渐变是使用CSS创建的一种视觉效果，可以创建从一种颜色平滑过渡到另一种颜色的效果。CSS渐变可以是线性的也可以是径向的。

线性渐变：




.linear-gradient {
  background: linear-gradient(direction, color-stop1, color-stop2, ...);
}

径向渐变：




.radial-gradient {
  background: radial-gradient(shape size at position, start-color, ..., last-color);
}

例子：

线性渐变从蓝色到红色：




.linear-gradient {
  background: linear-gradient(to right, blue, red);
}

径向渐变从中心到边缘的绿色到红色：




.radial-gradient {
  background: radial-gradient(circle at center, green, red);
}

这些CSS渐变可以应用于任何HTML元素，并提供视觉上的吸引力和灵活性。

- 阅读更多 -

css让盒子跟随浏览器的大小而自适应

System

2024-08-21

所有,css3

要使盒子跟随浏览器的大小而自适应，可以使用CSS的百分比（%）或视口单位（vw, vh）。以下是两种方法的示例代码：

使用百分比：




.box {
  width: 50%; /* 宽度为浏览器宽度的50% */
  height: 50%; /* 高度为浏览器高度的50% */
}

使用视口单位：




.box {
  width: 10vw; /* 宽度为视口宽度的10% */
  height: 10vh; /* 高度为视口高度的10% */
}

使用这些方法，盒子将随着浏览器窗口的大小变化而自适应。百分比方法是相对于父元素，而视口单位是相对于浏览器窗口的大小。根据需求选择合适的单位。

- 阅读更多 -