Tech Blog

2024-08-16

在Three.js中，WebGLRenderer用于渲染3D场景，而CSS3DRenderer用于渲染使用CSS样式的3D元素。你可以将它们结合使用，以便利用两者各自的优势。以下是一个简单的例子，展示如何同时使用WebGLRenderer和CSS3DRenderer：




import * as THREE from 'three';
 
// 创建3D场景
const scene = new THREE.Scene();
 
// 创建WebGL渲染器
const webglRenderer = new THREE.WebGLRenderer({ antialias: true });
webglRenderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(webglRenderer.domElement);
 
// 创建CSS 3D渲染器
const cssRenderer = new THREE.CSS3DRenderer();
cssRenderer.setSize(window.innerWidth, window.innerHeight);
cssRenderer.domElement.style.position = 'absolute';
cssRenderer.domElement.style.top = 0;
document.body.appendChild(cssRenderer.domElement);
 
// 创建一个3D物体
const geometry = new THREE.BoxGeometry(100, 100, 100);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
 
// 创建一个CSS 3D元素
const cssElement = document.createElement('div');
cssElement.style.width = '100px';
cssElement.style.height = '100px';
cssElement.style.background = 'red';
const cssObject = new THREE.CSS3DObject(cssElement);
scene.add(cssObject);
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
 
  // 更新物体和渲染
  webglRenderer.render(scene, camera);
  cssRenderer.render(scene, camera);
}
 
animate();

在这个例子中，我们创建了一个3D立方体使用WebGLRenderer渲染，并创建了一个使用CSS样式的3D元素使用CSS3DRenderer渲染。两者渲染的结果会叠加在一起。你可以根据需要将它们放置在不同的层级或调整样式以实现所需的效果。

- 阅读更多 -

JS+CSS3点击粒子烟花动画js特效

System

2024-08-16

所有,css3

以下是一个简单的JavaScript和CSS3实现的烟花弹动动画的示例代码：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Click Confetti Animation</title>
<style>
  body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #111;
  }
  .confetti {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
  }
</style>
</head>
<body>
 
<button id="startConfetti">Click Me For Confetti!</button>
 
<canvas id="confetti-canvas" width="1770" height="700"></canvas>
 
<script>
  const canvas = document.getElementById('confetti-canvas');
  const ctx = canvas.getContext('2d');
  const confetti = new Confetti({
    parent: canvas,
    gravity: 0.25,
    velocity: 60,
    size: 8,
    width: canvas.width,
    height: canvas.height,
    x: 0.5,
    y: 0.5
  });
 
  document.getElementById('startConfetti').addEventListener('click', () => {
    confetti.start();
  });
 
  class Confetti {
    constructor(options) {
      this.parent = options.parent;
      this.gravity = options.gravity;
      this.velocity = options.velocity;
      this.size = options.size;
      this.width = options.width;
      this.height = options.height;
      this.x = options.x;
      this.y = options.y;
      this.running = false;
      this.interval = null;
    }
 
    start() {
      if (!this.running) {
        this.running = true;
        this.interval = setInterval(() => this.draw(), 1000 / 60);
      }
    }
 
    stop() {
      if (this.running) {
        this.running = false;
        clearInterval(this.interval);
      }
    }
 
    draw() {
      ctx.clearRect(0, 0, this.width, this.height);
      ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
      ctx.beginPath();
      ctx.arc(this.x * this.width, this.y * this.height, this.size, 0, Math.PI * 2);
      ctx.fill();
 
      if (this.y >= 1) {
        this.stop();
      }
 
      this.velocity += this.gravity;
      this.y += this.velocity;
    }
  }
</script>
 
</body>
</html>

这段代码定义了一个简单的烟花类Confetti，它可以在提供的canvas上绘制烟花并使其下落。在HTML中，有一个按钮用于触发烟花动画的开始，并且有一个canvas元素用于绘制烟花。CSS负责设置canvas的样式。

这个示例实现了基本的烟花弹动效果，但是你可以根据需要扩展Confetti类来添加更多特性，比如不同形状的烟花、多种烟花颜色等。

- 阅读更多 -

CSS3实现图片的3D旋转效果

System

2024-08-16

