标签 css3 下的文章

Vue进阶（幺幺捌）：CSS3 - 选择器first-child、last-child、nth-child

2024-08-14

在CSS中，first-child、last-child和nth-child(3)是用来选择元素的特定子元素的选择器。

first-child选择器用来选择父元素的第一个子元素。
last-child选择器用来选择父元素的最后一个子元素。
nth-child(3)选择器用来选择父元素下的第三个子元素。

以下是这些选择器在Vue模板中的使用示例：




<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index" :class="{'first': index === 0, 'last': index === items.length - 1, 'third': index === 2}">
        {{ item }}
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4']
    };
  }
};
</script>
 
<style>
.first {
  color: red; /* 第一个子元素的颜色 */
}
.last {
  color: green; /* 最后一个子元素的颜色 */
}
.third {
  color: blue; /* 第三个子元素的颜色 */
}
</style>

在这个示例中，我们使用了Vue的v-for指令来循环生成列表项，并通过计算属性为特定的元素添加了类名来模拟CSS选择器的效果。这样做的好处是，不需要使用复杂的CSS选择器，可以在JavaScript逻辑中更灵活地处理元素的样式。

- 阅读更多 -

CSS3 选择器，web中间开发，JavaScript命名标识符规范

System

2024-08-14

所有,css3

在CSS中，选择器是用来选择特定元素的模式。CSS3引入了一些新的选择器，例如属性选择器、结构性伪类选择器等，以便更精确地定位元素。

以下是一些CSS3选择器的例子：




/* 属性选择器 */
p[attr] { color: red; }                 /* 有attr属性的所有p元素 */
p[attr='value'] { color: red; }         /* attr属性等于value的所有p元素 */
p[attr~='value'] { color: red; }        /* attr属性的值包含value的所有p元素 */
p[attr^='value'] { color: red; }        /* attr属性的值以value开头的所有p元素 */
p[attr$='value'] { color: red; }        /* attr属性的值以value结尾的所有p元素 */
p[attr*='value'] { color: red; }        /* attr属性的值包含value的所有p元素 */
 
/* 结构性伪类选择器 */
p:first-of-type { color: red; }        /* 其父元素的第一个p元素 */
p:last-of-type { color: red; }         /* 其父元素的最后一个p元素 */
p:nth-of-type(n) { color: red; }       /* 其父元素的第n个p元素 */
p:nth-last-of-type(n) { color: red; }  /* 其父元素的倒数第n个p元素 */
p:only-of-type { color: red; }         /* 其父元素中唯一的p元素 */
 
/* 伪元素选择器 */
p::first-letter { color: red; }       /* p元素的第一个字母 */
p::first-line { color: red; }         /* p元素的第一行 */

在JavaScript中，标识符是用来命名变量、函数、属性名的名称。一个良好的命名规范可以提高代码的可读性和可维护性。

以下是一些JavaScript命名标识符的例子：




var camelCaseIdentifier = 'value';       // 小驼峰式命名
var lowercase_underscore = 'value';     // 下划线命名
var CONSTANT_CASE_IDENTIFIER = 'value'; // 大写下划线命名
 
function namedFunction() {              // 函数命名
  // ...
}
 
class MyClass {                         // 类命名
  // ...
}
 
const { myProperty } = someObject;      // 属性命名

在CSS和JavaScript中，遵循以下规则可以提高代码的可读性和可维护性：

尽量避免使用单个字符的标识符，除非是短的循环变量。
使用有描述性的名称，说明其用途或内容。
对于局部变量和函数，使用小驼峰式命名。
对于全局变量或常量，使用全大写字母和下划线。
类名和构造函数使用大驼峰式命名。
属性和方法命名尽可能保持一致性，与相应的设计模式或标准库保持一致。

- 阅读更多 -

HTML5 纯CSS3实现正方体旋转3D效果，零基础也能看得懂

System

2024-08-14

