1. 首页
  2. 分类
  3. 前端技术
使用css3实现一个超浪漫的新年倒计时
System
2024-08-15
所有,css3

以下是一个使用HTML和CSS3实现的简单新年倒计时示例：




<!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</title>
<style>
  .countdown {
    font-size: 48px;
    font-weight: bold;
    text-align: center;
  }
  .day {
    animation: day-countdown 1s infinite;
  }
  @keyframes day-countdown {
    0% {
      color: #ff0;
    }
    100% {
      color: #f0f;
    }
  }
</style>
</head>
<body>
<div class="countdown day">01</div>
 
<script>
// JavaScript 控制倒计时
const newYear = new Date('2023-01-01T00:00:00'); // 请将日期更改为新的一年开始的时间
 
function countdown() {
  const now = new Date();
  const distance = newYear - now;
 
  if (distance < 0) {
    clearInterval(intervalId);
    document.querySelector('.countdown').textContent = '00';
  } else {
    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    document.querySelector('.countdown').textContent = days.toString().padStart(2, '0');
  }
}
 
countdown(); // 初始运行
const intervalId = setInterval(countdown, 1000); // 每秒更新
</script>
</body>
</html>

这段代码会在网页上显示一个倒计时天数，从1开始，并且每秒更新。JavaScript 脚本负责计算剩余时间，并更新页面上的数字。CSS3 中的 @keyframes 用于创建颜色变化的动画效果。这个示例简单易懂，适合作为新手学习CSS动画的入门项目。

- 阅读更多 -
前端必学的CSS制作Switch动画开关按钮演示
System
2024-08-15
所有,css3



/* 设置开关按钮的基本样式 */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin: 0;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
 
/* 设置开关按钮内部元素的基本样式 */
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
 
/* 设置开关按钮轨道的基本样式 */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
 
/* 设置开关按钮轨道内的小圆点的基本样式 */
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
 
/* 当输入框被选中时，轨道的背景色改变 */
input:checked + .slider {
  background-color: #2196F3;
}
 
/* 当输入框被选中时，轨道内的小圆点的位置改变 */
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
 
/* 当鼠标悬停在开关按钮上时，轨道的背景色改变 */
.switch:hover .slider {
  background-color: #2196F3;
}
 
/* 当鼠标悬停在开关按钮上且输入框被选中时，轨道内的小圆点的位置改变 */
input:checked + .slider:hover:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
 
/* 当开关处于活跃状态（即选中）时，轨道的边框样式 */
.slider.round:before {
  border-radius: 50%;
}

这段代码展示了如何使用CSS创建一个简单的Switch开关按钮，并且包括了鼠标悬停时的样式变化。它使用了:before伪元素来实现小圆点的移动，并利用了CSS的transition属性来实现平滑的动画效果。

- 阅读更多 -
CSS设置元素的高宽为屏幕页面的高宽
System
2024-08-15
所有,css3

要使用CSS设置一个元素的宽度和高度为屏幕页面的高度和宽度，可以使用vw（视口宽度单位）和vh（视口高度单位）。以下是一个简单的例子：




/* 设置元素宽度为100%的视口宽度，高度为100%的视口高度 */
.full-screen {
  width: 100vw;
  height: 100vh;
}

在HTML中使用这个类：




<div class="full-screen">
  这个元素的宽度和高度会匹配屏幕的宽度和高度。
</div>

这样.full-screen类的元素就会占据整个视口的宽度和高度。

- 阅读更多 -
Nodejs 入门8 NeDB 轻量级的Node.js 数据库
System
2024-08-15
所有,javascript



const Datastore = require('nedb');
const path = require('path');
 
// 创建一个新的NeDB数据库实例，指定数据库文件的路径
const db = new Datastore({
    filename: path.join(__dirname, 'access.db'), // 数据库文件名
    autoload: true // 自动加载数据库
});
 
// 插入一条记录
db.insert({
    ip: '192.168.1.1',
    date: new Date()
}, (err, doc) => {
    if (err) {
        return console.error(err);
    }
    console.log('记录插入成功:', doc);
});
 
// 查询记录
db.find({ ip: '192.168.1.1' }, (err, docs) => {
    if (err) {
        return console.error(err);
    }
    console.log('查询结果:', docs);
});
 
// 更新记录
db.update({ ip: '192.168.1.1' }, { $set: { date: new Date() } }, {}, (err, numReplaced) => {
    if (err) {
        return console.error(err);
    }
    console.log('更新记录数:', numReplaced);
});
 
// 删除记录
db.remove({ ip: '192.168.1.1' }, {}, (err, numRemoved) => {
    if (err) {
        return console.error(err);
    }
    console.log('删除记录数:', numRemoved);
});

这段代码展示了如何使用NeDB进行基本的CURD操作。首先，我们创建了一个NeDB实例，指定了数据库文件的位置并设置了自动加载。然后，我们演示了如何插入一条记录，查询记录，更新记录和删除记录。每个操作都使用了回调函数来处理可能发生的错误和返回的结果。