所有,css3

要使用CSS3实现图片的3D旋转效果，你可以使用transform属性的rotateY函数来创建Y轴的旋转，以及perspective属性来添加一些3D效果。下面是一个简单的例子：

HTML:




<div class="container">
  <img src="path_to_your_image.jpg" alt="Rotating Image" class="rotate-image">
</div>

CSS:




.container {
  perspective: 800px; /* 设置透视距离，增加3D效果 */
  width: 400px; /* 容器宽度 */
  height: 300px; /* 容器高度 */
  margin: 50px auto; /* 上下间距，左右居中 */
}
 
.rotate-image {
  width: 100%; /* 图片宽度 */
  height: auto; /* 图片高度 */
  transition: transform 5s infinite; /* 应用旋转动画 */
  transform-style: preserve-3d; /* 保持3D效果 */
}
 
/* 触发动画 */
.container:hover .rotate-image {
  transform: rotateY(360deg); /* Y轴旋转360度 */
}

这段代码会在鼠标悬停在.container上时触发.rotate-image的3D旋转效果，它会持续旋转360度，每次动画时长为5秒，并且无限循环。你可以根据需要调整.container的perspective值和.rotate-image的transition时间。

- 阅读更多 -

CSS实现呼吸效果

System

2024-08-16

所有,css3

要在CSS中实现呼吸效果，可以使用@keyframes规则创建一个渐变动画，并通过改变元素的透明度或其他属性来模拟呼吸效果。以下是一个简单的示例，它使用了透明度的变化来模拟一个呼吸效果：




/* 定义一个名为breathe的动画 */
@keyframes breathe {
    0% {
        opacity: 0.5; /* 动画开始时透明度为0.5 */
    }
    50% {
        opacity: 1; /* 动画中间时透明度为1（完全不透明） */
    }
    100% {
        opacity: 0.5; /* 动画结束时透明度回到0.5 */
    }
}
 
/* 应用于想要有呼吸效果的元素 */
.breathing-element {
    animation: breathe 2s ease-in-out infinite; /* 使用动画，设置持续时间、缓动函数和重复次数 */
}

在HTML中，你可以这样使用这个效果：




<div class="breathing-element">This element will have a breathing effect.</div>

这段代码会使得类名为breathing-element的元素有一个简单的呼吸效果，即透明度会在0.5和1之间变化。动画的持续时间是2秒，缓动函数是ease-in-out，意味着开始和结束时速度较慢，而动画中间时速度较快，infinite表示动画无限次数循环。

- 阅读更多 -

css3d制作正方体

System

2024-08-16

所有,css3

要使用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 auto;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate 5s infinite linear;
  }
 
  .side {
    position: absolute;
    width: 100px;
    height: 100px;
    background: #f0f0f0;
    box-shadow: 0 0 5px #ccc;
  }
 
  /* Front face */
  .front {
    background: #FF5733;
    transform: translateZ(50px);
  }
 
  /* Back face */
  .back {
    background: #33FF77;
    transform: translateZ(-50px);
  }
 
  /* Top face */
  .top {
    background: #33FFFF;
    transform: rotateX(90deg) translateZ(50px);
  }
 
  /* Bottom face */
  .bottom {
    background: #FF7F50;
    transform: rotateX(90deg) translateZ(50px);
  }
 
  /* Right face */
  .right {
    background: #FFFF00;
    transform: rotateY(90deg) translateZ(50px);
  }
 
  /* Left face */
  .left {
    background: #FFC0CB;
    transform: rotateY(90deg) translateZ(50px);
  }
 
  @keyframes rotate {
    0% {
      transform: rotateX(0deg) rotateY(0deg);
    }
    100% {
      transform: rotateX(360deg) rotateY(360deg);
    }
  }
</style>
</head>
<body>
<div class="cube">
  <div class="side front"></div>
  <div class="side back"></div>
  <div class="side top"></div>
  <div class="side bottom"></div>
  <div class="side right"></div>
  <div class="side left"></div>
</div>
</body>
</html>

这段代码定义了一个类名为.cube的容器，它包含6个.side类的子元素，每个子元素代表正方体的一个面。通过transform属性的不同值，我们旋转和平移这些面以形成一个动态旋转的正方体。动画rotate使正方体不断旋转。

