分类 css3 下的文章

2024-08-17

在Vue中，可以使用事件绑定来改变鼠标滑过列表项时的样式。以下是一个简单的例子：




<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index" @mouseenter="changeStyle(index)" @mouseleave="resetStyle">
        {{ item }}
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      hoverIndex: null
    };
  },
  methods: {
    changeStyle(index) {
      this.hoverIndex = index;
    },
    resetStyle() {
      this.hoverIndex = null;
    }
  }
};
</script>
 
<style>
.hover-style {
  background-color: #f0f0f0; /* 悬浮时的背景色 */
}
</style>

在这个例子中，mouseenter 事件绑定了 changeStyle 方法，它会更新 hoverIndex 的值为当前项的索引。mouseleave 事件绑定了 resetStyle 方法，它会将 hoverIndex 重置为 null。然后在列表项使用 v-bind:class 来根据 hoverIndex 的值来动态绑定样式类 .hover-style。当鼠标滑过列表项时，该项将应用悬浮样式。

- 阅读更多 -

HTML5 & CSS3常见新特性

System

2024-08-17

所有,css3

HTML5 和 CSS3 的常见新特性包括：

语义化标签：如 <header>, <nav>, <section>, <article>, <aside>, <footer> 等。
画布（Canvas）：使用 JavaScript 进行图形绘制。
视频和音频：<video> 和 <audio> 标签。
表单控件增强：如数值输入、日期输入、时间输入、颜色选择器等。
CSS3 特效和变换：如阴影、渐变、边框、圆角、变换等。
CSS3 布局：如弹性盒子（Flexbox）、网格（Grid）布局。
媒体查询：响应式设计。

以下是一些简单的示例代码：

HTML5 示例：




<header>头部信息</header>
<nav>导航链接</nav>
<section>
  <article>
    <h1>文章标题</h1>
    <p>这是一个段落。</p>
  </article>
</section>
<aside>侧边内容</aside>
<footer>底部信息</footer>

CSS3 示例：




/* 圆角边框和阴影效果 */
div {
  border-radius: 10px;
  box-shadow: 5px 5px 10px #888888;
}
 
/* 渐变背景 */
div {
  background: linear-gradient(to right, red, yellow);
}
 
/* 媒体查询实现响应式设计 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

画布（Canvas）示例：




<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green';
  ctx.beginPath();
  ctx.arc(70, 40, 30, 0, 2 * Math.PI);
  ctx.fill();
</script>

视频和音频示例：




<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
 
<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

- 阅读更多 -

css3背景渐变

System

2024-08-17

所有,css3

CSS3 背景渐变可以使用 linear-gradient() 创建线性渐变或者 radial-gradient() 创建径向渐变。

线性渐变：




.linear-gradient {
  background: linear-gradient(direction, color-stop1, color-stop2, ...);
}

径向渐变：




.radial-gradient {
  background: radial-gradient(shape size at position, start-color, ..., last-color);
}

例子：

线性渐变从上到下，从红色到蓝色：




div {
  height: 100px;
  background: linear-gradient(to bottom, red, blue);
}

径向渐变从中心开始，由蓝色向透明色过渡：




div {
  height: 100px;
  background: radial-gradient(circle at center, blue, transparent);
}

- 阅读更多 -

css实现炫酷充电动画

System

2024-08-17

所有,css3

以下是一个简单的充电动画实例，使用了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>
  .battery {
    width: 100px; height: 200px;
    border: 4px solid #333;
    border-radius: 10px;
    position: relative;
    background: conic-gradient(#32cd32 0%, #32cd32 50%, #fc4a1a 50%, #fc4a1a 100%);
    animation: charge 4s infinite ease-in-out;
  }
 
  .battery:before {
    content: '';
    position: absolute;
    top: -10px; left: 30px;
    width: 40px; height: 10px;
    background: #333;
    border-radius: 5px 5px 0 0;
  }
 
  .battery:after {
    content: '';
    position: absolute;
    bottom: 10px; left: 30px;
    width: 40px; height: 10px;
    background: #333;
    border-radius: 0 0 5px 5px;
  }
 
  @keyframes charge {
    0%, 100% {
      background-position: 0 0, 0 0;
    }
    50% {
      background-position: 300px 0, 100px 0;
    }
  }
</style>
</head>
<body>
<div class="battery"></div>
</body>
</html>

这段代码创建了一个类似于手机电池的样式，并通过CSS动画来实现充电动画效果。通过调整.battery类的background属性中的conic-gradient的颜色和位置，我们可以控制充电动画的颜色变化。@keyframes charge定义了背景图像如何随时间变化而移动。

System

2024-08-17

所有,css3




/* 设置文本的对齐方式 */
p.text-align {
  text-align: center; /* 文本居中对齐 */
}
 