所有,css3




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D正方体</title>
<style>
  .box {
    width: 200px;
    height: 200px;
    margin: 50px auto;
    transform-style: preserve-3d;
    transform: rotateX(30deg) rotateY(45deg);
    animation: rotate 5s infinite linear;
  }
 
  .box .face {
    position: absolute;
    width: 200px;
    height: 200px;
    background: #ff6347;
    opacity: 0.5;
  }
 
  .box .front {
    background: #ff6347;
  }
 
  .box .back {
    background: #ffbb33;
    transform: rotateY(180deg);
  }
 
  .box .right {
    background: #ffff66;
    transform: rotateY(90deg);
  }
 
  .box .left {
    background: #66ff66;
    transform: rotateY(-90deg);
  }
 
  .box .top {
    background: #66ffff;
    transform: rotateX(90deg);
  }
 
  .box .bottom {
    background: #6666ff;
    transform: rotateX(-90deg);
  }
 
  @keyframes rotate {
    from {
      transform: rotateX(0deg) rotateY(0deg);
    }
    to {
      transform: rotateX(360deg) rotateY(360deg);
    }
  }
</style>
</head>
<body>
<div class="box">
  <div class="face front"></div>
  <div class="face back"></div>
  <div class="face right"></div>
  <div class="face left"></div>
  <div class="face top"></div>
  <div class="face bottom"></div>
</div>
</body>
</html>

这段代码使用了HTML和CSS3，利用transform-style: preserve-3d;实现3D效果，并通过animation属性实现自动旋转。每个面都有不同的背景色，创建了一个立体的正方体效果。对于零基础的开发者来说，这是一个很好的学习示例，可以通过它了解如何使用CSS3创建3D动画。

- 阅读更多 -

CSS3多列&分页属性

System

2024-08-14

所有,css3

CSS3中的多列和分页属性可以用来创建多列布局，并控制内容的分页方式。以下是一些常用的CSS3多列和分页属性：

column-count：定义列的数量。
column-gap：定义列与列之间的间隙。
column-rule：定义列之间的分隔线（类似于边框的样式）。
page-break-inside：避免在元素内部分页。

示例代码：




/* 创建三列布局 */
.multi-column {
  column-count: 3;
  column-gap: 20px;
  column-rule: solid 1px #ccc;
}
 
/* 避免在元素内部分页 */
.avoid-page-break {
  page-break-inside: avoid;
}




<div class="multi-column avoid-page-break">
  <p>这里是一些很长的文本内容，它将被分布在三列中。</p>
  <!-- 更多内容 -->
</div>

在这个例子中，.multi-column 类定义了一个三列布局，列与列之间有20像素的间隙，并且列之间有一条颜色为#ccc的分隔线。.avoid-page-break 类用来避免在元素内部分页，这通常用于打印时避免内容跨页打印。

System

2024-08-14

所有,css3

