System 发布的文章

CSS3DRenderer, CSS3DObject, OrthographicCamera API 结合使用案例

2024-08-17




import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
import { OrthographicCamera } from 'three';
 
// 创建CSS3DRenderer实例
const cssRenderer = new CSS3DRenderer();
cssRenderer.setSize(window.innerWidth, window.innerHeight);
cssRenderer.domElement.style.position = 'absolute';
cssRenderer.domElement.style.top = '0';
document.body.appendChild(cssRenderer.domElement);
 
// 创建正交摄像机
const camera = new OrthographicCamera(-window.innerWidth / 2, window.innerWidth / 2, window.innerHeight / 2, -window.innerHeight / 2, 1, 1000);
camera.position.set(0, 0, 500);
 
// 创建3D对象并添加到场景中
const scene = new THREE.Scene();
const box = new CSS3DObject(document.createElement('div'));
box.element.style.width = '100px';
box.element.style.height = '100px';
box.element.style.background = 'red';
box.position.set(0, 0, 0);
scene.add(box);
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

这段代码创建了一个CSS3DRenderer实例，并设置了正交摄像机，然后创建了一个CSS3DObject作为3D场景中的一个元素，并添加了一个<div>元素作为3D对象的外壳。最后，在一个循环中使用CSS3DRenderer来渲染场景。这个案例展示了如何将CSS元素与Three.js的3D场景相结合，为Web开发者提供了一个创建3D网页的新思路。

- 阅读更多 -

css3英文文字换行，超过两行...展示

System

2024-08-17

所有,css3

要在CSS中控制文本超过两行时显示省略号（...），可以使用-webkit-line-clamp属性结合display: -webkit-box和-webkit-box-orient: vertical。以下是实现这一效果的CSS代码示例：




.ellipsis-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

接下来，将这个类应用到你的HTML元素上：




<div class="ellipsis-multiline">
  这里是很长的文本内容，如果超过两行的话，剩余的文本内容将不会显示，而是以省略号结束。
</div>

注意：-webkit-line-clamp属性是非标准属性，主要用于WebKit引擎的浏览器，比如Chrome、Safari等。其他浏览器可能不支持此属性，因此请确保在使用时考虑兼容性问题。

- 阅读更多 -

【html本地工具】html+css+js本地音乐播放器，实现可视化音频频谱

System

2024-08-17

所有,css3

以下是一个简单的HTML本地音乐播放器示例，使用了HTML、CSS和JavaScript，并结合了audio元素和Web Audio API来实现可视化音频频谱。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Local Music Player with Audio Visualizer</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #222;
  }
  audio {
    width: 400px;
    margin: 20px;
  }
  canvas {
    width: 400px;
    height: 200px;
  }
</style>
</head>
<body>
<audio id="audio" controls preload="auto" crossOrigin="anonymous">
  Your browser does not support the audio element.
</audio>
<canvas id="visualizer"></canvas>
 
<script>
  const audio = document.getElementById('audio');
  const canvas = document.getElementById('visualizer');
  const ctx = canvas.getContext('2d');
  const audioSrc = 'path_to_your_audio_file.mp3'; // 替换为你的音频文件路径
 
  audio.addEventListener('loadedmetadata', function() {
    canvas.width = audio.clientWidth;
    canvas.height = audio.clientHeight;
  });
 
  audio.src = audioSrc;
 
  // 音频可视化函数
  function visualize() {
    const array = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(array);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    const barWidth = (canvas.width / array.length) * 2.5;
    let barHeight;
    for (let i = 0; i < array.length; i++) {
      barHeight = array[i] / 2;
      const r = barHeight + 25 * (i / array.length);
      const g = 250 * (i / array.length);
      const b = 250 * (i / array.length);
      ctx.fillStyle = `rgb(${r},${g},${b})`;
      ctx.fillRect(i * barWidth, canvas.height, barWidth, -barHeight);
    }
    requestAnimationFrame(visualize);
  }
 
  const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  const source = audioCtx.createMediaElementSource(audio);
  const analyser = audioCtx.createAnalyser();
 
  source.connect(analyser);
  analyser.connect(audioCtx.destination);
  audio.play();
 
  visualize();
</script>
</body>
</html>

在这个示例中，我们首先定义了一个简单的HTML结构，其中包括一个audio元素和一个canvas元素。然后，我们使用CSS为页面设置了基本的样式。接下来，我们在JavaScript部分创建了一个音频上下文，并将其与audio元素的源连接起来。我们还设置了一个analyser节点，这是Web Audio API中用于分析音频频谱数据的关键组件。

