分类 css3 下的文章

纯css实现坤坤经典动作-“铁山靠”

2024-08-14

"铁山靠"这个动作在纯CSS中可以通过关键帧动画（keyframe animations）和CSS的animation属性来实现。以下是一个简单的示例，演示如何用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>
  .titan {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation: titan-lean 2s infinite alternate;
  }
 
  @keyframes titan-lean {
    0% {
      transform: rotate(0deg) translateX(0);
    }
    50% {
      transform: rotate(10deg) translateX(20px);
    }
    100% {
      transform: rotate(0deg) translateX(0);
    }
  }
</style>
</head>
<body>
<div class="titan"></div>
</body>
</html>

这段代码中定义了一个.titan类，它有一个无限循环且每次循环交替方向的titan-lean动画。动画通过transform属性的rotate和translateX函数来实现转体和向右位移的效果。通过调整@keyframes中的百分比和具体的transform值，可以控制动画的进程和结果。

CSS3 新增的新特性

2024-08-14

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;
}

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

2024-08-14

在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; 属性用于移除表格单元之间的间隔，使得整个表格看上去有单一的边框。

CSS3-flex布局

2024-08-14

CSS3的Flexbox布局（弹性盒子布局）提供了一种更灵活的方式来对容器内的项进行排列、对齐和分配空间。

以下是一个简单的Flex布局示例，它将创建一个水平的弹性容器，其中的子元素会自动伸缩以填满可用空间：




<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex; /* 使用弹性布局 */
}
 
