标签 css 下的文章

HTML5超炫酷特效【天空中白云飘动CSS3特效】HTML+CSS+JavaScript

2024-08-23

以下是实现天空中白云飘动CSS3特效的完整示例代码：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Cloud Animation</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  .clouds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
  }
  .clouds-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #c9d7f1;
    z-index: 1;
  }
  .clouds-fg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAyCAYAAACoPV+aAAAgAElEQVR4Xu3UQQ2AMAhD7+v58I3f0H9/3+D19/v39/f39/vH9/f3+Dg4GBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBg

- 阅读更多 -

Vue2 CSS小知识点

System

2024-08-23

所有,css

在Vue2中，CSS的使用可以通过以下几种方式进行：

单文件组件中的<style>标签：可以在Vue组件的单文件中使用<style>标签来添加CSS。




<template>
  <div class="example">Hello, World!</div>
</template>
 
<script>
export default {
  // ...
}
</script>
 
<style scoped>
.example {
  color: red;
}
</style>

全局CSS文件：可以在入口文件（如main.js或app.js）中导入全局CSS文件。




// main.js
import Vue from 'vue';
import App from './App.vue';
import './global.css'; // 全局CSS文件
 
new Vue({
  render: h => h(App),
}).$mount('#app');

CSS预处理器：如Sass/SCSS、Less等，需要相关预处理器支持。




<template>
  <div class="example">Hello, World!</div>
</template>
 
<script>
export default {
  // ...
}
</script>
 
<style lang="scss">
$color: red;
 
.example {
  color: $color;
}
</style>

CSS Modules：在单文件组件中使用CSS Modules，可以使样式局部作用于组件。




<template>
  <div :class="style.example">Hello, World!</div>
</template>
 
<script>
import style from './style.module.css';
 
export default {
  data() {
    return {
      style,
    };
  },
};
</script>

使用CSS-in-JS库，如styled-components。




import styled from 'styled-components';
 
const StyledDiv = styled.div`
  color: red;
`;
 
export default {
  render() {
    return <StyledDiv>Hello, World!</StyledDiv>;
  },
};

以上是在Vue2中使用CSS的一些方法，具体使用哪种取决于项目需求和开发者偏好。

- 阅读更多 -

CSS基础：width，height尺寸属性详解

System

2024-08-23

所有,css

在CSS中，width和height属性用于设置元素的宽度和高度。这两个属性可以为元素内容设置固定的尺寸，也可以使用百分比、vh单位（视口高度的百分比）等相对单位来设置。

width属性用于设置元素的宽度。
height属性用于设置元素的高度。

CSS代码示例：




/* 设置元素宽度为200像素 */
div {
  width: 200px;
}
 
/* 设置元素高度为150像素 */
div {
  height: 150px;
}
 
/* 设置元素宽度为父元素的50% */
div {
  width: 50%;
}
 
/* 设置元素高度为视口高度的25% */
div {
  height: 25vh;
}

在实际应用中，width和height通常与其他属性（如box-sizing）一起使用，以确保元素的实际尺寸按预期计算。box-sizing属性默认值为content-box，这意味着元素的实际尺寸只包括内容区域，而设置为border-box时，边框和内边距被包含在元素的宽度和高度内。

- 阅读更多 -

前端 CSS 经典：弧形边框选项卡

System

2024-08-23

所有,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>
  .card {
    width: 300px;
    height: 150px;
    border-radius: 10px 10px 0 0;
    background-color: #fff;
    box-shadow: 0 6px 10px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
  }
 
  .card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    background-color: #4db8ff;
    width: 100px;
    height: 100px;
    border-radius: 0 0 20px 0;
    transform: translate(50%, -50%);
  }
 
  .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
  }
</style>
</head>
<body>
<div class="card">
  <div class="content">
    <h2>选项卡标题</h2>
    <p>这是一个选项卡的内容。</p>
  </div>
</div>
</body>
</html>

