标签 css 下的文章

2024-08-16

以下是使用HTML和CSS实现的雪花静态效果代码，以及使用JavaScript实现动态雪花效果的代码。

HTML/CSS 静态雪花效果:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snowflakes</title>
<style>
  .snowflake {
    position: absolute;
    color: white;
    user-select: none;
    z-index: 1000;
  }
</style>
</head>
<body>
  <div class="snowflake">❄</div>
</body>
</html>

JavaScript 动态雪花效果:




// 动态雪花效果
function createSnowflake() {
  const snowflake = document.createElement('div');
  snowflake.textContent = '❄';
  snowflake.classList.add('snowflake');
  
  // 随机位置
  snowflake.style.left = Math.random() * window.innerWidth + 'px';
  snowflake.style.top = '-50px'; // 初始位置在屏幕上方
  
  document.body.appendChild(snowflake);
  
  // 下落动画
  snowflake.animate(
    [
      { top: '-50px' }, // 开始状态
      { top: `${window.innerHeight}px`} // 结束状态
    ],
    {
      duration: 5000 + Math.random() * 5000, // 随机下落时间
      easing: 'cubic-bezier(0.5, -0.5, 1, 1)', // 缓动函数
      fill: 'forwards' // 在动画结束时保持最后一帧状态
    }
  );
  
  // 动画完成后从DOM中移除
  snowflake.onfinish = () => snowflake.remove();
}
 
// 创建初始雪花
createSnowflake();
 
// 定时创建新雪花
setInterval(createSnowflake, 500);

这段JavaScript代码会在页面中定期创建新的雪花div，并给它们应用一个随机的下落动画。动画完成后，雪花会被从DOM中移除。

- 阅读更多 -

CSS布局之使用Flex布局画骰子（4点）

System

2024-08-16

所有,css3




/* 定义容器样式 */
.dice-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 100px; /* 容器宽度 */
  height: 100px; /* 容器高度 */
  margin: 20px; /* 外边距 */
  border: 2px solid #000; /* 边框 */
  border-radius: 10px; /* 边框圆角 */
}
 
/* 定义骰子面样式 */
.dice-face {
  width: 50%; /* 宽度为容器宽度一半 */
  height: 50%; /* 高度为容器高度一半 */
  background-color: #f2f2f2; /* 背景颜色 */
  border-radius: 50%; /* 圆形面 */
}
 
/* 定义第一个骰子面的样式 */
.dice-face:nth-child(1) {
  transform: rotate(90deg); /* 旋转90度 */
}
 
/* 定义第二个骰子面的样式 */
.dice-face:nth-child(2) {
  transform: rotate(180deg); /* 旋转180度 */
}
 
/* 定义第三个骰子面的样式 */
.dice-face:nth-child(3) {
  transform: rotate(270deg); /* 旋转270度 */
}
 
/* 定义第四个骰子面的样式 */
.dice-face:nth-child(4) {
  position: absolute; /* 绝对定位 */
  top: 25%; /* 上边距为容器高度25% */
  left: 25%; /* 左边距为容器宽度25% */
}
 
/* HTML结构 */
<div class="dice-container">
  <div class="dice-face"></div>
  <div class="dice-face"></div>
  <div class="dice-face"></div>
  <div class="dice-face"></div>
</div>

这段代码展示了如何使用CSS Flexbox布局来创建一个简单的4点骰子图案。每个.dice-face代表一个骰子面，通过transform属性进行旋转，第四个面通过绝对定位放置在容器的中心。这个例子简单直观，适合用于教学目的。

System

2024-08-16

所有,css3




/* CSS重置 */
table, th, td {
    border: none;
    border-collapse: collapse;
    font-size: 14px;
    padding: 8px;
}
 
/* 合并单元格 */
.merge-cells {
    /* 水平合并两个单元格 */
    border-right: 1px solid #ccc;
}
 
/* 强制单元格内容换行 */
.wrap-text {
    word-break: break-all;
}
 
/* 统一表格样式 */
.uniform-table {
    width: 100%;
    border-collapse: collapse;
}
 
.uniform-table th, .uniform-table td {
    border: 1px solid #ddd;
    padding: 8px;
}

这段CSS代码展示了如何重置表格样式、合并单元格、强制单元格内容换行，并创建统一的表格样式。在实际开发中，可以直接复用这些类，提高代码的复用性和可维护性。