然后，我们定义了一个visualize函数，这个函数会在每个动画帧被调用，它使用analyser节点获取频率数据，并将这些数据绘制到canvas上，创建一个视觉表现形式的音频频谱。

- 阅读更多 -

css3+javaScript实现一个左右钟摆-摇晃的红灯笼网页特效

System

2024-08-17

所有,css3

以下是一个使用CSS3和JavaScript实现的左右钟摆摇晃的红灯笼网页特效的简化示例。这个示例仅包含实现摇晃效果的核心代码，没有包含用于调整钟摆样式的CSS代码。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Clock Shake Effect</title>
<style>
  .red-lamp {
    width: 100px;
    height: 200px;
    background-color: #ff0000;
    position: relative;
    animation: shake 0.5s;
    animation-iteration-count: infinite;
  }
  @keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    50% { transform: translateX(10px); }
    75% { transform: translateX(-10px); }
    100% { transform: translateX(10px); }
  }
</style>
</head>
<body>
<div class="red-lamp"></div>
<script>
// JavaScript code to add the shake effect is not needed for this example
// as the shake effect is purely CSS-based through the @keyframes animation.
</script>
</body>
</html>

这段代码定义了一个简单的.red-lamp类，它将创建一个红色的灯笼并应用无限循环的摇晃动画。动画是通过CSS的@keyframes规则定义的，实现了灯笼左右摇晃的效果。这个示例展示了如何使用CSS动画简化JavaScript动画实现，并减少页面加载时间和资源消耗。

- 阅读更多 -

【CSS】单边阴影、双边阴影、三边阴影

System

2024-08-17

所有,css3

CSS中创建单边、双边或三边阴影可以使用box-shadow属性。这个属性允许你指定水平偏移、垂直偏移、模糊半径、扩散半径以及阴影颜色。

单边阴影：




/* 水平偏移 垂直偏移 模糊半径 阴影颜色 */
.single-box-shadow {
  box-shadow: 10px 10px 5px #888888;
}

双边阴影：




/* 第一条阴影 */
.double-box-shadow-1 {
  box-shadow: -10px -10px 5px #888888;
}
 
/* 第二条阴影 */
.double-box-shadow-2 {
  box-shadow: 10px 10px 5px #888888;
}

三边阴影：




/* 第一条阴影 */
.triple-box-shadow-1 {
  box-shadow: -10px -10px 5px #888888;
}
 
/* 第二条阴影 */
.triple-box-shadow-2 {
  box-shadow: 10px 10px 5px #888888;
}
 
/* 第三条阴影 */
.triple-box-shadow-3 {
  box-shadow: 10px -10px 5px #888888;
}

在实际应用中，你可以根据需要调整阴影的颜色、偏移量和模糊半径。

- 阅读更多 -

css 2D转换

System

2024-08-17

所有,css3

CSS的2D转换功能使得页面上的元素可以进行移动、旋转、缩放和倾斜等操作。2D转换常用的CSS属性包括transform。

以下是一些使用CSS 2D转换的例子：

移动元素（translate）:




.element {
  transform: translate(50px, 100px);
}

旋转元素（rotate）:




.element {
  transform: rotate(45deg);
}

缩放元素（scale）:




.element {
  transform: scale(1.5, 2);
}

倾斜元素（skew）:




.element {
  transform: skew(30deg, 20deg);
}

你可以通过组合这些基本的转换函数，来实现更复杂的效果。同时，你还可以通过transform-origin属性来改变转换的原点，默认是元素的中心点。




.element {
  transform-origin: top left;
  transform: rotate(45deg);
}

以上代码将元素的左上角设置为转换的原点，然后元素绕此点旋转45度。

- 阅读更多 -

学习CSS3，实现红色心形loading特效

System

2024-08-17

所有,css3

以下是实现红色心形loading特效的CSS3代码示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>红色心形Loading特效</title>
<style>
  .loading-container {
    position: relative;
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
  }
 
  .loading-container::before,
  .loading-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    background: red;
    border-radius: 100%;
    animation: pulse 2s infinite ease-in-out;
  }
 
  .loading-container::before {
    width: 50px;
    height: 50px;
    transform: translateX(-50%);
  }
 
  .loading-container::after {
    width: 80px;
    height: 80px;
    transform: translateX(-50%);;
    animation-delay: .5s;
  }
 
  @keyframes pulse {
    0% {
      transform: translateX(-50%) scale(.8);
      opacity: 1;
    }
    
    100% {
      transform: translateX(-50%) scale(1.2);
      opacity: 0;
    }
  }
