System 发布的文章

2024-08-17

CSS 中的 transition 属性用于设置元素的样式过渡效果。以下是实现“雪花飘，购物抛物线，进度条等”四个案列的基本示例代码：

雪花飘：

HTML:




<div class="snow"></div>

CSS:




.snow {
  width: 10px;
  height: 10px;
  background-color: white;
  position: fixed;
  bottom: 0;
  left: 0;
  transform: translateX(0);
  transition: transform 5s ease-in-out;
}
 
@keyframes snowFall {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
 
@keyframes snowSpiral {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(2); }
}
 
.snow:hover {
  animation: snowFall 5s infinite, snowSpiral 5s infinite;
}

购物抛物线：

HTML:




<div class="shopping-cart"></div>

CSS:




.shopping-cart {
  width: 50px;
  height: 100px;
  background-color: red;
  position: fixed;
  bottom: 0;
  right: 0;
  transform: translateX(0);
  transition: transform 5s ease-in-out;
}
 
.shopping-cart:hover {
  animation: shoppingCartTrajectory 5s infinite;
}
 
@keyframes shoppingCartTrajectory {
  0% { transform: translateX(0); }
  50% { transform: translateX(-50px) translateY(-50px) rotate(20deg); }
  100% { transform: translateX(-100px) translateY(-100px) rotate(40deg); }
}

进度条：

HTML:




<div class="progress-bar"></div>

CSS:




.progress-bar {
  width: 100%;
  height: 10px;
  background-color: blue;
  transition: width 5s ease-in-out;
}
 
.progress-bar:hover {
  width: 0;
}

这些示例展示了如何使用 CSS transition 属性来创建简单的动画效果。每个案列都包括了一个 HTML 元素和相应的 CSS 样式，其中包括了 transition 属性。鼠标悬停时触发动画效果。

- 阅读更多 -

CSS 奇思妙想边框动画，前端开发速成

System

2024-08-17

所有,css

以下是一个简单的CSS边框动画示例，用于展示如何创建一个有趣的边框变换效果：




/* 基本样式 */
.box {
  width: 100px;
  height: 100px;
  background-color: #58a;
  margin: 50px;
  border-radius: 8px;
  position: relative;
  animation: spin-border 4s linear infinite;
}
 
/* 关键帧动画 */
@keyframes spin-border {
  0% {
    border-width: 8px;
    border-color: #fff;
  }
  50% {
    border-width: 12px;
    border-color: #58f;
  }
  100% {
    border-width: 8px;
    border-color: #fff;
  }
}

在HTML中，你可以这样使用这个类：




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

这段代码会创建一个有着白色和蓝色边框不断旋转的小方块，动画会无限循环。通过调整.box类中的animation属性，你可以控制动画的速度、时长和其他行为。同时，通过调整@keyframes spin-border中的百分比，你可以控制动画的具体变化。

- 阅读更多 -

vue3项目引入unocss原子化

System

2024-08-17

所有,css

在Vue 3项目中引入UnoCSS（原子化CSS框架），你需要按照以下步骤操作：

安装UnoCSS：




npm install @unocss/core @unocss/preset-uno @unocss/preset-mini

创建UnoCSS插件：




// unocss.js
import { defineConfig } from 'unocss'
import { presetUno, presetMini } from '@unocss/preset-uno'
import { presetAttributify } from '@unocss/preset-attributify'
 
export default defineConfig([
  presetUno(),
  presetMini(),
  presetAttributify({ /* 你可以在这里配置attributify的选项 */ }),
  // 其他UnoCSS插件
])

在Vue项目中使用UnoCSS插件：




// main.js
import { createApp } from 'vue'
import App from './App.vue'
import unocss from './unocss'
 
const app = createApp(App)
 
// 使用UnoCSS插件
app.use(unocss)
 
app.mount('#app')

在组件中使用UnoCSS规则：




<template>
  <div class="p-10 bg-gray-200 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700">
    Hover over me!
  </div>
</template>
 
<script>
export default {
  // 组件逻辑
}
</script>

