1. 首页
  2. 标签
  3. css
使用HTML、CSS和JavaScript来创建一个粒子效果，粒子会跟随鼠标点击位置生成
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>Particle Effect</title>
<style>
  #particles-js {
    width: 100%;
    height: 100vh;
    background-color: #222;
    overflow: hidden;
  }
</style>
</head>
<body>
 
<div id="particles-js"></div>
 
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<script>
  particlesJS('particles-js', {
    "particles": {
      "number": {
        "value": 80,
        "density": {
          "enable": true,
          "value_area": 800
        }
      },
      "color": {
        "value": "#ffffff"
      },
      "shape": {
        "type": "circle",
        "stroke": {
          "width": 0,
          "color": "#000000"
        },
        "polygon": {
          "nb_sides": 5
        },
        "image": {
          "src": "img/github.svg",
          "width": 100,
          "height": 100
        }
      },
      "opacity": {
        "value": 0.5,
        "random": false,
        "anim": {
          "enable": false,
          "speed": 1,
          "opacity_min": 0.25,
          "sync": false
        }
      },
      "size": {
        "value": 5,
        "random": true,
        "anim": {
          "enable": false,
          "speed": 40,
          "size_min": 0.1,
          "sync": false
        }
      },
      "line_linked": {
        "enable": true,
        "distance": 150,
        "color": "#ffffff",
        "opacity": 0.4,
        "width": 1
      },
      "move": {
        "enable": true,
        "speed": 2,
        "direction": "none",
        "random": false,
        "straight": false,
        "out_mode": "out",
        "attract": {
          "enable": false,
          "rotateX": 600,
          "rotateY": 1200
        }
      }
    },
    "interactivity": {
      "detect_on": "canvas",
      "events": {
        "onhover": {
          "enable": true,
          "mode": "repulse"
        },
        "onclick": {
          "enable": true,
          "mode": "push"
        },
        "resize": true
      },
      "modes": {
        "grab": {
          "distance": 400,
          "line_linked": {
            "opacity": 1
          }
        },
        "bubble": {
          "distance": 400,
          "size": 40,
          "duration": 2,
- 阅读更多 -
html css网页制作成品——作业静态HTML网页设计模板 保护动物网页作业制作
System
2024-08-16
所有,css

以下是一个简单的静态HTML网页设计模板，用于教育目的，展示如何创建一个基本的HTML网页。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>保护动物</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f3f3f3;
        }
        .header {
            text-align: center;
            padding: 20px;
            background-color: #1abc9c;
            color: white;
        }
        .nav {
            float: left;
            width: 20%;
            background: #ecf0f1;
            padding: 15px;
        }
        .nav ul {
            list-style-type: none;
            padding: 0;
        }
        .nav ul a {
            text-decoration: none;
        }
        .content {
            float: right;
            width: 80%;
            padding: 20px;
        }
        .footer {
            clear: both;
            text-align: center;
            padding: 20px;
            background-color: #1abc9c;
            color: white;
        }
    </style>
</head>
<body>
 
<div class="header">
    <h1>保护动物</h1>
</div>
 
<div class="nav">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">动物护理</a></li>
        <li><a href="#">动物图片</a></li>
    </ul>
</div>
 
<div class="content">
    <h2>关于保护动物</h2>
    <p>保护动物是一个非常重要的议题，它关系到生物多样性、生态平衡以及我们的生活环境。这里有一些关于保护动物的基本知识和方法。</p>
    <!-- 更多内容 -->
</div>
 
<div class="footer">
    <p>版权所有 © 保护动物保护组织</p>
</div>
 
</body>
</html>

这个模板展示了一个基本的网页布局，包括头部（Header）、导航（Nav）、内容区（Content）和底部（Footer）。同时，它使用了简单的CSS样式来增强用户界面的美观度。这个模板可以作为学习者制作静态网页的起点。

- 阅读更多 -
DOM CSS: Understanding the Intersection of HTML and Style
System
2024-08-16
所有,css

在HTML和CSS的交叉点，我们可以理解为HTML定义了内容的结构，而CSS定义了内容的样式。理解这一点对于我们理解如何有效地应用样式至正确的HTML元素至关重要。

在HTML文档中，我们可以通过三种方式应用CSS样式：

  1. 内联样式：直接在HTML元素的style属性中定义样式。
  2. 内部样式表：在HTML文档的<head>部分，通过<style>标签定义样式。
  3. 外部样式表：创建一个单独的CSS文件，并通过HTML的<link>标签引入。

下面是一个简单的例子，展示了这三种方式的应用：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Example</title>
    <!-- 内部样式表 -->
    <style>
        .red-text {
            color: red;
        }
        .blue-text {
            color: blue;
        }
    </style>
    <!-- 外部样式表 -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 内联样式 -->
    <h1 style="color: green;">Hello, World!</h1>
    <p class="red-text">I am red.</p>
    <p class="blue-text">I am blue.</p>
</body>
</html>

在这个例子中，我们定义了三种不同的样式类别：一个内联样式应用于<h1>元素，一个内部样式表应用于.red-text和.blue-text类，一个外部样式表可能包含更多样式规则。

CSS样式表的交叉点是指样式规则与HTML元素之间的关系，确保每条样式规则都应用于正确的HTML元素。这是通过在HTML元素上指定类（class）或ID（id）来实现的，这样CSS选择器就可以匹配并应用样式。

- 阅读更多 -
uniapp taro 如何使用 UnoCSS 原子化css
System
2024-08-16
所有,css

UnoCSS 是一个面向未来的现代化 CSS 框架，它提供了原子化 CSS 的概念。在 Taro 和 Uniapp 中使用 UnoCSS，你需要先安装 UnoCSS 及其相关的依赖。

  1. 安装 UnoCSS 及其 CLI 工具：



npm install @unocss/core @unocss/preset-uno unocss
  1. 在项目中创建一个 unocss.config.ts 文件，并配置你的原子样式规则：



// unocss.config.ts
import { defineConfig } from 'unocss'
 
export default defineConfig({
  rules: [
    // 这里定义你的原子样式规则
    ['m-10', { 'margin': '10px' }],
    ['p-10', { 'padding': '10px' }],
    // 更多规则...
  ],
})
  1. 在 Taro 或 Uniapp 项目中使用 UnoCSS：



// 在组件或页面中
import { generateUtilityClasses } from 'unocss/vite'
 
const classes = generateUtilityClasses('m-10 p-10')
 
export default {
  // 在页面或组件的样式中使用生成的类名
  style: `
    .${classes.m10} {
      margin: 10px;
    }
    .${classes.p10} {
      padding: 10px;
    }
  `
}

请注意，上述代码是一个简化示例，实际使用时你需要配置 Vite 插件以及正确地集成到你的构建系统中。UnoCSS 官方文档提供了详细的集成指南和更多高级功能。

- 阅读更多 -
css 怎么绘制一个带圆角的渐变色的边框
System
2024-08-16
所有,css

在CSS中，您可以使用border-radius属性来创建圆角，并使用linear-gradient函数来创建渐变色的边框。以下是一个示例代码：




.gradient-border {
  border: 2px solid transparent;
  background-image: linear-gradient(to right, #ff7e5f, #feb47b);
  border-radius: 10px; /* 圆角的大小 */
  padding: 10px;
  width: 200px;
  text-align: center;
}
 
.gradient-border::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background-image: linear-gradient(to right, #ff7e5f, #feb47b);
  border-radius: inherit;
  z-index: -1;
}

HTML部分：




<div class="gradient-border">带圆角的渐变色边框</div>

这段代码定义了一个带圆角的渐变色边框，其中.gradient-border类用于设置边框的圆角和渐变背景，而.gradient-border::after伪元素用于创建一个完全相同的渐变边框效果，并且通过border-radius: inherit;继承了圆角。这种方法避免了双边框问题，并且可以很好地处理圆角。

- 阅读更多 -
css 实现排行榜向上滚动
System
2024-08-16
所有,css

要实现排行榜向上滚动的效果，可以使用CSS动画。以下是一个简单的例子，展示了如何使用CSS Keyframes实现一个简单的向上滚动效果：

HTML:




<div class="ranking-list">
  <div class="ranking-item">
    <span class="rank">1</span>
    <span class="name">Item 1</span>
  </div>
  <div class="ranking-item">
    <span class="rank">2</span>
    <span class="name">Item 2</span>
  </div>
  <!-- 更多排行项 -->
</div>

CSS:




.ranking-list {
  overflow: hidden;
  position: relative;
  height: 50px; /* 控制可见区域的高度 */
}
 
.ranking-item {
  line-height: 50px; /* 与.ranking-list的高度一致 */
  padding: 0 10px;
  position: absolute;
  bottom: 0;
  width: 100%;
  animation: scroll-up 10s linear infinite; /* 控制动画持续时间和行为 */
}
 
.ranking-item:nth-child(2) {
  animation-delay: 5s; /* 为每个项目设置不同的动画延迟 */
}
 
/* 更多动画样式 */
 
@keyframes scroll-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50px); /* 每次向上移动的距离 */
  }
}

这段代码会创建一个类似排行榜的列表，所有项目会不断地向上滚动。每个.ranking-item都被设置了一个动画，使其向上移动。通过调整animation-delay属性，可以使每个项目都有不同的启动时间，从而创建一个连续滚动的效果。通过调整animation属性中的duration值，可以控制滚动的速度和频率。

- 阅读更多 -
推荐开源项目：cssesc —— CSS字符串与标识符的安全逃逸大师
System
2024-08-16
所有,css

"csesesc" 是一个用于处理CSS字符串和标识符安全转义的库。它可以帮助开发者在处理用户输入或其他不受信任的数据时，避免XSS攻击和相关的安全问题。

以下是一个简单的Python代码示例，展示如何使用这个库来转义字符串：




from cssesc import escape
 
# 转义字符串
escaped_string = escape('Hello, World!')
print(escaped_string)  # 输出: Hello, World\!
 
# 转义标识符
escaped_identifier = escape('Hello World', is_identifier=True)
print(escaped_identifier)  # 输出: Hello\ World

在这个例子中，escape 函数被用来转义字符串和标识符。对于字符串，它会转义任何可能导致HTML解析错误的字符。对于标识符，它会转义任何不允许用在CSS标识符中的字符。这有助于提高代码的安全性，减少XSS攻击的风险。

- 阅读更多 -
Tailwindcss 提取组件
System
2024-08-16
所有,css

在Tailwind CSS中，提取和重用组件的最佳实践是使用自定义指令。以下是一个如何定义和使用Tailwind CSS组件的示例：

首先，在你的JavaScript文件中定义一个组件：




// 引入 Tailwind CSS 自定义指令
const { addComponents } = require('@vitejs/plugin-vue-jsx');
 
// 定义组件对象
const buttonComponent = {
  '.btn': {
    '@apply px-4 py-2 bg-blue-500 text-white font-semibold rounded-lg shadow-md': '',
  },
};
 
// 添加组件到Tailwind CSS配置
module.exports = function (options) {
  addComponents(buttonComponent);
};

然后，在你的Vue组件中使用这个自定义的按钮组件：




<template>
  <button class="btn">Click Me</button>
</template>
 
<script>
export default {
  // 组件逻辑
};
</script>

在上述示例中，我们定义了一个.btn类，它将应用Tailwind CSS中的一组样式。然后，我们在JavaScript文件中使用@vitejs/plugin-vue-jsx的addComponents方法来添加这个组件到Tailwind CSS配置中。在Vue组件的模板中，我们使用class="btn"来应用这个自定义样式。

请注意，这个示例假设你正在使用Vite和Vue JSX。如果你使用的是其他构建工具或框架，你需要相应地调整代码。

- 阅读更多 -
python系列&deep_study系列：Gradio中文教程Customizing your demo with CSS and Javascript
System
2024-08-16
所有,css

在上一节中，我们学习了如何使用Gradio库创建一个简单的机器学习模型demo，并且自定义了demo的页面布局。在这一节中，我们将学习如何使用CSS来进一步自定义我们的demo页面。

Gradio允许你添加自定义的CSS代码来进一步美化你的demo。你可以通过interface函数的css参数来添加CSS代码。

下面是一个简单的例子，我们将为demo页面的标题添加自定义的CSS样式：




import gradio as gr
 
def predict(sentence):
    return f"You entered: {sentence}"
 
interface = gr.Interface(
    fn=predict,
    inputs="text",
    outputs="text",
    title="My Custom Demo",
    css="""
    .gradio-title {
        color: blue;
        font-size: 24px;
        font-weight: bold;
    }
    """
)
 
interface.launch()

在这个例子中，我们定义了一个输入文本框和一个输出文本框的接口。我们通过css参数添加了一段CSS代码，这段代码将改变页面标题的颜色、大小和粗细。

当你运行这段代码并访问生成的demo页面时，你会看到页面标题的样式已经变成了蓝色、24像素大小、加粗。

这只是CSS定制的一个简单例子，Gradio允许你添加更多复杂的CSS规则来进一步美化你的demo页面。你可以通过查阅Gradio官方文档来了解更多关于CSS定制的信息。

- 阅读更多 -
CSS学习记录10
System
2024-08-16
所有,css

在CSS中，我们可以使用伪类选择器来定制元素的特定状态。例如，:hover可以用来定制鼠标悬停在元素上时的样式。

以下是一个简单的示例，展示了如何使用CSS伪类选择器来改变鼠标悬停在链接上时的颜色：




/* 普通链接的默认样式 */
a {
  color: blue;
  text-decoration: none;
}
 
/* 鼠标悬停时链接的样式 */
a:hover {
  color: red;
}

在这个例子中，当鼠标悬停在<a>元素上时，链接的颜色会变成红色。这是一个很基础的示例，但展示了如何使用CSS伪类选择器来增强用户体验。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号