/* 设置文本的装饰样式 */
p.text-decoration {
  text-decoration: underline; /* 文本下划线 */
}
 
/* 设置文本的缩进 */
p.text-indent {
  text-indent: 2em; /* 文本首行缩进2个字体大小 */
}
 
/* 设置文本的 Shadow 效果 */
p.text-shadow {
  text-shadow: 2px 2px 2px #000; /* 文本阴影，水平偏移2px，垂直偏移2px，模糊半径2px，颜色为黑色 */
}
 
/* 设置文本的样式 */
p.font-style {
  font-style: italic; /* 文本斜体 */
}
 
/* 设置文本的变体 */
p.font-variant {
  font-variant: small-caps; /* 小型大写字母 */
}
 
/* 设置文本的加粗 */
p.font-weight {
  font-weight: bold; /* 文本加粗 */
}
 
/* 设置文本的大小 */
p.font-size {
  font-size: 16px; /* 文本大小为16像素 */
}
 
/* 设置文本的字体系列 */
p.font-family {
  font-family: 'Times New Roman', Times, serif; /* 文本字体为'Times New Roman'，若无该字体则使用Times字体，最后为衬线字体 */
}
 
/* 设置文本行高，即行间距 */
p.line-height {
  line-height: 1.5; /* 行高为字体大小的1.5倍 */
}
 
/* 设置文本的空白处理方式 */
p.white-space {
  white-space: nowrap; /* 文本不换行 */
}
 
/* 设置文本的溢出处理方式 */
p.text-overflow {
  overflow: hidden; /* 文本溢出隐藏 */
  text-overflow: ellipsis; /* 文本溢出显示为省略号 */
}

这段代码展示了如何使用CSS3中的各种文本样式属性来对段落（<p>标签）进行样式设置，包括文本对齐、装饰、缩进、阴影、样式、变体、加粗、大小、字体系列、行高、空白处理和文本溢出处理。这些属性可以帮助开发者创建更加丰富多样的文本格式和布局。

- 阅读更多 -

CSS盒子模型详解

System

2024-08-17

所有,css3

CSS盒子模型通常分为两种：标准盒子模型和IE盒子模型。

标准盒子模型：内容（content）、填充（padding）、边界（margin）、边框（border）组成，其中内容（content）区域的尺寸就是元素的宽度/高度。
IE盒子模型：内容（content）、填充（padding）、边框（border）、边界（margin）组成，这样导致元素的宽度/高度不仅仅包含内容区域，还包含了填充和边框。

CSS3中提供了box-sizing属性，可以用来指定使用哪种盒子模型计算宽度和高度：

box-sizing: content-box 表示使用标准盒子模型。
box-sizing: border-box 表示使用IE盒子模型。

例如：




/* 使用标准盒子模型 */
.content-box {
  box-sizing: content-box;
  width: 100px;
  padding: 10px;
  border: 5px solid;
  margin: 10px;
}
 
/* 使用IE盒子模型 */
.border-box {
  box-sizing: border-box;
  width: 100px;
  padding: 10px;
  border: 5px solid;
  margin: 10px;
}

在HTML中：




<div class="content-box">Content Box</div>
<div class="border-box">Border Box</div>

在这个例子中，"Content Box" 的实际宽度将是100px（内容区域的宽度），而"Border Box" 的实际宽度将是150px（内容区域、填充、边框都包含在内）。

- 阅读更多 -

uniapp项目创建后的基本配置

System

2024-08-17

所有,css3

在uni-app项目创建之后，基本的配置主要集中在manifest.json、pages.json和main.js等文件中。以下是一些基本配置的示例：

manifest.json：这个文件用于配置App的一些元数据，如应用名称、应用描述、应用图标等。




{
  "name": "Your App",
  "description": "Your App Description",
  "versionName": "1.0.0",
  "versionCode": "100",
  "appid": "YourAppID",
  "icons": {
    "128": "path/to/icon_128.png",
    "192": "path/to/icon_192.png",
    "512": "path/to/icon_512.png"
  }
  // 其他配置...
}