以上步骤展示了如何在Vue 3项目中引入UnoCSS并使用它的基本规则。你可以定义自己的UnoCSS插件配置，并根据需要添加更多的UnoCSS插件。

System

2024-08-17

所有,css

要解决文字在使用 height 和 line-height 进行垂直居中时出现偏上或偏下的问题，可以确保元素的 vertical-align 属性设置为 middle。这样可以保证文字在容器内垂直居中。

以下是一个简单的例子：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
  display: inline-block;
  height: 100px;
  line-height: 100px;
  border: 1px solid #000;
}
 
.text {
  vertical-align: middle;
}
</style>
</head>
<body>
 
<div class="container">
  <span class="text">垂直居中的文字</span>
</div>
 
</body>
</html>

在这个例子中，.container 类定义了一个容器的样式，使得它具有固定的 height 并且 line-height 与之相等。.text 类中的 vertical-align: middle; 确保了内部文本垂直居中。如果文字仍然偏上或偏下，可能是由于其他的CSS属性或者是字体本身的问题导致的，需要进一步检查和调整。

- 阅读更多 -

网站基本布局CSS

System

2024-08-17

所有,css

以下是一个简单的网站布局示例，使用了CSS Flexbox布局来创建一个具有头部、导航、主内容区和页脚的基本页面结构。




/* 清除默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
/* 页面级布局 */
body {
    font-family: Arial, sans-serif;
    background-color: #f8f8f8;
}
 
/* 头部样式 */
header {
    background-color: #333;
    padding: 10px 0;
    color: white;
    text-align: center;
}
 
/* 导航菜单样式 */
nav {
    background-color: #555;
    padding: 10px;
    text-align: center;
}
 
/* 主内容区样式 */
main {
    margin: 15px 0;
    padding: 15px;
    text-align: left;
}
 
/* 使用Flexbox布局进行高度均衡 */
.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
 
/* 页脚样式 */
footer {
    background-color: #555;
    padding: 10px;0;
    color: white;
    text-align: center;
    margin-top: auto;
}
 
/* 布局示例 */
<div class="container">
    <header>网站头部</header>
    <nav>
        <a href="#">主页</a>
        <a href="#">关于</a>
        <a href="#">服务</a>
        <a href="#">联系</a>
    </nav>
    <main>
        <h1>主要内容</h1>
        <p>这里是主要内容的文本...</p>
    </main>
    <footer>网站页脚</footer>
</div>

这段代码展示了如何使用Flexbox布局创建一个简单的网站结构。.container类使用display: flex和flex-direction: column属性将子元素排列为列，并通过min-height: 100vh确保至少与视口高度一致。footer使用margin-top: auto自动放置在容器的底部。

- 阅读更多 -

CSS实现暗黑模式

System

2024-08-17

所有,css

要在网页中实现一个简单的暗黑模式，你可以通过CSS为网页的不同元素设置不同的颜色。以下是一个基本的示例，演示如何切换网页的主题颜色：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="content">
  <h1>Welcome to Dark Mode</h1>
  <p>Toggle the switch to change the theme.</p>
  <label for="theme-switch" class="theme-switch-label">Dark Mode</label>
  <input type="checkbox" id="theme-switch" class="theme-switch">
</div>
</body>
</html>

CSS (styles.css):




/* Default light theme */
body {
  background-color: white;
  color: black;
}
 
/* Dark theme */
.dark-theme body {
  background-color: black;
  color: white;
}
 
/* Toggle switch styles */
.theme-switch {
  display: none;
}
 
.theme-switch-label {
  cursor: pointer;
  text-transform: uppercase;
  color: grey;
}
 
/* Toggle switch checked state */
.theme-switch:checked + .theme-switch-label {
  color: #fefefe;
}
 
.theme-switch:checked ~ .content {
  background-color: black;
  color: white;
}
 
.theme-switch:checked ~ .content h1 {
  color: white;
}
 
.theme-switch:checked ~ .content p {
  color: grey;
}