- 阅读更多 -

按钮扫光动画（纯css实现）

System

2024-08-16

所有,css3

要实现一个按钮扫光动画，可以使用CSS3的动画特性。以下是一个简单的例子：

HTML:




<button class="scanline-button">Click Me</button>

CSS:




.scanline-button {
  position: relative;
  background-color: #4CAF50;
  color: white;
  padding: 15px 32px;
  font-size: 16px;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.3s;
}
 
.scanline-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
  mix-blend-mode: multiply;
  animation: scanline 1s linear infinite;
}
 
@keyframes scanline {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
 
.scanline-button:hover {
  background-color: #3e8e41;
}

这段CSS代码创建了一个扫光效果，.scanline-button::before伪元素用来实现扫光动画，通过@keyframes定义了一个左右移动的动画，并且通过animation属性应用到按钮上。按钮被悬停时背景色会变深，增加了一些交互反馈。

- 阅读更多 -

使用css3实现一个超浪漫的新年倒计时_css3轮播图倒计时切换

System

2024-08-16

所有,css3

以下是一个使用CSS3制作的简单的年夜饭倒计时轮播图样例。这个样例使用了CSS3动画和keyframes来实现图片的切换效果，以及HTML和CSS来构建页面布局。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Year Countdown Slider</title>
<style>
  .countdown-slider {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
  }
 
  .slide {
    position: absolute;
    width: 100%;
    height: 500px;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: fadeInOut 10s infinite;
  }
 
  .slide:nth-child(1) {
    background-image: url('image1.jpg');
    animation-delay: 0s;
  }
 
  .slide:nth-child(2) {
    background-image: url('image2.jpg');
    animation-delay: 2s;
  }
 
  .slide:nth-child(3) {
    background-image: url('image3.jpg');
    animation-delay: 4s;
  }
 
  .slide:nth-child(4) {
    background-image: url('image4.jpg');
    animation-delay: 6s;
  }
 
  .slide:nth-child(5) {
    background-image: url('image5.jpg');
    animation-delay: 8s;
  }
 
  @keyframes fadeInOut {
    0% {
      opacity: 0;
    }
    5% {
      opacity: 1;
    }
    17% {
      opacity: 1;
    }
    20% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
</style>
</head>
<body>
<div class="countdown-slider">
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
</div>
</body>
</html>

在这个例子中，.countdown-slider 是用来容纳所有旋转图片的容器，.slide 类则用来定义每张图片的样式和动画效果。每个.slide元素都设置了不同的背景图片和动画延迟时间，以便它们在指定的时间点开始动画。@keyframes fadeInOut定义了图片的淡入和淡出效果。

请注意，你需要替换image1.jpg, image2.jpg等为实际的图片路径。此外，这个例子中的图片在5秒内循环切换，如果你需要不同的倒计时时间，你可以调整animation-delay和animation中的时间长度。

- 阅读更多 -

从 0 开始实现一个 SpringBoot + Vue 项目

System

2024-08-16

所有,vue.js

实现一个 SpringBoot + Vue 项目需要以下步骤：

创建 Vue 前端项目：




# 安装 Vue CLI
npm install -g @vue/cli
 
# 创建新的 Vue 项目
vue create my-vue-app

创建 SpringBoot 后端项目：




# 使用 Spring Initializr 快速生成项目
https://start.spring.io/
 
# 将生成的项目导入到 IDE 中，比如 IntelliJ IDEA 或者 Eclipse

在 Vue 项目中集成并启动前端服务（开发模式）：




cd my-vue-app
npm run serve

在 SpringBoot 项目中设置 CORS 跨域处理，并创建 API 接口：




// 在 SpringBoot 配置文件 application.properties 中添加 CORS 配置
spring.servlet.multipart.enabled=true
spring.servlet.multipart.max-file-size=128KB
spring.servlet.multipart.max-request-size=128KB
 
@Configuration
public class WebConfig implements WebMvcConfigurer {
 
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("http://localhost:8080");
    }
}
 
@RestController
public class MyController {
 
    @GetMapping("/api/data")
    public ResponseEntity<String> getData() {
        return ResponseEntity.ok("Hello from SpringBoot");
    }
}

在 Vue 前端中发起 API 请求：




// 在 Vue 组件中
<template>
  <div>{{ message }}</div>
</template>
 
<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        const response = await this.axios.get('http://localhost:8080/api/data');
        this.message = response.data;
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

配置 SpringBoot 项目使其与前端运行在同一主机和端口上，或者通过代理配置让 Vue 前端请求被代理到 SpringBoot 后端服务：




// 在 Vue 项目中 vue.config.js 文件
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
};