这段代码创建了一个带有弧形边缘的选项卡，使用了CSS伪元素::before来实现弧形的背景。border-radius被用来创建圆角，并且使用transform属性将伪元素定位在卡片的左上角。

- 阅读更多 -

unocss+vite+vue3初使unocss

System

2024-08-23

所有,css

UnoCSS 是一个更快更轻量的现代化CSS框架，它可以和Vite无缝集成。以下是如何在Vue 3项目中使用UnoCSS的步骤：

创建一个新的Vue 3项目（如果还没有的话）:




npm create vue@latest
# 或者
yarn create vue

进入项目目录并安装UnoCSS及其Vite插件:




cd my-vue-app
npm install unocss @unocss/vite @unocss/preset-uno

在 vite.config.js 文件中配置UnoCSS插件:




// vite.config.js
import { defineConfig } from 'vite'
import Unocss from '@unocss/vite'
 
export default defineConfig({
  plugins: [
    Unocss({
      // 配置UnoCSS的preset
      presets: [
        require('@unocss/preset-uno').default({ /* 可以在这里配置UnoCSS的特定选项 */ }),
      ],
    }),
  ],
})

在 main.js 或 main.ts 文件中引入UnoCSS提供的样式:




// main.js
import { createApp } from 'vue'
import App from './App.vue'
import 'unocss/vite' // 引入UnoCSS的样式
 
createApp(App).mount('#app')

现在可以在Vue组件中使用UnoCSS的语法了。例如，创建一个组件 App.vue:




<template>
  <div class="bg-gray-200 p-10 text-center hover:text-blue-600">
    Hello UnoCSS!
  </div>
</template>
 
<script setup>
// JavaScript代码可以保持为空
</script>

运行 npm run dev 启动开发服务器，你将看到一个带有悬停效果的灰色背景的页面。这就是在Vue 3项目中初使用UnoCSS的基本步骤。

System

2024-08-23

所有,css




# 安装项目初始化需要的依赖
npm install
 
# 安装 ESLint 和相关插件
npm install eslint eslint-plugin-vue --save-dev
 
# 安装 Prettier 和相关插件
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev
 
# 安装 Sass 处理器和加载器
npm install sass sass-loader --save-dev
 
# 安装 Tailwind CSS 相关依赖
npm install tailwindcss postcss autoprefixer --save-dev
 
# 安装 Vue 3 相关依赖
npm install vue@next vue-loader@next --save-dev
 
# 初始化 Tailwind CSS 配置文件
npx tailwindcss init -p
 
# 安装其他开发依赖
npm install @vue/compiler-sfc lint-staged husky --save-dev

以上命令安装了项目所需的基础库和工具，包括 ESLint、Prettier、Sass 处理器、Tailwind CSS 和 Vue 3。同时，它还初始化了 Tailwind 的配置文件，并安装了一些额外的开发依赖，如 vue-loader 用于加载 Vue 单文件组件（.vue 文件），lint-staged 用于运行 ESLint 和 Prettier 以在 git 提交之前格式化和检查代码，husky 用于在 git 提交阶段进行钩子调用。

System

2024-08-23

所有,html5

以下是一个简化的HTML和CSS代码示例，用于创建一个简单的七夕情人节3D星空相册。这个示例仅包含核心的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>情人节相册</title>
<style>
  body, html {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .stars {
    width: 100%;
    height: 100%;
    position: relative;
    background: #000;
  }
  .star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    box-shadow: 
      random(1000px) random(1000px) white,
      random(1000px) random(1000px) white,
      random(1000px) random(1000px) white,
      random(1000px) random(1000px) white,
      random(1000px) random(1000px) white,
      random(1000px) random(1000px) white,
      random(1000px) random(1000px) white,
      random(1000px) random(1000px) white;
    animation: twinkle 1s infinite alternate ease-in-out;
  }
  @keyframes twinkle {
    from { opacity: .5; }
    to { opacity: 1; }
  }
</style>
</head>
<body>
<div class="stars">
  <div class="star"></div>
  <!-- 更多星星元素可以在此基础上复制增加 -->
