System 发布的文章

2024-08-24




/* 定义一个圆形进度条容器 */
.progress-ring {
  width: 100px;
  height: 100px;
  position: relative;
}
 
/* 定义圆形轮廓，并设置渐变背景 */
.progress-ring::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  background: conic-gradient(
    #3498db 0%,
    #3498db 50%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: auto 100%;
  background-repeat: no-repeat;
  transition: background-position 2s infinite; /* 设置背景位置的过渡动画，实现动态效果 */
}
 
/* 触发动画 */
.progress-ring:hover::after {
  background-position: 0 100%; /* 动画触发点，从上到下 */
}

这段代码定义了一个圆形容器，并在其伪元素中使用渐变背景创建了一个线条。通过改变伪元素的背景位置，我们可以触发一个从上到下的动画过渡效果，模拟出脉冲动画。这个例子展示了CSS3的 conic-gradient 和 background-position 的用法，以及如何通过伪类触发动画。

2024-08-24

以下是一个使用CSS实现跳动足球的简单示例：

HTML:




<div class="soccer-ball"></div>

CSS:




.soccer-ball {
  width: 100px;
  height: 100px;
  background: url('soccer-ball.png') no-repeat;
  background-size: cover;
  border-radius: 50%;
  position: relative;
  animation: bounce 2s infinite;
}
 
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  50% {
    transform: translateY(-30px);
    animation-timing-function: ease-in;
  }
}

确保你有足球图片 soccer-ball.png 或者替换为你的足球图片路径。这段代码会创建一个在上下跳动的足球动画。

- 阅读更多 -

CSS:利用浮动实现多个盒子并排

System

2024-08-24

所有,css3

在CSS中，可以使用float属性来实现多个盒子并排排列。这里提供一个简单的例子，展示如何使用float来实现三个盒子并排排列。

HTML代码：




<div class="container">
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <div class="box">盒子3</div>
</div>

CSS代码：




.box {
  float: left; /* 设置盒子向左浮动 */
  width: 100px; /* 设置盒子宽度 */
  height: 100px; /* 设置盒子高度 */
  margin: 5px; /* 设置盒子之间的间距 */
  background-color: #f0f0f0; /* 设置盒子背景色 */
  text-align: center; /* 设置文本居中 */
  line-height: 100px; /* 设置文本行高居中 */
}

在这个例子中，.box类定义了盒子的共同样式，包括浮动、宽度、高度、背景色和文本居中样式。.box类应用于每个盒子元素，使它们并排排列。通过设置float: left;，每个盒子会尽可能地向左浮动并排排列。如果父容器（.container）的宽度不足以并排放下所有盒子，那么后面的盒子会自动移到前一个盒子下方。

- 阅读更多 -

CSS3：绘制多边形

System

2024-08-24

所有,css3

在CSS3中，您可以使用clip-path属性来绘制多边形。clip-path属性允许您创建一个只有元素的某个区域可以显示的剪裁路径。您可以定义一个多边形的顶点，然后这个多边形将成为元素的剪裁区域。

以下是一个使用clip-path属性来绘制一个三角形的例子：




