1. 首页
  2. 标签
  3. css
纯css星空动画
System
2024-08-15
所有,css

创建一个简单的星空动画可以使用CSS3动画和多个背景图像。以下是一个简单的例子：

HTML:




<div class="star-sky"></div>

CSS:




.star-sky {
  width: 100%;
  height: 500px;
  background: url('star-sky.jpg') no-repeat center center fixed;
  background-size: cover;
  position: relative;
  animation: twinkling 10s infinite alternate;
}
 
@keyframes twinkling {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 200% 200%;
  }
}

在这个例子中，.star-sky 元素的背景图像会不断地移动，创建出星空动画的效果。@keyframes twinkling 定义了背景图像移动的动画，使星星看起来在闪烁。

请注意，你需要有一个名为 star-sky.jpg 的星空背景图片放在你的服务器或者项目目录中，并根据实际情况调整图片路径。此外，动画的时长和效果可以根据需要进行调整。

- 阅读更多 -
利用HTML和CSS实现简易导航栏
System
2024-08-15
所有,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>
  ul.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
 
  ul.navbar li {
    float: left;
  }
 
  ul.navbar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
 
  ul.navbar li a:hover {
    background-color: #111;
  }
</style>
</head>
<body>
 
<ul class="navbar">
  <li><a class="active" href="home.html">首页</a></li>
  <li><a href="news.html">新闻</a></li>
  <li><a href="contact.html">联系</a></li>
  <li><a href="about.html">关于</a></li>
</ul>
 
</body>
</html>

这段代码展示了如何使用HTML和CSS创建一个简单的水平导航栏。导航栏具有背景颜色、无边框、圆角边框以及在鼠标悬停时的背景变化效果。这是学习Web开发的一个基本示例，适合初学者学习和模仿。

- 阅读更多 -
CSS：两列布局
System
2024-08-15
所有,css

CSS(2)是指使用CSS第二版的语法来实现两列布局。CSS第一版是在1996年发布的，而第二版（也被称为CSS2）在1998年作为推荐标准发布。CSS2提供了更多的布局控制，比如使用float属性来创建浮动布局，或者使用display属性的table-cell值来创建类似表格的单元格布局。

以下是一个使用float属性的两列布局示例：




<!DOCTYPE html>
<html>
<head>
<style>
  .container {
    overflow: hidden; /* 清除浮动 */
    _zoom: 1; /* 为了兼容IE6 */
  }
  .column {
    float: left; /* 向左浮动 */
    width: 50%; /* 每列宽度为50% */
    padding: 10px; /* 列间距 */
  }
</style>
</head>
<body>
<div class="container">
  <div class="column">
    <p>第一列内容。</p>
  </div>
  <div class="column">
    <p>第二列内容。</p>
  </div>
</div>
</body>
</html>

在这个示例中，.container 类用于创建一个容器，该容器的 overflow: hidden; 属性和 _zoom: 1; 属性用于清除浮动，确保两列能够并列显示。.column 类使用 float: left; 属性让两列并排显示，每列的宽度设置为 width: 50%;，列与列之间的间距设置为 padding: 10px;。

- 阅读更多 -
css溢出隐藏的五种方法
System
2024-08-15
所有,css

CSS中处理溢出内容的常见方法有以下五种：

  1. overflow: hidden; - 隐藏溢出的内容。
  2. overflow: scroll; - 添加滚动条来查看溢出的内容。
  3. overflow: auto; - 根据需要自动添加滚动条。
  4. text-overflow: ellipsis; - 当文本溢出时显示省略号。常用于单行文本。
  5. clip-path: polygon(0% 0%, 100% 0%, 100% 100%); - 裁剪溢出的内容。适用于需要隐藏图片或其他元素溢出部分的情况。

以下是每种方法的简单示例：




/* 方法1: 隐藏溢出的内容 */
.overflow-hidden {
  overflow: hidden;
}
 
/* 方法2: 添加滚动条 */
.overflow-scroll {
  overflow: scroll;
}
 
/* 方法3: 根据需要添加滚动条 */
.overflow-auto {
  overflow: auto;
}
 
/* 方法4: 单行文本溢出显示省略号 */
.text-overflow-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
 
/* 方法5: 裁剪溢出的内容 */
.clip-path-polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}

在HTML中使用这些类：




<div class="overflow-hidden">溢出隐藏内容</div>
<div class="overflow-scroll">添加滚动条</div>
<div class="overflow-auto">自动添加滚动条</div>
<div class="text-overflow-ellipsis">单行文本溢出显示省略号</div>
<div class="clip-path-polygon">裁剪溢出的内容</div>

这些方法可以根据需要应用于不同的元素和情况。

- 阅读更多 -
【CSS】盒子模型如何设置阴影
System
2024-08-15
所有,css

CSS盒子模型不能直接设置阴影，但可以使用box-shadow属性为元素添加阴影。

box-shadow属性的基本语法如下：




box-shadow: offsetX offsetY blurRadius spreadRadius color inset;
  • offsetX和offsetY定义阴影的水平和垂直偏移量。
  • blurRadius定义模糊距离。
  • spreadRadius定义阴影的大小。
  • color定义阴影的颜色。
  • inset关键字（可选）定义内阴影而不是外阴影。

例子：




div {
  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
}

