分类 css3 下的文章

2024-08-09

以下是一个使用CSS3实现的粒子动效按钮的示例代码：

HTML:




<div class="particles-button">
  <button class="btn">点击我</button>
</div>

CSS:




.particles-button {
  position: relative;
  width: 150px;
  height: 50px;
}
 
.btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  z-index: 10;
}
 
.particles-button:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ff6e7f, #bfe9ff);
  z-index: 1;
  transition: opacity 0.5s ease;
  opacity: 0;
}
 
.particles-button:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 2;
  transition: background-size 0.5s ease;
  background-image: radial-gradient(circle at center, #fff 0%, rgba(255, 255, 255, 0) 70%), radial-gradient(circle at center, #fff 0%, rgba(255, 255, 255, 0) 70%);
  background-size: 10% 10%, 20% 20%;
  background-position: 0 0, 10px 10px;
}
 
.btn:hover + .particles-button:after {
  opacity: 1;
}
 
.btn:hover + .particles-button:before {
  background-size: 50% 50%, 100% 100%;
}

这段代码使用伪元素 :before 和 :after 来创建按钮的背景和动态效果。当鼠标悬停在按钮上时，这些伪元素的样式通过 CSS 过渡效果发生变化，从而形成粒子动效。

- 阅读更多 -

html中轮播图的做法及源码

System

2024-08-09

所有,css3

在HTML中创建一个简单的轮播图，可以使用以下源代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Slider</title>
<style>
  .slider {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
  }
 
  .slider img {
    width: 100%;
    height: 300px;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
  }
 
  .slider img.active {
    display: block;
  }
</style>
</head>
<body>
 
<div class="slider">
  <img src="image1.jpg" class="active">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>
 
<script>
  let currentIndex = 0;
  const images = document.querySelectorAll('.slider img');
  const imageCount = images.length;
 
  setInterval(function() {
    images[currentIndex].classList.remove('active');
    currentIndex = (currentIndex + 1) % imageCount;
    images[currentIndex].classList.add('active');
  }, 3000); // 时间间隔可以根据需要调整
</script>
 
</body>
</html>

这段代码中，我们定义了一个.slider类来包含轮播图的图片，并使用.active类来标记当前显示的图片。JavaScript 脚本定义了一个定时器，每隔一定时间切换.active类，从而实现图片的自动轮播效果。你需要将image1.jpg、image2.jpg和image3.jpg替换为你的实际图片文件路径。

- 阅读更多 -

前端相关知识(CSS)(美化页面效果)

System

2024-08-09

所有,css3

在CSS中，有多种方法可以美化页面效果，以下是一些常用的技巧：

使用CSS3的边框圆角（border-radius）属性来创建圆角边框。




.box {
  border: 2px solid #000;
  border-radius: 10px; /* 圆角的半径 */
}

使用CSS3的阴影效果（box-shadow 和 text-shadow）来增加层次感。




.box {
  box-shadow: 5px 5px 10px #000; /* 水平偏移 垂直偏移 模糊半径 颜色 */
}
 
.text {
  text-shadow: 2px 2px 4px #000;
}

使用CSS3的渐变（linear-gradient 和 radial-gradient）来创建色彩的过渡效果。




.gradient-box {
  background: linear-gradient(to right, red, yellow); /* 从左到右的红到黄渐变 */
}

使用CSS3的变换（transform）功能，如旋转（rotate）、缩放（scale）、平移（translate）和倾斜（skew）。




.rotate {
  transform: rotate(45deg); /* 顺时针旋转45度 */
}
 
.scale {
  transform: scale(1.5, 1.5); /* 水平和垂直方向都放大1.5倍 */
}

使用CSS3的动画（animation）和过渡（transition）属性来增加动态效果。




.animated-box {
  animation: move 2s infinite;
}
 
@keyframes move {
  0% { margin-left: 0; }
  100% { margin-left: 100px; }
}

这些都是CSS3中的高级特性，可以极大地增强页面的视觉效果。在实际开发中，可以根据需要灵活运用。

- 阅读更多 -

css实现霓虹灯特效字体

System

2024-08-09

所有,css3