.triangle {
  width: 200px;
  height: 200px;
  background-color: red;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

HTML部分：




<div class="triangle"></div>

在这个例子中，.triangle类的clip-path属性设置为polygon(50% 0%, 100% 100%, 0% 100%)，这定义了一个三角形。每一对值定义了多边形顶点的x和y坐标（基于元素的宽度和高度）。

您可以根据需要调整clip-path属性中的坐标值来创建不同形状的多边形。

System

2024-08-24

所有,css3




<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>基础布局</title>
    <style>
        body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
    </style>
</head>
<body>
    <h1>我的第一篇博客</h1>
    <p>这是一个段落。</p>
    <hr>
    <!-- 文字强调 -->
    <p>这是<strong>粗体</strong>文本。</p>
    <p>这是<em>斜体</em>文本。</p>
    <p>这是<abbr title="Hypertext Markup Language">HTML</abbr>。</p>
    <hr>
    <!-- 图片 -->
    <img src="path/to/image.jpg" alt="描述文字">
    <hr>
    <!-- 链接 -->
    <a href="https://www.example.com">访问我的主页</a>
    <a href="mailto:someone@example.com">发送邮件</a>
    <hr>
    <!-- 音频 -->
    <audio controls>
        <source src="path/to/audio.mp3" type="audio/mpeg">
        您的浏览器不支持 audio 元素。
    </audio>
</body>
</html>

这个代码示例展示了如何在HTML5中使用不同的标签来创建一个基础的网页布局，包括标题、段落、图片、链接和音频。同时，使用了CSS来设置字体样式。这些是前端开发的基础知识，对于学习前端开发的开发者来说具有很好的教育价值。

- 阅读更多 -

CSS3动画实现多个跳动小球（语音输入动画）

System

2024-08-24

所有,css3




/* 定义基本的小球样式 */
.ball {
  width: 50px;
  height: 50px;
  background-color: blue;
  border-radius: 50%;
  position: absolute;
  bottom: 10px;
  animation: bounce-animation 1s infinite alternate;
}
 
/* 定义跳动动画 */
@keyframes bounce-animation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
 
/* 定义不同大小和颜色的小球，通过类名区分 */
.small-ball {
  width: 30px;
  height: 30px;
  background-color: red;
}
 
.medium-ball {
  width: 40px;
  height: 40px;
  background-color: green;
}
 
.large-ball {
  width: 60px;
  height: 60px;
  background-color: purple;
}
 
/* HTML结构 */
<div class="ball small-ball" style="left: 10px;"></div>
<div class="ball medium-ball" style="left: 60px;"></div>
<div class="ball large-ball" style="left: 110px;"></div>

这段代码定义了一个小球的基本样式和跳动动画，并展示了如何通过添加不同的类来创建不同大小和颜色的小球。在HTML结构中，我们创建了三个不同大小和颜色的小球，并通过style属性设置了它们在屏幕上的位置。这样，我们就实现了一个简单的语音输入动画。

- 阅读更多 -

【css】相对定位，绝对定位和固定定位

System

2024-08-24

所有,css3

在CSS中，有三种基本的定位方式：

静态定位（Static Positioning）
相对定位（Relative Positioning）
绝对定位（Absolute Positioning）
固定定位（Fixed Positioning）
静态定位：
静态定位是默认的定位方式。在这种方式下，元素按照正常的文档流进行布局。




div {
  position: static;
}

相对定位：
相对定位是一种较为特殊的定位方式，它对元素进行相对于其正常位置的定位。




div {
  position: relative;
  top: 20px;
  left: 40px;
}

绝对定位：
绝对定位是一种强大的定位方式，它对元素进行相对于其最近的已定位（即非 static）的祖先元素的定位。




div {
  position: absolute;
  top: 20px;
  right: 15px;
}

固定定位：
固定定位是一种特殊的绝对定位，其要点在于元素相对于浏览器窗口是固定位置。




div {
  position: fixed;
  bottom: 10px;
  left: 5px;
}

以上就是CSS中的四种基本定位方式。每种定位方式都有其特点，可以根据实际需求选择使用。

- 阅读更多 -

超实用CSS技巧总结——背景和边框

System

2024-08-24

所有,css3




/* 简化的CSS样式，用于创建一个具有边框和背景图案的元素 */
.element {
  /* 设置元素的宽度和高度 */
  width: 200px;
  height: 200px;
 
  /* 添加背景图案 */
  background-image: linear-gradient(to right, #ff7e5f, #feb47b);
 
  /* 设置背景图案的大小和位置 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
 
  /* 添加边框效果 */
  border: 2px solid #d6452b;
 
  /* 圆角边框 */
  border-radius: 50%;
 
  /* 其他样式，如阴影等 */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

这段代码展示了如何使用CSS为一个元素添加具有边框和背景图案的效果，包括圆角和阴影等装饰效果。这是一个简化的例子，主要用于教学目的，展示了如何将背景图案和边框组合在一起，创建一个具有高级视觉效果的网页元素。

- 阅读更多 -

前端获取scss文件中的变量值

System

2024-08-24

所有,css

在前端获取SCSS文件中的变量值通常涉及到以下几个步骤：

将SCSS编译成CSS。
在JavaScript中加载编译后的CSS文件。
解析CSS文件，获取变量值。

以下是一个简单的示例，展示如何在JavaScript中获取SCSS变量的值：

首先，你需要安装sass和node-sass这两个npm包：




npm install sass node-sass --save-dev

然后，你可以在你的webpack配置中添加一个loader来编译SCSS文件：




// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
};

接下来，在你的SCSS文件中定义变量：




// styles.scss
$color: blue;

编译SCSS文件后，你可以在JavaScript中通过读取样式来获取这个变量的值：




// main.js
import './styles.scss';
 
// 创建一个临时的元素来获取计算后的样式
const tempEl = document.createElement('div');
tempEl.style.color = 'var(--color)'; // "var(--color)" 是编译后的变量
 
// 获取计算后的颜色值
const color = window.getComputedStyle(tempEl).color;
 
console.log(color); // 输出：rgb(0, 0, 255) 或者是对应的颜色名称 'blue'

请注意，这种方法并不是直接读取SCSS文件中的变量，而是通过JavaScript获取CSS样式表中变量的值。SCSS在编译时会将变量转换成常规的CSS值，并且在生成的CSS文件中，变量会被它们的值所替换。因此，在JavaScript中，我们可以通过操作样式来间接获取这些值。

- 阅读更多 -

分享一个超炫酷的css开场动画

System

2024-08-24

所有,css

以下是一个使用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>
  @keyframes spin-fade {
    0% {
      opacity: 0;
      transform: scale(0) rotate(-360deg);
    }
    100% {
      opacity: 1;
      transform: scale(1) rotate(0deg);
    }
  }
 
  .spinner {
    width: 50px;
    height: 50px;
    background-color: #673ab7;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: spin-fade 2s ease-in-out infinite;
  }
 
  .spinner:nth-child(2) {
    background-color: #ff5722;
    animation-delay: -1s;
  }
 
  .spinner:nth-child(3) {
    background-color: #4caf50;
    animation-delay: -0.5s;
  }
 
  .spinner:nth-child(4) {
    background-color: #03a9f4;
    animation-delay: 0s;
  }
 
  .spinner:nth-child(5) {
    background-color: #e91e63;
    animation-delay: 0.5s;
  }
 
  .spinner:nth-child(6) {
    background-color: #9c27b0;
    animation-delay: 1s;
  }
</style>
</head>
<body>
<div class="spinner"></div>
<div class="spinner"></div>
<div class="spinner"></div>
<div class="spinner"></div>
<div class="spinner"></div>
<div class="spinner"></div>
</body>
</html>

这段代码使用了CSS3的@keyframes规则来定义一个名为spin-fade的动画，它会旋转和渐变不透明度。.spinner类被设计为一个圆形的固有属性，并且通过nth-child选择器应用了不同的颜色和动画延迟，以创建一个连续旋转的效果。

- 阅读更多 -