这段代码会在div元素上添加一个向下及向右偏移5像素的模糊阴影，阴影的颜色为半透明的黑色，模糊半径为10像素。

- 阅读更多 -
css实现盒子背景颜色渐变（一文读懂背景颜色渐变）
System
2024-08-15
所有,css

CSS中实现盒子背景色渐变可以使用linear-gradient函数。这个函数允许你指定一个颜色渐变，从左到右、从上到下或者你可以自定义一个角度。

以下是一些实现背景渐变的CSS样式示例：

  1. 从左到右的渐变色背景：



.box {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}
  1. 从上到下的渐变色背景：



.box {
  background: linear-gradient(to bottom, #ff7e5f, #feb47b);
}
  1. 自定义角度的渐变色背景（例如：从左上角到右下角）：



.box {
  background: linear-gradient(45deg, #ff7e5f, #feb47b);
}

你可以调整#ff7e5f和#feb47b为你想要的任何颜色。这些颜色可以是十六进制颜色代码、RGB、RGBA、HSL、HSLA 或者预定义的颜色名称。

- 阅读更多 -
css - flex布局实现div横向滚动
System
2024-08-15
所有,css

要在CSS中使用flex布局实现div横向滚动，可以将容器设置为overflow-x: auto;，并且内容超出容器宽度时可以滚动。以下是实现这种效果的示例代码：

HTML:




<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
  <!-- 更多的项 -->
</div>

CSS:




.flex-container {
  display: flex;
  overflow-x: auto;
}
 
.flex-item {
  flex: 0 0 auto; /* 不伸缩，固定宽度，不允许空白 */
  margin-right: 10px; /* 项之间的间隔 */
  /* 设置宽度或者其他样式 */
}

在这个例子中，.flex-container 是一个横向滚动的容器，所有的 .flex-item 子元素会在容器内横向排列。当所有子元素的总宽度超出 .flex-container 的宽度时，容器会出现滚动条，可以横向滚动查看更多内容。

- 阅读更多 -
如何使用 CSS 中的 :root 伪类选择器
System
2024-08-15
所有,css

:root 伪类选择器在 CSS 中表示文档的根元素。根元素是文档的最顶级元素，在 HTML 中通常是 html 元素。使用 :root 可以设置应用于整个文档的样式，无论文档的根元素是什么。

:root 可以用来定义全局变量，这些变量可以在整个文档中使用，并可以用于计算其他样式值。

例如，你可以在 :root 中定义一些颜色变量，然后在其他 CSS 规则中使用这些变量：




:root {
  --main-bg-color: #f3f3f3;
  --main-text-color: #333;
}
 
body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
}
 
/* 更多样式规则可以继续使用这些变量 */

在上面的例子中，:root 定义了两个变量 --main-bg-color 和 --main-text-color，然后在 body 选择器中使用了这些变量来设置背景颜色和文本颜色。

:root 也可以用来设置基本字体大小，然后使用 rem 单位来设置其他元素的字体大小，这样可以确保整个文档的缩放一致性：




:root {
  font-size: 16px;
}
 
body {
  font-size: 1rem; /* 这将会被解析为 16px */
}
 
h1 {
  font-size: 2rem; /* 这将会被解析为 32px */
}

在上面的例子中，:root 设置了基本的字体大小为 16px，然后在 body 中使用 1rem 来引用这个大小，而 h1 使用 2rem 来扩大字体大小至 16px 的两倍。

- 阅读更多 -
css 安全区域 safe-area-inset-
System
2024-08-15
所有,css

CSS安全区域是指移动设备屏幕上的一块区域，用于显示导航栏、主屏幕按钮等操作系统提供的UI元素。在设计移动网页或应用时，可以使用CSS的env()函数或者constant()函数来为内容设置适当的边距，以避免遮挡这些UI元素。

safe-area-inset-属性是一个CSS自定义属性，它允许你获取到安全区域的边距信息。你可以使用top、right、bottom和left来获取顶部、右侧、底部和左侧的安全区域边距。

例如，如果你想要设置一个元素的内边距，使其不会与安全区域发生重叠，你可以这样做：




.element {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

这段代码会根据设备的安全区域边距设置.element类的内边距。

注意：safe-area-inset-属性目前并不是所有浏览器都支持，因此在使用前请确保目标平台或浏览器的兼容性。

- 阅读更多 -
【css】css奇数、偶数、指定数选择器：
System
2024-08-15
所有,css

在CSS中，我们可以使用:nth-child(an+b)伪类选择器来选择元素，其中a和b是任意给定的整数，n是一个自然数，它是子元素的位置。

  1. 选择奇数元素

我们可以使用:nth-child(odd)选择器来选择奇数元素。




li:nth-child(odd) {
    color: red;
}
  1. 选择偶数元素

我们可以使用:nth-child(even)选择器来选择偶数元素。




li:nth-child(even) {
    color: blue;
}
  1. 选择指定的元素

我们可以使用:nth-child(an+b)选择器来选择位置为an+b的元素。




li:nth-child(3n+1) {
    color: green;
}

在上述例子中，我们选择了位置为3n+1的元素，即1、4、7、10等元素。

注意：在:nth-child(an+b)选择器中，a和b必须是整数，n是一个自然数，它是子元素的位置。如果a=0，则选择所有位置为bn+b的元素。如果a<0，则选择所有位置为an+b的元素，其中an+b在给定范围内。

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