以下是一个使用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;
    background: #16475b;
    overflow: hidden;
  }
  canvas {
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.125.1/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.125.1/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.125.1/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.125.1/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.125.1/examples/js/shaders/CopyShader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.125.1/examples/js/shaders/DotScreenShader.js"></script>
<script>
  // 此处省略七夕生日蛋糕的创建代码和烟花发射器的实现
</script>
</body>
</html>

这个示例中，我们使用了Three.js库来创建场景、相机、灯光和七夕生日蛋糕模型，并实现了烟花发射器的逻辑。在实际应用中，你需要实现createCake和createFireworks函数来分别创建蛋糕和烟花模型，并初始化发射器。

请注意，上述代码示例省略了实际的七夕生日蛋糕和烟花发射器的创建逻辑，因为这些部分通常是自定义的，并且会根据具体的场景和需求有所不同。你需要根据自己的情况来实现这部分的代码。

System

2024-08-14

所有,css3




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS+DIV页面布局</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        .header {
            position: fixed;
            top: 0;
            width: 100%;
            height: 50px;
            background-color: #333;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }
        .content {
            margin-top: 50px;
            padding: 10px;
        }
        .sidebar {
            float: left;
            width: 200px;
            height: calc(100vh - 50px);
            background-color: #f2f2f2;
            padding: 10px;
            overflow: auto;
        }
        .main-content {
            margin-left: 210px; /* 宽度为200px + 10px边距 */
            height: calc(100vh - 50px);
            background-color: #fff;
            padding: 10px;
            overflow: auto;
        }
        .footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 50px;
            background-color: #333;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>页头</h1>
    </div>
    <div class="content">
        <div class="sidebar">
            <h2>侧边栏</h2>
            <p>侧边栏内容...</p>
        </div>
        <div class="main-content">
            <h2>主要内容</h2>
            <p>主要内容区域...</p>
        </div>
    </div>
    <div class="footer">
        <h1>页脚</h1>
    </div>
</body>
</html>

这个代码实例展示了如何使用CSS创建一个固定头部和底部的布局，并且使用DIV元素来构建一个两栏的主要内容区域。侧边栏使用了固定宽度并且能够在高度上自适应屏幕，主要内容区域则根据侧边栏宽度进行了适当的偏移。在这个简单的例子中，我们也看到了如何使用CSS的calc()函数来进行计算，以便于实现更复杂的布局。

- 阅读更多 -

2.CSS3自定义滚动条样式

System

2024-08-14

所有,css3




/* 设置滚动区域的宽度和高度 */
.scroll-area {
  width: 200px;
  height: 100px;
  overflow: auto;
}
 
/* 自定义滚动条样式 */
.scroll-area::-webkit-scrollbar {
  width: 12px; /* 设置滚动条的宽度 */
}
 
.scroll-area::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条轨道的背景颜色 */
}
 
.scroll-area::-webkit-scrollbar-thumb {
  background: #888; /* 滚动条实际可拖动部分的颜色 */
}
 
.scroll-area::-webkit-scrollbar-thumb:hover {
  background: #555; /* 鼠标悬浮时滚动条的颜色 */
}

这段代码定义了一个.scroll-area类，它设置了滚动区域的宽度和高度，并且当内容超出区域时会显示滚动条。接着，使用::-webkit-scrollbar、::-webkit-scrollbar-track和::-webkit-scrollbar-thumb伪元素选择器来自定义滚动条的样式，使其具有宽度、轨道和滚动条颜色。在不同状态下（悬浮时），滚动条的颜色会有所不同，以改善用户体验。这段代码主要针对Webkit内核浏览器（如Chrome、Safari）。

- 阅读更多 -

CSS3 新增属性：背景，笔记分享

System

2024-08-14

所有,css3

CSS3 中的背景相关属性包括：

background-size: 指定背景图片的大小，可以是具体的宽高值或者是百分比，还可以是cover和contain这两个特殊的值。
background-origin: 指定背景图片的定位区域，可以是边框盒、内边距盒或者是内容盒。
background-clip: 指定背景的裁剪区域，同样可以是边框盒、内边距盒或者是内容盒。
background-image: 可以设置多个背景图片，用逗号隔开。
linear-gradient 和 radial-gradient: 创建线性和径向渐变的背景。

示例代码：




/* 设置背景图片并重复 */
.element {
  background-image: url('image.jpg');
  background-repeat: repeat-x;
}
 
/* 使用渐变作为背景 */
.gradient-background {
  background-image: linear-gradient(to right, red, yellow);
}
 
/* 设置背景大小，保持宽高比 */
.background-size {
  background-size: 150% auto; /* 宽度为原来的150%，高度自动保持宽高比 */
}
 
/* 设置背景的定位区域为内容盒 */
.background-origin {
  background-origin: content-box;
}
 
/* 设置背景的裁剪区域为内容盒 */
.background-clip {
  background-clip: content-box;
}
 
/* 多背景图片 */
.multiple-backgrounds {
  background-image: url('first.jpg'), url('second.jpg');
  background-position: left bottom, right top;
}

这些属性可以让你创建更加丰富和灵活的背景样式。

- 阅读更多 -

CSS3 新增的新特性

System

2024-08-14

所有,css3

CSS3 是 CSS 的最新版本，它引入了许多新特性，以下是一些常见的 CSS3 新增特性：

边框（Borders）
- 圆角边框（border-radius）
- 阴影效果（box-shadow）
背景和图像
- 渐进背景颜色（linear-gradient）
- 背景图片尺寸（background-size）
- 背景图片定位（background-origin）
- 多背景图（background-image 的多背景图链接）
文字效果
- 文字阴影（text-shadow）
- 字体（@font-face 规则）
2D/3D转换
- 转换（transform）
- 旋转（rotate）
- 缩放（scale）
- 移动（translate）
- 倾斜（skew）
动画
- @keyframes 规则创建动画
- animation 属性应用动画
多列布局
- column-count 设置列数
- column-gap 设置列间隙
用户界面
- 滚动条样式（scrollbar-face-color, scrollbar-track-color 等）
- 圆角（border-radius）
- 渐进边框效果（border-image）
多媒体
- 视频和音频（<video> 和 <audio> 标签）
框模型
- box-sizing 指定如何计算元素的总宽度和总高度
过滤器
- 亮度（brightness）
- 对比度（contrast）
- 灰度（grayscale）
- sepia（sepia）
- 模糊（blur）

下面是一个简单的 CSS3 示例，使用了几个新特性：




/* 圆角边框和阴影效果 */
div {
  border: 1px solid #000;
  border-radius: 10px;
  box-shadow: 5px 5px 5px #888888;
}
 
/* 渐进背景颜色 */
div {
  background-image: linear-gradient(to right, red, yellow);
}
 
/* 文字阴影 */
p {
  text-shadow: 2px 2px 2px #888888;
}
 
/* 媒体查询，根据屏幕大小应用不同样式 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
 
/* 自定义字体 */
@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff') format('woff');
}
 