- 阅读更多 -
【前端】3.总结一下前端css样式规范
System
2024-08-15
所有,css3

CSS样式规范可以帮助保持代码的一致性和可维护性。以下是一些关键的规范点：

  1. 命名规范：类名和ID应该具有描述性，使用驼峰命名法（camelCase）或短横线命名（kebab-case）。



/* 正确的命名 */
.headerNavigation { /* ... */ }
.site-logo { /* ... */ }
 
/* 不推荐的命名 */
.hd-nav { /* ... */ }
.site_logo { /* ... */ }
  1. 缩进和换行：使用2个空格进行缩进，在选择器和花括号之间保留空格。



.selector {
  property: value;
}
  1. 空格：在属性值前后保留空格。



.selector {
  property: value; /* 在冒号前后保留空格 */
}
  1. 选择器组：相关的选择器可以并排书写，每个选择器独占一行。



/* 并排书写选择器 */
h1, h2, h3 {
  font-weight: bold;
}
 
/* 不推荐将所有选择器放在同一行 */
h1, h2, h3 { font-weight: bold; }
  1. 属性顺序：将相关的属性按照特定的顺序组织，如布局定位属性（display, position, top, right, bottom, left, float, clear, visibility, overflow）、盒模型属性（width, height, margin, padding, border）、文本属性（font, line-height, text-align, color, text-transform）、背景属性（background, background-image, background-position）、动画属性等。



.selector {
  display: block;
  position: relative;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 20px;
  font-size: 16px;
  background-color: #f0f0f0;
}
  1. 注释：使用注释描述样式的目的和用途。



/* 头部导航区域 */
.header-navigation {
  /* 样式规则 */
}
  1. 避免过度嵌套：避免不必要的嵌套，以保持规则简洁明了。



/* 避免过度嵌套 */
.parent {
  color: red;
 
  .child {
    color: green; /* 不推荐在子选择器中重复父选择器的样式 */
  }
}
  1. 使用SCSS、LESS等预处理器：预处理器提供了变量、混合（mixins）、函数等高级功能，可以提高CSS开发效率。



// 使用SCSS变量
$font-stack: Helvetica, sans-serif;
 
body {
  font-family: $font-stack;
  color: #333;
}
  1. 性能优化：避免不必要的复杂选择器和过度使用伪类。



/* 避免不必要的选择器嵌套 */
a:hover {
  color: blue; /* 直接使用伪类，不要通过父元素进行引导 */
}
  1. 移动优先或响应式样式：根据设计稿设置合适的断点，适配不同屏幕尺寸。



/* 响应式布局 */
.container {
  width: 100%;
}
 
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
 
@media (min-width: 992px
- 阅读更多 -
移动端bug2:盒子内容溢出或超出界面，pc端可以滚动，移动端无法滚动
System
2024-08-15
所有,css3

这个问题通常是由于CSS样式设置不正确导致的。在移动端，如果盒子内容溢出，而盒子本身没有设置为可滚动的，移动端用户将无法通过滚动来查看溢出的内容。

解决方法：

  1. 确保盒子（例如div）具有足够的大小来包含其内容。
  2. 如果内容确实需要滚动，确保在CSS中为盒子设置了overflow: auto; 或者 overflow-y: auto; 属性。这样盒子内容超出时，用户可以在移动端上下滚动来查看。

示例CSS代码：




.scrollable-box {
  height: 200px; /* 设置盒子的高度 */
  overflow-y: auto; /* 设置垂直滚动条 */
}

确保在移动端设备上测试，以验证问题是否已解决。如果问题仍然存在，可能需要检查其他CSS样式或JavaScript代码是否影响了盒子的滚动行为。

- 阅读更多 -
D3.js实现线条的流动效果（从一端移动到另一端并且变色）
System
2024-08-15
所有,css3

以下是一个使用D3.js创建线条流动效果的简单示例。这段代码会创建一个线条，它从图表的一侧移动到另一侧，并在移动过程中更改颜色。




<!DOCTYPE html>
<html>
<head>
  <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
<svg width="500" height="200"></svg>
 
<script>
  var svg = d3.select("svg"),
      width = +svg.attr("width"),
      height = +svg.attr("height");
 
  var line = svg.append("line")
      .attr("x1", 0)
      .attr("y1", height / 2)
      .attr("x2", width)
      .attr("y2", height / 2)
      .attr("stroke", "blue");
 
  d3.interval(function() {
    var x = line.attr("x1");
    line.attr("x1", x == width ? 0 : x + 1)
        .attr("x2", x == width ? width : x + 1)
        .attr("stroke", x == width ? "blue" : "red");
  }, 100); // 每100毫秒更新一次位置和颜色
</script>
 
</body>
</html>

这段代码使用了D3.js的d3.interval函数来创建一个定时器，每100毫秒更新线条的起点和终点的横坐标，并相应地改变线条的颜色。当线条到达svg的最右侧时，它会重置回初始位置并改回原来的颜色。

- 阅读更多 -
CSS3 2D变形 过渡 动画
System
2024-08-15
所有,css3

CSS3 2D变形、过渡和动画是一个强大的工具，可以用来创建动态的用户界面和富媒体内容。以下是一个简单的示例，展示了如何将2D变形、过渡和动画应用于一个简单的HTML元素。

HTML:




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

CSS:




.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 30px;
  /* 2D变形 */
  transform: rotate(0deg) scale(1);
  /* 过渡效果 */
  transition: transform 0.5s ease-in-out;
}
 