</style>
</head>
<body>
<div class="loading-container">
  <div></div>
</div>
</body>
</html>

这段代码使用了CSS伪元素::before和::after来创建心形，通过animation属性实现放大和淡出的动画效果，从而模拟出加载等待的场景。

System

2024-08-17

所有,css3




/* 定义一个容器 */
.container {
  width: 500px;
  height: 300px;
  background-color: #f0f0f0;
  border: 2px solid #000;
}
 
/* 定义一个子元素 */
.child {
  width: 100px;
  height: 100px;
  background-color: #ff0;
  margin: 10px;
  padding: 20px;
  border: 5px solid #00f;
  box-sizing: border-box; /* 确保边框和内边距不会增加总尺寸 */
}
 
/* 针对不同浏览器的私有前缀 */
.child {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

这段代码定义了一个容器和一个子元素，并确保了子元素的边框和内边距不会影响其总尺寸，从而使得布局更加容易控制。同时，为了处理不同浏览器对CSS3属性的支持差异，代码中添加了各种私有前缀。

System

2024-08-17

所有,css3

由于原始代码较为复杂且涉及到大量的图形和动画处理，我们将提供一个简化版本的示例，演示如何使用HTML5 <canvas> 元素模拟电子彩票的刮刮乐效果。




<!DOCTYPE html>
<html>
<head>
    <title>Canvas Simulated Lotto Draw</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="lottoCanvas" width="500" height="500"></canvas>
    <script>
        const canvas = document.getElementById('lottoCanvas');
        const ctx = canvas.getContext('2d');
        let numbers = [];
 
        // 初始化随机数
        function initNumbers() {
            numbers = [];
            for (let i = 0; i < 7; i++) {
                let number;
                do {
                    number = Math.floor(Math.random() * 37) + 1;
                } while (numbers.includes(number));
                numbers.push(number);
            }
            numbers.sort((a, b) => a - b);
        }
 
        // 绘制彩票区域
        function drawLottoNumbers() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.font = '20px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            for (let i = 0; i < numbers.length; i++) {
                const x = 50 + i * 70;
                const y = 50;
                const radius = 30;
                ctx.beginPath();
                ctx.arc(x, y, radius, 0, 2 * Math.PI);
                ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
                ctx.fill();
                ctx.stroke();
                ctx.fillStyle = '#000';
                ctx.fillText(numbers[i], x, y);
            }
        }
 
        // 开始有声有色的电子彩票的机制
        function startSimulatedDraw() {
            initNumbers();
            setInterval(() => {
                drawLottoNumbers();
            }, 50);
        }
 
        startSimulatedDraw();
    </script>
</body>
</html>

这段代码将在网页上创建一个500x500像素的<canvas>元素，并在其中随机生成7个1到37之间的不重复整数，模拟电子彩票上的中奖号码。每50毫秒号码会更新一次，形成有趣的“刮刮乐”效果。这个简化的示例教学意义在于演示了如何使用HTML5 <canvas> 元素进行基本的图形绘制和动画制作。

- 阅读更多 -

css3前端开发，动态特效transform案例1-沿X轴倾斜和旋转

System

2024-08-17

所有,css3




/* 基础样式 */
.box {
  width: 100px;
  height: 100px;
  background-color: #333;
  margin: 50px;
  /* 设置动画名称和持续时间 */
  animation: rotateAndSkew 5s infinite alternate linear;
}
 
/* 关键帧定义 */
@keyframes rotateAndSkew {
  from {
    /* 初始状态：没有旋转和倾斜 */
    transform: rotate(0deg) skewX(0deg);
  }
  to {
    /* 结束状态：绕X轴旋转45度并且沿X轴倾斜20度 */
    transform: rotate(45deg) skewX(20deg);
  }
}

这段代码定义了一个名为.box的类，它将应用动画效果。动画名称为rotateAndSkew，通过变形（transform）属性实现沿X轴的倾斜（skewX）和绕X轴的旋转（rotate）。动画从初始状态开始，经过5秒，到达结束状态，并且是无限循环，每次循环的状态都会交替出现（alternate），动画的速度变化是线性的（linear）。

- 阅读更多 -