body {
  font-family: 'MyCustomFont', sans-serif;
}
 
/* CSS动画 */
@keyframes myAnimation {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
div {
  animation-name: myAnimation;
  animation-duration: 4s;
}

这些新特性使得网页设计师和开发者能创建更加生动和复杂的网页界面，提升用户体验。

System

2024-08-14

所有,css3

在HTML中，表格的边框颜色可以通过CSS来设置。如果你想设置表格的亮边框颜色和暗边框颜色，可以使用CSS的border-color和border属性。

以下是一个简单的例子，展示如何设置表格的亮边框颜色和暗边框颜色：




<!DOCTYPE html>
<html>
<head>
<style>
  table {
    width: 100%;
    border-collapse: collapse; /* 移除表格之间的间隔 */
  }
  table, th, td {
    border: 1px solid black; /* 设置边框宽度和样式 */
  }
  th {
    height: 50px;
    background-color: #f2f2f2; /* 设置表头背景色 */
  }
  td {
    padding: 10px;
  }
  /* 设置亮边框颜色 */
  th, td {
    border-color: #555;
  }
  /* 设置暗边框颜色 */
  table tr:nth-child(odd) {
    background-color: #f9f9f9;
  }
  table tr:nth-child(even) {
    background-color: #fdfdfd;
  }
</style>
</head>
<body>
 
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 4</td>
    <td>Data 5</td>
    <td>Data 6</td>
  </tr>
  <!-- 更多行... -->
</table>
 
</body>
</html>

在这个例子中，我们使用CSS选择器为表格的表头(th)和数据单元格(td)设置了亮边框颜色，并且通过:nth-child伪类选择器为奇数行和偶数行设置了不同的背景色作为暗边框颜色。border-collapse: collapse; 属性用于移除表格单元之间的间隔，使得整个表格看上去有单一的边框。

- 阅读更多 -