pages.json：这个文件用于配置页面路径、窗口表现等。




{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#FF0000"
      }
    }
    // 更多页面配置...
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "UniApp",
    "navigationBarBackgroundColor": "#FFFFFF",
    "backgroundColor": "#FFFFFF"
  }
  // 其他配置...
}

main.js：这个文件是项目的入口文件，可以在其中进行一些初始化配置。




import Vue from 'vue'
import App from './App'
 
Vue.config.productionTip = false
 
App.mpType = 'app'
 
const app = new Vue({
  ...App
})
app.$mount()

这些是最基本的配置，具体配置可能根据项目需求而有所不同。在实际开发中，你可能还需要配置如网络请求、状态管理等其他功能的相关配置。

- 阅读更多 -

CSS3 Animation：如何在动画播放完后停止在最后的状态

System

2024-08-17

所有,css3

在CSS3中，要让动画在最后一帧停止，可以使用animation-fill-mode属性，并将其设置为forwards。这样，动画完成后，元素会保持最后一帧的状态。

下面是一个简单的例子：




@keyframes example {
  from { opacity: 0; }
  to { opacity: 1; }
}
 
.animated-element {
  animation-name: example;
  animation-duration: 2s;
  animation-fill-mode: forwards;  /* 保留动画结束状态 */
}

HTML部分：




<div class="animated-element">我会在动画完成后停留在完成状态。</div>

在这个例子中，.animated-element将执行一个淡入效果，当动画完成后，它会保持不透明的状态，即最后一帧的状态。

- 阅读更多 -

el-table滚动条样式修改

System

2024-08-17

所有,css3

在Element UI中，可以通过CSS来修改el-table的滚动条样式。以下是一个简单的例子，展示如何自定义滚动条的样式：




/* 修改滚动条的宽度和背景颜色 */
.el-table__body-wrapper::-webkit-scrollbar {
  width: 6px; /* 宽度 */
  height: 6px; /* 高度 */
  background-color: #f9f9f9; /* 背景颜色 */
}
 
/* 修改滚动条滑块的样式 */
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: #b4bccc; /* 滑块颜色 */
}
 
/* 修改滚动条滑块hover样式 */
.el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: #959da5; /* 滑块hover颜色 */
}

将上述CSS添加到你的样式表中，会改变Element UI表格滚动条的默认样式。注意，这里使用了::-webkit-scrollbar和::-webkit-scrollbar-thumb伪元素，这些是针对Webkit内核浏览器（如Chrome、Safari）的。对于其他浏览器，可能需要不同的解决方案或者第三方库。

请确保你的样式选择器优先级足够高，能覆盖Element UI默认的样式。如果需要针对Firefox或IE等浏览器进行兼容，可能需要额外的CSS规则。

- 阅读更多 -

使用Vue实现一个简单的类手风琴效果的侧边导航栏

System

2024-08-17

所有,css3




<template>
  <div class="sidebar-container" :style="{ width: sidebarWidth + 'px' }">
    <div class="sidebar-header" @click="toggleSidebar">
      <h3>侧边栏标题</h3>
      <div class="icon" :class="{ 'icon-close': !isSidebarOpen }">
        <!-- 使用合适的图标 -->
      </div>
    </div>
    <div class="sidebar-content" v-show="isSidebarOpen">
      <!-- 侧边栏内容 -->
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isSidebarOpen: true, // 控制侧边栏的开闭状态
      sidebarWidth: 200, // 侧边栏的宽度
    };
  },
  methods: {
    toggleSidebar() {
      this.isSidebarOpen = !this.isSidebarOpen;
    }
  }
};
</script>
 
<style scoped>
.sidebar-container {
  background-color: #f8f8f8;
  transition: width 0.3s; /* 添加过渡动画 */
}
.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  cursor: pointer;
}
.sidebar-content {
  padding: 10px;
  overflow-y: auto; /* 使内容可滚动 */
}
.icon {
  /* 添加图标样式 */
}
.icon-close {
  /* 添加关闭时的图标样式 */
}
</style>

这个简单的Vue组件实现了一个可以通过点击标题栏来开关的侧边导航栏效果。点击标题后，侧边栏的开闭状态会切换，并且侧边栏的宽度会有过渡动画效果。这个例子展示了如何使用Vue的数据绑定和事件处理来创建交互式组件。

- 阅读更多 -