标签 css 下的文章

2024-08-17

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（内容区域、填充、边框都包含在内）。

- 阅读更多 -

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将执行一个淡入效果，当动画完成后，它会保持不透明的状态，即最后一帧的状态。

- 阅读更多 -

【HTML&CSS】常见元素及样式汇总

System

2024-08-17

所有,css

在HTML和CSS中，元素的样式可以通过内联样式、内部样式表和外部样式表三种方式来定义。以下是一个简单的HTML文档，它包含了这三种样式的应用方法：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式汇总</title>
 
    <!-- 内部样式表 -->
    <style>
        .red-text {
            color: red;
        }
        .blue-background {
            background-color: blue;
        }
    </style>
 
    <!-- 外部样式表 -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
 
    <!-- 内联样式 -->
    <h1 style="font-size: 30px;">欢迎来到我的网站</h1>
 
    <!-- 使用内部样式类 -->
    <p class="red-text">这是红色文字</p>
 
    <!-- 使用外部样式类 -->
    <p class="blue-background">这个段落有蓝色背景</p>
 
</body>
</html>

在styles.css文件中，可以定义.blue-background类的样式：




.blue-background {
    background-color: blue;
}

这个例子展示了如何在HTML文档中应用样式，包括如何通过不同的方式定义和链接样式。内联样式直接在元素上应用，通常用于单一元素的特殊样式。内部样式表用于当前文档，而外部样式表可以在多个页面之间共享样式规则。

- 阅读更多 -

【CSS】设置文字(文本)的渐变色

System

2024-08-17

所有,css

在CSS中，可以使用linear-gradient函数来为文字设置渐变色。你需要将linear-gradient函数应用于color属性，并使用background属性的-webkit-background-clip和text-fill-color实现文字颜色的剪切以及颜色的填充。

以下是一个示例代码：




.gradient-text {
  /* 创建一个线性渐变，从红色到蓝色 */
  background: linear-gradient(to right, red, blue);
  
  /* 对于WebKit浏览器，设置背景裁剪为文字，并设置文字颜色为裁剪后的背景 */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* 兼容非WebKit浏览器的方法是使用背景剪切和背景大小相同 */
  background-clip: text;
  color: transparent;
}

在HTML中使用该类：




<div class="gradient-text">这是渐变色的文字</div>

请注意，-webkit-background-clip和-webkit-text-fill-color是针对基于WebKit的浏览器（如旧版的Safari和Chrome）的。background-clip和color: transparent是现代浏览器的兼容方案。

- 阅读更多 -

通俗理解css弹性盒子

System

2024-08-17

所有,css

CSS弹性盒子（Flexible Box，Flexbox）是一种现代化的布局模型，使得复杂的布局变得更加简单，主要应对一维布局。

比如，你想让一组项目（items）在容器（container）中水平排列，并在不足容器宽度时自动缩小或者在溢出容器宽度时自动扩展，这时候你就可以使用弹性盒子布局。

下面是一个简单的弹性盒子布局示例：

HTML:




<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

CSS:




.container {
  display: flex; /* 设置为弹性盒子 */
}
 
.item {
  flex: 1; /* 让所有子元素平均分配容器宽度 */
  padding: 10px;
  margin: 5px;
  background-color: lightblue;
  text-align: center;
}

在这个例子中，.container 类使用 display: flex; 将该容器设置为弹性盒子。.item 类使用 flex: 1; 表示所有子元素将等分容器宽度。这样，.item 元素将自动伸缩以填满容器宽度。如果容器太窄，项目将按比例缩小；如果容器太宽，项目将按比例扩展。这是一种基本的弹性盒子布局，非常适合一维布局场景。

- 阅读更多 -

用CSS写一段从上到下滚动，效果相对顺滑过度的代码

System

2024-08-17

所有,css

您可以使用CSS的动画（animations）和关键帧（keyframes）来创建从上到下滚动的效果。以下是一个简单的例子：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scrolling Text</title>
<style>
  @keyframes scroll {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(100%);
    }
  }
 
  .scrolling-text {
    overflow: hidden;
    display: block;
    white-space: nowrap;
    animation: scroll 5s linear infinite;
  }
 
  /* Adjust the speed of the scroll here */
</style>
</head>
<body>
 
<div class="scrolling-text">
  这是一段从上到下滚动的文本。
</div>
 
</body>
</html>

在这段代码中，.scrolling-text 类定义了一个动画，名为 scroll。这个动画会使元素从完全在视图之外（translateY(-100%)）滚动到完全在视图之内（translateY(100%)）。您可以通过调整 animation 属性中的时长（这里是5秒）来改变滚动的速度。linear 关键字确保滚动是匀速的。infinite 关键字意味着动画会无限次数地重复。

- 阅读更多 -

css+js+html学习笔记，留以备份

System

2024-08-17

所有,css




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS + JS + HTML 示例</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h1>CSS + JS + HTML 学习笔记</h1>
    <p>这是一个段落。</p>
    <button onclick="highlightText()">突出显示段落文本</button>
    <script>
        function highlightText() {
            var paragraph = document.querySelector('p');
            paragraph.classList.toggle('highlight');
        }
    </script>
</body>
</html>

这个简单的HTML文档展示了如何使用CSS来样式化文档，使用JavaScript来响应用户事件（如按钮点击），以及如何操作DOM（文档对象模型）。当用户点击按钮时，highlightText函数会被调用，这个函数会查询DOM以找到段落元素，然后切换它的highlight类，从而改变文本的背景颜色。这个例子是学习Web开发基础的一个很好的起点。

- 阅读更多 -