.box:hover {
  /* 鼠标悬停时的变形 */
  transform: rotate(360deg) scale(1.5);
}
 
/* 使用关键帧动画 */
@keyframes growShrink {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
 
.box.animated {
  /* 触发动画 */
  animation: growShrink 2s infinite alternate;
}

在这个例子中，.box 元素在没有鼠标悬停时保持正常大小和旋转角度，当鼠标悬停时，它会旋转和放大。通过.animated 类，可以触发一个无限循环的动画，该动画会在大小和正常状态之间切换。这个例子演示了如何结合使用过渡和关键帧动画来创造更生动的用户界面元素。

- 阅读更多 -
Vue3后台管理系统SVG图标
System
2024-08-15
所有,css3

在Vue 3中，我们可以使用SVG图标的方式有多种，这里我们使用的是SVG Sprite的方式，这种方式可以帮助我们更好的管理和优化SVG图标。

首先，我们需要在项目中安装一个库，叫做svg-sprite-loader，这个库可以帮助我们把SVG图标作为一个sprite来进行管理。




npm install svg-sprite-loader --save-dev

然后，我们需要在vue.config.js中配置这个loader，以确保我们可以正确的加载SVG图标。




const { defineConfig } = require('@vue/cli-service')
const path = require('path')
 
function resolve(dir) {
  return path.join(__dirname, dir)
}
 
module.exports = defineConfig({
  chainWebpack: (config) => {
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }
})

然后，我们需要创建一个用于存放SVG图标的文件夹，并且在这个文件夹中，我们需要创建一个index.js文件，这个文件会帮助我们导入所有的SVG图标，并且注册为Vue组件。




// src/icons/index.js
 
import { App } from 'vue'
import { resolve } from 'path'
import { readDirSync } from './utils'
 
const req = require.context('./svg', false, /\.svg$/)
const requireAll = (requireContext) => requireContext.keys().map(requireContext)
 
requireAll(req)
 
const install = (app) => {
  req.keys().forEach((key) => {
    const componentConfig = req(key)
    app.component(componentConfig.default.id.split('&')[1], componentConfig.default)
  })
}
 
export default { install }

在上面的代码中，我们使用了require.context来帮助我们导入./svg文件夹中的所有SVG图标文件。然后，我们通过遍历这些图标，把它们注册为Vue组件。

最后，我们需要在main.js中注册这个icons插件，以便所有的SVG图标都可以作为Vue组件来使用。




import { createApp } from 'vue'
import App from './App.vue'
import icons from './icons'
 
const app = createApp(App)
app.use(icons)
app.mount('#app')

现在，我们可以在任何组件中使用SVG图标了，只需要像使用普通组件一样使用它们即可。




<template>
  <div>
    <home-icon />
  </div>
</template>
 
<script>
import { defineComponent } from 'vue'
import HomeIcon fr
- 阅读更多 -
css3实现图片瀑布流,根据屏幕大小列可变和不可变的的瀑布流
System
2024-08-15
所有,css3

要使用CSS3实现一个图片瀑布流，可以使用CSS3的column-width和column-gap属性来创建列，并使用break-inside: avoid来避免图片被拆分到不同列中。下面是一个简单的示例：

HTML:




<div class="waterfall">
  <div class="waterfall-item">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="waterfall-item">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <!-- 更多 .waterfall-item -->
</div>

CSS:




.waterfall {
  column-count: 3; /* 固定列数 */
  column-gap: 1em; /* 列间隔 */
}
 
.waterfall-item {
  break-inside: avoid; /* 避免图片被拆分 */
  margin-bottom: 1em; /* 列间的间隔 */
  width: 100%; /* 列宽 */
}
 
.waterfall-item img {
  width: 100%; /* 图片宽度 */
  height: auto; /* 图片高度 */
  display: block; /* 阻止下方出现空隙 */
}

这个例子中，.waterfall是包含图片的容器，.waterfall-item是每个图片的容器。通过设置.waterfall的column-count为3，可以创建固定的列数。如果需要根据屏幕宽度调整列数，可以使用CSS媒体查询来动态改变column-count的值。

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