要在CSS中实现一个霓虹灯特效的字体，你可以使用@keyframes动画来创建闪烁的效果，并使用text-shadow属性来创建霓虹灯的光晕。以下是一个简单的例子：




@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
 
.neon-text {
  color: #fff;
  font-size: 60px;
  font-weight: bold;
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de;
  animation: blink 1s infinite alternate;
}

在HTML中使用这个类：




<div class="neon-text">闪烁的文字</div>

这段代码定义了一个名为.neon-text的类，它将文字颜色设置为白色，并使用text-shadow属性添加了一系列的光晕效果，模拟霓虹灯的光线。同时，它使用了一个名为blink的@keyframes动画，通过改变透明度(opacity)来模拟闪烁效果。将此类应用于文本元素，文本就会闪烁，并且呈现出霓虹灯的外观。

- 阅读更多 -

element-dialog对话框去掉覆盖层后解决无法操作底层的按钮的问题

System

2024-08-09

所有,css3

在Element UI中，如果你遇到了在去掉element-dialog对话框的遮罩层之后，底下的按钮无法正常点击的问题，这通常是因为遮罩层在消失后留下了一个空白的位置，这个位置并没有被正确地重新赋予页面的其他部分。

解决这个问题的一个简单方法是，在关闭对话框后，手动触发一次页面滚动事件。这样做可以强制浏览器重新渲染页面，并确保底部的按钮可以正确地响应用户的点击事件。

以下是一个简单的代码示例，展示了如何在关闭element-dialog对话框后触发一次页面滚动事件：




// 假设你已经有了一个方法来关闭对话框
closeDialog() {
  this.$refs.myDialog.close(); // 这是Element UI关闭对话框的一种常见方式
  // 在对话框关闭之后，触发一次滚动事件
  window.scrollTo(0, 0); // 滚动到页面的顶部
  // 或者你也可以使用其他的滚动方法来触发重新渲染
  // 例如: document.body.scrollTop = 0;
}

在上面的代码中，window.scrollTo(0, 0)是将页面滚动到顶部，这样就可以使得遮罩层留下的空白区域不再存在，从而解决无法操作底部按钮的问题。如果你的页面结构复杂，可能需要使用更具体的方法来触发重新渲染，例如直接操作document.body的滚动属性。

- 阅读更多 -

基于CSS原生JS、Vue3.0技术各自实现序列帧动画效果

System

2024-08-09

所有,css3

由于这个问题涉及到多个技术栈，我将提供每个部分的核心代码。

CSS3实现序列帧动画：




/* 定义关键帧 */
@keyframes example {
  from {
    background-color: red;
  }
  to {
    background-color: yellow;
  }
}
 
/* 应用动画 */
.box {
  width: 100px;
  height: 100px;
  animation-name: example; /* 使用关键帧的名称 */
  animation-duration: 4s; /* 动画时长 */
}

原生JS实现序列帧动画：




// 获取元素
const box = document.querySelector('.box');
 
// 定义序列帧动画
const keyframes = [
  { backgroundColor: 'red' },
  { backgroundColor: 'yellow' }
];
 
// 应用动画
function animate(timeFraction) {
  const color = keyframes[Math.floor(timeFraction * keyframes.length)];
  box.style.backgroundColor = color.backgroundColor;
}
 
// 主循环
function animateLoop(time) {
  requestAnimationFrame(animateLoop);
  const timeFraction = (time / 1000) % keyframes.length;
  animate(timeFraction);
}
 
requestAnimationFrame(animateLoop);

Vue 3.0实现序列帧动画：

首先，在Vue组件中定义样式和关键帧：




/* 组件内部的<style>标签 */
<style>
@keyframes example {
  0%   { background-color: red; }
  100% { background-color: yellow; }
}
.box {
  width: 100px;
  height: 100px;
  animation: example 4s infinite;
}
</style>

然后，在模板中使用该样式：




<template>
  <div class="box"></div>
</template>

这样就实现了序列帧动画的Vue 3.0版本。注意，Vue 3.0中的动画是基于CSS的，所以我们使用了CSS的animation属性并设置了infinite来实现持续循环播放动画。

- 阅读更多 -

如何实现一个div垂直居中（至少3种方法）

System

2024-08-09

所有,css3

要实现一个div在页面上垂直居中，可以使用以下三种常见的方法：