</div>
</body>
</html>

这个示例创建了一个简单的星空背景，其中.star代表一颗星星，使用box-shadow属性来模拟星光，并通过CSS动画@keyframes twinkle来实现闪烁效果。你可以根据需要增加更多的星星元素，以及添加背景图片和相册元素来完善整个页面。

- 阅读更多 -

css样式-内容固定在页面底部，不随滚动条滚动

System

2024-08-23

所有,html5

要使内容固定在页面底部并且不随着滚动条的滚动而移动，可以使用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>
  body, html {
    height: 100%;
    margin: 0;
  }
  .footer {
    position: fixed;  /* 使用fixed定位 */
    left: 0;
    bottom: 0;  /* 固定位置在底部 */
    width: 100%;  /* 宽度为100% */
    background-color: #333;  /* 背景颜色 */
    color: white;  /* 字体颜色 */
    text-align: center;  /* 文本居中 */
    padding: 10px 0;  /* 上下填充 */
  }
</style>
</head>
<body>
 
<div class="footer">
  固定在底部的内容
</div>
 
<!-- 页面内容 -->
<div style="height: 2000px;"></div>
 
</body>
</html>

在这个例子中，.footer 类定义了一个固定在页面底部的内容区域。通过设置position: fixed和bottom: 0，内容会始终显示在视口的底部，不会随着页面的滚动而移动。

- 阅读更多 -

编程笔记 html5&css&js 012 HTML分块

System

2024-08-23

所有,html5

在HTML中，分块通常意味着将页面内容划分为不同的部分，每个部分可以通过HTML元素进行标记。以下是一个简单的HTML分块示例：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分块示例</title>
    <style>
        .section {
            padding: 20px;
            margin: 10px 0;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <div class="section">
        <h2>第一部分标题</h2>
        <p>第一部分的内容...</p>
    </div>
    <div class="section">
        <h2>第二部分标题</h2>
        <p>第二部分的内容...</p>
    </div>
    <div class="section">
        <h2>第三部分标题</h2>
        <p>第三部分的内容...</p>
    </div>
</body>
</html>

在这个例子中，我们使用了<div>元素来创建分块布局，并通过CSS为.section类添加了边框和内边距。每个<div class="section">都是页面上的一个独立区块。这种方法可以用于构建更复杂的页面结构。

- 阅读更多 -

用css搭建一个h5聊天界面

System

2024-08-23

所有,html5

下面是一个简单的H5聊天界面样式示例，使用了基本的CSS来构建界面。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H5聊天界面</title>
<style>
  body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: Arial, sans-serif;
  }
  .chat-container {
    width: 100%;
    max-width: 500px;
    background-color: #e6e6e6;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }
  .chat-header {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
  }
  .message-input {
    width: 100%;
    padding: 10px;
    margin-top: 20px;
  }
  .message-input textarea {
    width: 100%;
    height: 100px;
    resize: none;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
  }
  .message-input button {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border: none;
    background-color: #555;
    color: white;
    cursor: pointer;
    border-radius: 5px;
  }
  .message-container {
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
  }
  .message {
    margin-bottom: 20px;
  }
  .message p {
    margin: 0;
    word-wrap: break-word;
  }
  .message-user {
    text-align: right;
  }
  .message-user p {
    background-color: #555;
    color: white;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 0;
  }
  .message-bot {
    text-align: left;
  }
  .message-bot p {
    background-color: #ddd;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 0;
  }
</style>
</head>
<body>
<div class="chat-container">
  <div class="chat-header">
    <h2>聊天室</h2>
  </div>
  <div class="message-container">
    <!-- 消息列表 -->
  </div>
  <div class="message-input">
    <textarea placeholder="输入消息..."></textarea>
    <button>发送</button>
  </div>
</div>
</body>
</html>

这个例子提供了一个简单的聊天界面框架，你可以根据需要添加JavaScript以实现发送消息、接收消息等功能。

- 阅读更多 -