.flex-item {
  width: 100px; /* 设置子元素的宽度 */
  height: 100px; /* 设置子元素的高度 */
  margin: 5px; /* 设置子元素的外边距 */
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item" style="background-color: cyan;">1</div>
  <div class="flex-item" style="background-color: magenta;">2</div>
  <div class="flex-item" style="background-color: yellow;">3</div>
</div>
 
</body>
</html>

在这个例子中，.flex-container 类使用 display: flex; 属性使得容器使用Flex布局。.flex-item 类设置了子元素的宽度和高度，并且每个子元素都有5像素的外边距。

Flex布局的强大之处在于它可以轻松地在容器内水平和垂直排列子元素，调整它们的大小，以及控制它们在容器内的对齐方式。

CSS3多列（详解网页多列布局应用）

2024-08-14

CSS3的多列布局功能可以用来创建多列布局，以便在一个容器内并排显示多列内容。以下是一个简单的示例，展示如何使用CSS3的多列属性来创建一个多列布局：




<!DOCTYPE html>
<html>
<head>
<style>
.multi-column {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3;    /* Firefox */
  column-count: 3;
  -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
  -moz-column-gap: 20px;    /* Firefox */
  column-gap: 20px;
  width: 80%;
  margin: auto;
}
 
/* 为了美观，添加一些内边距和背景色 */
.multi-column p {
  padding: 10px;
  background-color: #f9f9f9;
}
</style>
</head>
<body>
 
<div class="multi-column">
  <p>...</p>
  <!-- 添加更多的段落来填充更多列 -->
</div>
 
</body>
</html>

在这个示例中，.multi-column 类定义了一个容器，该容器会根据内容自动分割成三列。-webkit-column-count 和 column-count 属性用于指定列的数量。-webkit-column-gap 和 column-gap 属性用于指定列之间的间隔。每个 <p> 元素都会在适当的列下自动放置。这种布局方式可以用来创建杂志或报纸的版面布局，也可以用于创建博客或新闻网站的文章分栏。

css3背景渐变以及阴影与导航栏的几种实现方式

2024-08-14

CSS3中实现背景渐变和阴影可以使用linear-gradient函数来创建渐变效果，以及box-shadow属性来添加阴影。以下是实现导航栏的几种方式：

基本导航栏：




/* 渐变背景 */
.navbar {
  background-image: linear-gradient(to right, #FFC107, #FF5722);
}
 
/* 阴影效果 */
.navbar {
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
}

使用伪元素添加分割线：




.navbar li::after {
  content: '';
  display: inline-block;
  height: 1px;
  width: 100px;
  background-image: linear-gradient(to right, #FFC107, #FF5722);
  margin: 0 10px;
}

使用伪元素添加图标：




.navbar li::before {
  content: '\276F';
  color: white;
  margin-right: 10px;
}

导航栏响应式设计：




@media (max-width: 600px) {
  .navbar li {
    display: block;
    text-align: center;
  }
}

这些示例展示了如何使用CSS3的基本功能来增强导航栏的视觉效果。实际应用时，可以根据具体设计要求和布局调整相关属性。

CSS 手机端 hover 点击后无法取消样式解决方案

2024-08-13

在CSS中，为了在移动端实现类似“hover”的效果，可以使用:active伪类来表示点击的状态。然而，在某些情况下，点击后可能会出现样式无法撤销的问题。为了解决这个问题，可以使用:focus伪类来增强样式的特定性，确保在点击后样式能够正确撤销。

以下是一个简单的示例，展示了如何使用:focus伪类来解决点击后样式无法撤销的问题：




/* 定义按钮的基础样式 */
button {
  background-color: #4CAF50;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  transition: background-color 0.3s;
}
 
/* 当按钮被点击时的样式 */
button:active {
  background-color: #3e8e41;
}
 
/* 当按钮被点击后，通过:focus伪类保持被点击状态的样式 */
button:focus {
  outline: none;
}
 
/* 为了确保在移动端表现一致，可以添加触摸事件的监听 */
button.mobile-button {
  /* 添加触摸事件的样式 */
  -webkit-tap-highlight-color: transparent;
}

在HTML中，你可以这样使用这个按钮：




<button class="mobile-button">点击我</button>

在这个示例中，当按钮被点击后，:active伪类会应用，为按钮添加一个新的背景颜色。然后，:focus伪类会介入，确保即使是在移动端，点击后的样式也不会消失，从而解决了点击后样式无法撤销的问题。

2024-08-13

要为文件上传的input标签设置自定义样式，并使其看起来像一个按钮，你可以隐藏原生的input元素，并为一个可见的button元素添加事件监听器，以触发文件上传。以下是一个简单的例子：

HTML:




<input type="file" id="fileUpload" style="display: none;" />
<button id="uploadButton">选择文件</button>

CSS:




#uploadButton {
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
}
 
#uploadButton:hover {
  background-color: #0056b3;
}

JavaScript:




document.getElementById('uploadButton').addEventListener('click', function() {
  document.getElementById('fileUpload').click();
});

这段代码会创建一个按钮，当用户点击时，它会触发隐藏的文件上传input。这样就可以实现一个自定义样式的文件上传按钮。

CSS3新增的语法

2024-08-13

在CSS3中，新增了许多的特性，包括选择器、伪类、渐变、阴影、变换等等。以下是一些常见的CSS3新增语法的示例：

圆角（border-radius）




div {
  border: 2px solid #a1a1a1;
  border-radius: 50px; /* 所有角都为50像素的圆角 */
}

阴影（box-shadow）




div {
  box-shadow: 10px 10px 5px #888888; /* 水平偏移 垂直偏移 模糊距离 颜色 */
}

文字阴影（text-shadow）




p {
  text-shadow: 2px 2px 2px #888888; /* 水平偏移 垂直偏移 模糊距离 颜色 */
}

线性渐变（linear-gradient）




div {
  background: linear-gradient(to right, red , yellow); /* 从左到右的渐变，从红色到黄色 */
}

旋转（transform: rotate）




div:hover {
  transform: rotate(360deg); /* 鼠标悬停时旋转360度 */
  transition: transform 0.5s ease-in-out; /* 变化过渡效果 */
}

自定义动画（animation）




@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
div {
  animation-name: example; /* 动画名称 */
  animation-duration: 4s; /* 动画时长 */
  animation-iteration-count: infinite; /* 动画重复次数 */
}

多列布局（column-count、column-gap）




div {
  column-count: 3; /* 分为3列 */
  column-gap: 10px; /* 列与列之间的间隔 */
}

选择器（:target、:nth-child、:checked）




#section1:target {
  color: blue; /* 当前活动#section1的颜色为蓝色 */
}
 
input:checked + span {
  color: green; /* 选中的input旁边的span颜色为绿色 */
}
 
ul li:nth-child(2) {
  color: red; /* ul中的第二个li的颜色为红色 */
}

这些只是CSS3新特性的一小部分，还有许多其他的特性等待我们去学习和使用。