使用Flexbox布局
使用Grid布局
使用绝对定位和transform属性

以下是每种方法的示例代码：

方法1: Flexbox布局




<!DOCTYPE html>
<html>
<head>
<style>
  body, html {
    height: 100%;
    margin: 0;
  }
  .container {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    height: 100%;
  }
  .centered-div {
    width: 200px;
    height: 100px;
    background-color: lightblue;
  }
</style>
</head>
<body>
 
<div class="container">
  <div class="centered-div">
    <!-- Content here -->
  </div>
</div>
 
</body>
</html>

方法2: Grid布局




<!DOCTYPE html>
<html>
<head>
<style>
  body, html {
    height: 100%;
    margin: 0;
  }
  .container {
    display: grid;
    place-items: center;
    height: 100%;
  }
  .centered-div {
    width: 200px;
    height: 100px;
    background-color: lightblue;
  }
</style>
</head>
<body>
 
<div class="container">
  <div class="centered-div">
    <!-- Content here -->
  </div>
</div>
 
</body>
</html>

方法3: 绝对定位和transform属性




<!DOCTYPE html>
<html>
<head>
<style>
  body, html {
    height: 100%;
    margin: 0;
  }
  .centered-div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 100px;
    background-color: lightblue;
  }
</style>
</head>
<body>
 
<div class="centered-div">
  <!-- Content here -->
</div>
 
</body>
</html>

以上三种方法都可以实现div的垂直居中，你可以根据自己的项目需求和个人喜好选择合适的方法。

- 阅读更多 -

CSS绘制向右箭头

System

2024-08-09

所有,css3

在CSS中，我们可以使用边框技巧来绘制向右的箭头。这是一个示例代码，它创建了一个向右的箭头：




.arrow-right {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid black;
}

HTML部分：




<div class="arrow-right"></div>

这段代码创建了一个向右的箭头，箭头的颜色可以通过修改border-top的颜色值来改变，border-left和border-right的宽度决定了箭头的宽度，border-top的宽度决定了箭头的高度。

- 阅读更多 -

使用css3在网页中实现各种三角形样式集合

System

2024-08-09

所有,css3

CSS3可以用来创建各种三角形样式。以下是一些示例代码：

基本的等边三角形：




.triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

等腰三角形：




.triangle-isosceles {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

直角三角形：




.triangle-right {
  width: 0;
  height: 0;
  border-top: 100px solid transparent;
  border-left: 100px solid red;
  border-bottom: 100px solid transparent;
}

等腰直角三角形：




.triangle-isosceles-right {
  width: 0;
  height: 0;
  border-top: 100px solid transparent;
  border-left: 100px solid red;
  border-bottom: 100px solid transparent;
}

斜角三角形：




.triangle-slope {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
}

等腰斜角三角形：




.triangle-isosceles-slope {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
}

每个示例都创建了一个三角形，你可以根据需要调整border-size、border-color和其他属性来自定义三角形的样式。

- 阅读更多 -

利用CSS在图片中添加文字

System

2024-08-09

所有,css3

要在图片上添加文字，可以使用CSS的::after伪元素或者::before伪元素，并将它们的content属性设置为需要显示的文本内容。同时，需要设置position属性为absolute或relative以确定文本的位置。

以下是一个简单的例子：

HTML:




<div class="image-container">
  <img src="image.jpg" alt="示例图片">
</div>

CSS:




.image-container {
  position: relative;
  display: inline-block; /* 或者其他的块级或行内块级元素 */
}
 
.image-container img {
  display: block; /* 避免底部空白 */
  width: 100%; /* 或者其他宽度设置 */
}
 
.image-container::after {
  content: '这里是文字';
  position: absolute;
  top: 0; /* 可以调整位置 */
  left: 0; /* 可以调整位置 */
  color: white; /* 文字颜色 */
  font-size: 20px; /* 文字大小 */
}

在这个例子中，.image-container是一个包含图片的容器，图片本身是容器的子元素。::after伪元素被用来在图片上添加文本。position属性设置为absolute使得文本可以自由地在图片上任意定位。content属性包含你想要显示的文本。可以通过调整top、left、right和bottom属性来控制文本的精确位置。

- 阅读更多 -