构建并部署前后端应用：




# 构建 Vue 前端项目
cd my-vue-app
npm run build
 
# 构建 SpringBoot 后端项目
# 使用 Maven 或 Gradle 构建 JAR 或 WAR 包
# 部署到服务器，例如使用 Spring Boot Maven Plugin 或者 jar 命令

以上步骤提供了一个简化的流程，实际项目中还需要考虑更多细节，如数据库连接、认证和授权、日志记录、单元测试、持续集成等。

- 阅读更多 -

html、css、js实现图片放大功能，包括拖拽和滚动焦点缩放

System

2024-08-16

所有,css

以下是一个简单的HTML、CSS和JavaScript代码示例，实现了图片的放大功能，包括拖拽和滚轮控制的缩放。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Zoom</title>
<style>
  #imageContainer {
    width: 500px;
    height: 300px;
    overflow: hidden;
    position: relative;
    cursor: move;
    border: 1px solid #000;
  }
  img {
    position: absolute;
    width: 100%;
    height: auto;
    transform-origin: top left;
    transition: transform 0.1s;
  }
</style>
</head>
<body>
<div id="imageContainer">
  <img id="zoomableImage" src="path_to_your_image.jpg" alt="Zoomable Image">
</div>
 
<script>
  const container = document.getElementById('imageContainer');
  const img = document.getElementById('zoomableImage');
  let startX, startY, x, y;
 
  container.addEventListener('mousedown', function(e) {
    startX = e.pageX - x;
    startY = e.pageY - y;
    container.style.cursor = 'grabbing';
    document.addEventListener('mousemove', moveImage);
    document.addEventListener('mouseup', stopMoving);
  });
 
  function moveImage(e) {
    x = e.pageX - startX;
    y = e.pageY - startY;
    img.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
  }
 
  function stopMoving() {
    container.style.cursor = 'move';
    document.removeEventListener('mousemove', moveImage);
    document.removeEventListener('mouseup', stopMoving);
  }
 
  container.addEventListener('wheel', function(e) {
    e.preventDefault();
    const scale = img.getBoundingClientRect().width / container.offsetWidth;
    const scaleFactor = e.deltaY > 0 ? 1.1 : 0.9;
    img.style.transform = 'translate(' + x + 'px, ' + y + 'px) scale(' + scale * scaleFactor + ')';
  });
</script>
</body>
</html>

在这个示例中，图片可以通过鼠标拖拽来移动，并且可以通过滚轮的滚动（向上为放大，向下为缩小）来缩放。你需要替换path_to_your_image.jpg为你的图片路径。这个示例提供了基本的放大缩小功能，没有包括边界检查或任何性能优化。

- 阅读更多 -

css：过渡transition 、转换transform、动画animation

System

2024-08-16

所有,css

CSS中的过渡（transition）、转换（transform）和动画（animation）是用于创建动态效果的不同特性。

过渡（Transition）：
过渡可以在样式改变时平滑地过渡到新样式。例如，当鼠标悬停时，颜色平滑过渡到新的颜色。




div {
  background-color: blue;
  transition: background-color 1s;
}
 
div:hover {
  background-color: red;
}

转换（Transform）：
转换可以应用平移、旋转、缩放和倾斜效果。




div {
  transform: rotate(0deg) scale(1);
  transition: transform 1s;
}
 
div:hover {
  transform: rotate(360deg) scale(2);
}

动画（Animation）：
动画可以创建更复杂的动态效果，并且可以控制每一帧。




@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
div {
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

这些特性可以结合使用以创建更复杂和生动的界面效果。

- 阅读更多 -