在这个示例中，我们有一个切换开关和一些内容。当切换开关被选中时，页面会通过.dark-theme类切换到暗黑模式。CSS中的一些选择器用于更改切换状态下页面内容的样式。

- 阅读更多 -

HTML CSS 进度条

System

2024-08-17

所有,css

在HTML和CSS中，创建一个进度条可以通过使用HTML的<progress>元素或者通过CSS自定义样式的<div>元素来实现。以下是两种方法的示例代码：

方法一：使用HTML的<progress>元素




<progress value="50" max="100">50%</progress>

方法二：使用CSS自定义样式的<div>元素




<div class="progress-bar" style="width: 50%;">50%</div>

CSS样式：




.progress-bar {
  width: 0%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
  border-radius: 5px;
  transition: width 0.5s;
}

你可以通过调整width的百分比来改变进度条的进度，并且可以通过CSS中的transition属性为进度条的变化添加动画效果。

- 阅读更多 -

CSS鼠标悬浮变小手

System

2024-08-17

所有,css

CSS中实现鼠标悬浮时变成小手指的效果，可以通过cursor属性来实现。以下是实现这个效果的CSS代码示例：




.hand-cursor {
  cursor: pointer; /* 当鼠标悬浮在该元素上时，显示小手指 */
}

然后在HTML中，将这个类应用到你想要的元素上：




<div class="hand-cursor">鼠标悬浮我试试</div>

将上述CSS类应用到任何想要在鼠标悬浮时变成小手指的元素上，当鼠标悬浮在该元素上时，鼠标指针会变成小手指形状。

- 阅读更多 -

使用css实现文字横向滚动循环

System

2024-08-17

所有,css

要使用CSS实现文字的横向滚动，可以使用animation和@keyframes。以下是一个简单的例子，展示了如何创建一个循环的文字滚动效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Scroll</title>
<style>
  .scroll-text {
    white-space: nowrap;
    overflow: hidden;
    display: block;
    width: 200px; /* 设置滚动区域的宽度 */
  }
 
  @keyframes scroll {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
 
  .scroll-animation {
    animation: scroll 10s linear infinite;
  }
</style>
</head>
<body>
 
<div class="scroll-text scroll-animation">
  这是一段将要循环滚动的文字。
  这是一段将要循环滚动的文字。
  这是一段将要循环滚动的文字。
</div>
 
</body>
</html>

在这个例子中，.scroll-text 类定义了文本的滚动区域，.scroll-animation 类定义了滚动的关键帧动画。@keyframes scroll 规定了文本从完全向右移动到完全向左移动的动画。动画时长为10秒，是线性的（linear），并且是无限循环的（infinite）。

调整width属性可以控制滚动区域的宽度，从而影响文本滚动的速度。通过调整animation属性中的时长（例如10s），可以改变滚动的速度。

- 阅读更多 -

打造精美响应式CSS日历：从基础到高级样式

System

2024-08-17

所有,css




/* 基础日历样式 */
.calendar {
  margin: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
 
.calendar-header {
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
}
 
.calendar-navigation {
  text-align: center;
  margin-bottom: 20px;
}
 
.calendar-day {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #999;
  margin: 5px;
  border-radius: 50%;
  cursor: pointer;
}
 
.calendar-day--current {
  color: #000;
  background: #e0e0e0;
}
 
.calendar-day--selected {
  color: #fff;
  background: #007bff;
}
 
.calendar-day--disabled {
  color: #fff;
  background: #e9ecef;
  pointer-events: none; /* 禁用点击事件 */
}
 
/* 响应式调整 */
@media (max-width: 768px) {
  .calendar {
    margin: 10px;
    padding: 10px;
  }
 
  .calendar-navigation {
    text-align: center;
    margin-bottom: 10px;
  }
 
  .calendar-day {
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 2.5px;
  }
}

这个样式表展示了如何创建一个基本的日历组件，并在屏幕宽度小于768像素时，通过媒体查询进行响应式调整，以适应小屏幕设备。这个例子简单明了，并且注重代码的可维护性和可读性。

- 阅读更多 -