- 阅读更多 -

【CSS】小米页面

System

2024-08-16

所有,css3

为了创建一个类似小米官网的页面布局，你可以使用以下的HTML和CSS代码作为起点。请注意，这里只提供了基础的结构和样式，实际的小米页面会包含更多的交互和动画效果。

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米官网模拟</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">社区</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </nav>
</header>
<main>
    <div class="banner">
        <img src="banner.jpg" alt="小米官方网站">
    </div>
    <section class="products">
        <h2>热门产品</h2>
        <div class="product-grid">
            <!-- 产品卡片 -->
        </div>
    </section>
    <!-- 其他内容 -->
</main>
<footer>
    <div class="footer-content">
        <!-- 页脚信息 -->
    </div>
</footer>
</body>
</html>

CSS (style.css):




body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #F3F3F3;
}
 
header {
    background-color: #FFFFFF;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
 
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
 
nav li {
    float: left;
}
 
nav a {
    display: block;
    padding: 14px 16px;
    text-decoration: none;
    color: #000000;
    font-weight: bold;
}
 
nav a:hover {
    background-color: #555555;
    color: white;
}
 
main {
    margin: 0 auto;
    max-width: 1200px;
    padding: 20px;
}
 
.banner img {
    width: 100%;
}
 
.products {
    margin-top: 20px;
    padding: 20px;
    background-color: #FFFFFF;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
 
.product-grid {
    /* 添加实际的样式和布局 */
}
 
footer {
    background-color: #333333;
    color: #FFFFFF;
    text-align: center;
    padding: 20px;
}
 
footer a {
    color: #FFFFFF;
}
 
/* 更多样式根据需要添加 */

这个简单的布局包括了导航栏、banner、产品展示区域和页脚。你可以根据实际的设计需求添加更多的CSS样式和布局。记得为.product-grid添加实际的样式，以展示小米官网中的产品卡片布局。

- 阅读更多 -

HTML5+CSS3小实例：文本背景扫光效果

System

2024-08-16

所有,css3




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Scrolling Glow Effect</title>
<style>
  @keyframes glow {
    from {
      background-position: 0 0;
    }
    to {
      background-position: 300px 0;
    }
  }
  .glow-text {
    font-size: 6em;
    color: #fff;
    background: linear-gradient(to right, #ff8a00, #e52e71);
    background-size: 300px 300px;
    background-repeat: no-repeat;
    text-align: center;
    animation: glow 5s ease-in-out infinite;
  }
</style>
</head>
<body>
  <div class="glow-text">
    扫光效果的文本
  </div>
</body>
</html>

这段代码创建了一个带有扫光效果的文本，其中.glow-text类定义了文本的样式，包括字体大小、颜色（白色 #fff）、背景渐变以及动画效果。@keyframes glow定义了背景图像如何移动产生动画效果。这个示例展示了如何结合CSS3的渐变和动画功能来创造特殊的视觉效果。

- 阅读更多 -

html中表格和表单嵌套以及css基础知识

System

2024-08-16

所有,css3




<!DOCTYPE html>
<html>
<head>
    <style>
        /* 设置表格的边框样式和宽度 */
        table {
            border-collapse: collapse;
            width: 100%;
        }
        /* 设置表格单元格的边框样式和内边距 */
        th, td {
            border: 1px solid black;
            padding: 8px;
        }
        /* 设置表单元素的边框样式和内边距 */
        input {
            border: 1px solid #ddd;
            padding: 8px;
        }
    </style>
</head>
<body>
 
<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>城市</th>
    </tr>
    <tr>
        <td>
            <form action="/submit-name">
                <input type="text" name="name" placeholder="请输入姓名">
            </form>
        </td>
        <td>
            <form action="/submit-age">
                <input type="number" name="age" placeholder="请输入年龄">
            </form>
        </td>
        <td>
            <form action="/submit-city">
                <input type="text" name="city" placeholder="请输入城市">
            </form>
        </td>
    </tr>
</table>
 
</body>
</html>

这个例子展示了如何在HTML中嵌套表格和表单，并通过CSS为表格和表单元素添加样式。在实际应用中，通常会使用服务器端脚本来处理表单提交的数据，但这里的action属性只是为了示例展示表单提交的行为。

- 阅读更多 -

CSS3及Javascript实现网页视频背景居中并自动拉伸

System

2024-08-16

所有,css3

以下是实现网页视频背景居中并自动拉伸至完全覆盖的代码示例：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Background</title>
<style>
  html, body {
    height: 100%;
    margin: 0;
  }
  .video-background {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto;
    z-index: -1;
  }
</style>
</head>
<body>
<video class="video-background" autoplay loop muted playsinline>
  <!-- 在这里放置你的视频文件路径 -->
  <source src="your-video-file.mp4" type="video/mp4">
</video>
</body>
</html>

请替换your-video-file.mp4为你的视频文件路径。这段代码将确保视频背景始终居中并且自动伸缩至完全覆盖整个网页。

- 阅读更多 -

实现背景一半白一半蓝并且颜色占比使用动态css

System

2024-08-16

所有,css3

要实现一半白一半蓝的背景，并且要求使用动态CSS，我们可以使用CSS Gradients来实现这个效果。以下是一个简单的实现方法：

HTML:




<div class="dynamic-background"></div>

CSS:




.dynamic-background {
  width: 100%;
  height: 200px; /* 根据需要调整高度 */
  background: linear-gradient(to right, white 50%, blue 50%);
}

这段CSS代码会创建一个从左到右白色和蓝色交替的线性渐变背景，其中白色占据宽度的50%，蓝色占据宽度的50%。如果你需要动态地调整这个比例（例如根据窗口宽度或其他因素），你可以使用JavaScript来动态更新background属性。

JavaScript (动态调整宽度):




function updateBackground() {
  const div = document.querySelector('.dynamic-background');
  const width = div.offsetWidth; // 获取元素宽度
  const gradient = `linear-gradient(to right, white ${width / 2}px, blue ${width / 2}px)`;
  div.style.background = gradient;
}
 
// 初始化背景
updateBackground();
 
// 如果需要在窗口大小改变时更新背景，可以添加事件监听器
window.addEventListener('resize', updateBackground);

这段JavaScript代码会在页面加载时初始化背景并且在窗口大小改变时更新背景。其中${width / 2}px用于计算每部分应占据的宽度。这样就可以实现背景颜色的动态调整了。

- 阅读更多 -

CSS：重绘与重排、优化图片、渐进式渲染、CSS3新增属性、CSS hack

System

2024-08-16

所有,css3

重绘(Repaint)与重排(Reflow)：
- 重绘：当元素的外观被改变，但不影响布局（如颜色改变），浏览器会将新样式添加到渲染树中，并重新绘制影响的部分。
- 重排：布局发生改变（如大小、位置改变），浏览器需要重新构建渲染树。
优化图片：
- 使用CSS属性background-size: cover;来确保背景图像适应容器大小。
- 对于动态内容，使用canvas元素处理图像。
渐进式渲染：
- 使用<link rel="preload">来指定先加载的资源。
- 使用<script>标签的async或defer\`属性来异步加载JavaScript。
CSS3新增属性：
- 边框、阴影、圆角：border-radius、box-shadow。
- 渐变、变换：linear-gradient、transform。
- 动画、过渡：animation、transition。
CSS Hack：
- 浏览器特定样式：例如_moz仅Firefox、*zoom:1为IE6-7。
- 条件注释：例如<!--[if IE 6]>只针对IE6。

注意：在实际开发中应尽量避免使用Hack，并且优化CSS以减少重排和重绘。

- 阅读更多 -

CSS基础：盒子模型和浮动

System

2024-08-16

所有,css3

CSS盒子模型主要定义了元素的边距，边框，填充以及实际内容的区域，浮动则是CSS布局的一种特性，用于创建多栏布局。

标准盒子模型：




.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

IE盒子模型（怪异盒子模型）：




.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
  box-sizing: border-box;
}

清除浮动：




.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

左浮动：




.float-left {
  float: left;
}

右浮动：




.float-right {
  float: right;
}

清除浮动影响：




.clearfix {
  overflow: auto;
  zoom: 1; /* 针对IE6 */
}

以上代码示例展示了如何定义盒子模型的各个部分，以及如何使用float属性进行布局，并通过clearfix类来清除浮动带来的影响。

- 阅读更多 -