标签 css3 下的文章

2024-08-16




/* 设置基础的卡片容器样式 */
.card-container {
  width: 300px;
  height: 200px;
  perspective: 1000px;
}
 
/* 设置卡片样式 */
.card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1s;
}
 
/* 设置卡片背面样式 */
.card .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background-color: #f0f0f0;
  text-align: center;
  line-height: 200px; /* 使文本垂直居中 */
}
 
/* 设置卡片正面样式 */
.card .front {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #bbada0;
  text-align: center;
  line-height: 200px; /* 使文本垂直居中 */
}
 
/* 当卡片容器被悬停时，卡片翻转180度 */
.card-container:hover .card {
  transform: rotateY(180deg);
}

这段代码展示了如何使用CSS3中的3D转换和悬停效果来创建卡片翻牌效果。.card-container 是卡片的外层容器，它定义了一个3D视图，并设置了一个视距，以便子元素可以进行3D转换。.card 是卡片本身，它使用 transform-style: preserve-3d; 来保持其子元素的3D位置，并且设置了一个过渡效果，以便在悬停时可以平滑地旋转。.back 和 .front 分别代表卡片的正反面，.back 使用 backface-visibility: hidden; 来在卡片翻转时隐藏背面内容，而 .front 则设置了背景颜色和文本对齐。最后，当 .card-container 被悬停时，卡片的 transform 属性被设置为旋转Y轴180度，从而显示出背面内容。

- 阅读更多 -

CSS3渐变

System

2024-08-16

所有,css3

CSS3 渐变是使用 linear-gradient() 或 radial-gradient() 函数创建的。

线性渐变（Linear Gradients）：




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

示例：




div {
  background: linear-gradient(to right, red, yellow);
}

径向渐变（Radial Gradients）：




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

示例：




div {
  background: radial-gradient(circle, red, yellow, green);
}

方向可以用角度或方位词（如 to top, to right 等）来指定。径向渐变的形状可以是 circle 或 ellipse，大小可以设置为 closest-side, farthest-side, closest-corner, farthest-corner, 或者特定的宽度和高度。位置决定渐变的中心点，可以是百分比或具体像素值。

- 阅读更多 -

Css3-边框图片设置

System

2024-08-16

所有,css3

CSS3中可以使用border-image属性来设置边框的图片。这个属性允许你指定一个图片作为元素的边框，并且可以进行拉伸、重复或者裁剪等处理。

基本的border-image属性语法如下：




.element {
  border-image-source: url('border.png'); /* 边框图片的路径 */
  border-image-slice: 27; /* 图片边框向内偏移 */
  border-image-width: 5px; /* 边框图片的宽度 */
  border-image-outset: 5px; /* 边框图片向外延伸的距离 */
  border-image-repeat: stretch; /* 图片边框的平铺方式 */
}

示例代码：




<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 200px;
  height: 200px;
  border: 10px solid transparent;
  border-image: url('border.png') 30 round; /* 使用border-image属性的简写 */
}
</style>
</head>
<body>
 
<div class="box"></div>
 
</body>
</html>

在这个例子中，.box类定义了一个200px x 200px的盒子，并设置了一个10px的透明边框，边框图片使用了border.png，图片会被切片（30表示切片的百分比），并且根据需要进行平铺（round表示平铺方式）。

- 阅读更多 -

css3 如何实现圆边框的渐变

System

2024-08-16

所有,css3

CSS3可以使用border-radius属性创建圆形，并使用linear-gradient或radial-gradient实现圆边框的渐变效果。以下是一个使用线性渐变创建圆形渐变边框的例子：




.circle-with-gradient {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* 创建完全圆形 */
  background: linear-gradient(to right, red, blue); /* 渐变色 */
  border: 10px solid transparent; /* 创建边框 */
}

HTML部分：




<div class="circle-with-gradient"></div>

在这个例子中，.circle-with-gradient 类创建了一个宽度和高度都是100px的圆形div，border-radius 设置为50%确保它是圆形。background 属性使用线性渐变从左到右从红色渐变到蓝色。border 设置为10px透明边框，使得渐变仅限于圆的边缘，形成边框的效果。

- 阅读更多 -

CSS3渐变、过渡

System

2024-08-16

所有,css3

CSS3 渐变（Gradients）和过渡（Transitions）是网页设计中非常有用的功能。

渐变：

CSS3 提供了两种类型的渐变 - 线性渐变（Linear Gradients）和径向渐变（Radial Gradients）。

线性渐变：




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

径向渐变：




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

过渡：

过渡可以在不使用Flash或JavaScript的情况下，在状态之间更改CSS属性。




.transition {
  background-color: red;
  transition: background-color 0.5s ease-in-out;
  /* 当鼠标悬停时改变背景色 */
}
 
.transition:hover {
  background-color: blue;
}

在上述代码中，.transition 类定义了一个背景颜色为红色的元素，并且当鼠标悬停在该元素上时，背景色会在0.5秒内从红色平滑地过渡到蓝色。这种过渡效果是由 transition 属性实现的，它定义了哪个属性应该被变化、变化需要多久以及使用哪种过渡效果。

- 阅读更多 -

threejs得WebGLRenderer+CSS3DRenderer结合使用

System

2024-08-16

所有,css3

在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时间。

- 阅读更多 -

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使正方体不断旋转。

- 阅读更多 -

使用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中的时间长度。

- 阅读更多 -