1. 首页
  2. 分类
  3. css3
CSS基础01 - HTML页面嵌套使用CSS的三种方式
System
2024-08-11
所有,css3

在HTML页面中，我们可以通过三种方式使用CSS：

  1. 内联样式：直接在HTML元素的style属性中书写CSS代码。
  2. 内部样式表：在HTML文档的<head>部分，使用<style>标签来书写CSS代码。
  3. 外部样式表：创建一个单独的CSS文件，并通过HTML文档的<link>标签引入。

以下是每种方式的示例代码：

  1. 内联样式：



<p style="color: red;">这是一个红色文本。</p>
  1. 内部样式表：



<head>
    <style>
        p { color: blue; }
    </style>
</head>
<body>
    <p>这是一个蓝色文本。</p>
</body>
  1. 外部样式表：



<!-- 在<head>部分引入外部CSS文件 -->
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

styles.css 文件内容：




p {
    color: green;
}

在HTML页面中使用CSS时，推荐使用外部样式表，因为它可以在多个页面之间共享样式信息，减少代码冗余，并且有利于SEO和维护。

- 阅读更多 -
HTML+CSS制作二级和三级列表
System
2024-08-11
所有,css3

在HTML中，可以使用<ul>（无序列表）和<ol>（有序列表）来创建列表，而在CSS中，可以使用margin和padding属性来调整列表的缩进，从而创建多级列表。

以下是一个简单的例子，展示了如何使用HTML和CSS创建二级和三级列表：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多级列表示例</title>
<style>
    /* 设置所有列表项的默认缩进 */
    ul, ol {
        padding-left: 20px;
    }
 
    /* 对二级列表进行样式设置 */
    ul ul {
        list-style-type: circle; /* 使用圆形标记 */
    }
 
    /* 对三级列表进行样式设置 */
    ul ul ul {
        list-style-type: square; /* 使用正方形标记 */
    }
</style>
</head>
<body>
 
<h1>多级列表示例</h1>
 
<ul>
    <li>一级列表项1</li>
    <li>一级列表项2
        <ul>
            <li>二级列表项2-1</li>
            <li>二级列表项2-2
                <ul>
                    <li>三级列表项2-2-1</li>
                    <li>三级列表项2-2-2</li>
                </ul>
            </li>
            <li>二级列表项2-3</li>
        </ul>
    </li>
    <li>一级列表项3</li>
</ul>
 
</body>
</html>

在这个例子中，我们定义了一个无序的一级列表，其中包含了二级和三级的列表项。CSS规则用于设置列表的缩进，从而创建多级列表的视觉层次结构。通过调整padding-left的值，你可以控制列表项之间的间距，进一步优化多级列表的外观。

- 阅读更多 -
CSS：横向导航栏
System
2024-08-11
所有,css3

要创建一个横向导航栏，您可以使用HTML和CSS来实现。以下是一个简单的例子：

HTML:




<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>

CSS:




nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
 
nav li {
  float: left;
}
 
nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
nav li a:hover {
  background-color: #111;
}

这段代码创建了一个水平的导航栏，其中每个选项都是浮动的，以便它们横向排列。当鼠标悬停在某个链接上时，背景色会变暗。

- 阅读更多 -
【css3】音频波纹加载效果
System
2024-08-11
所有,css3

CSS3可以用来制作音频波纹的加载效果，以下是一个简单的实现示例：

HTML:




<div class="waveform">
  <div class="waveform-bar"></div>
  <div class="waveform-bar"></div>
  <div class="waveform-bar"></div>
  <div class="waveform-bar"></div>
  <div class="waveform-bar"></div>
</div>

CSS:




.waveform {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #ddd;
  border-radius: 8px;
  overflow: hidden;
}
 
.waveform-bar {
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 100px;
  background-color: #333;
  animation: waveform-animation 5s linear infinite;
}
 
.waveform-bar:nth-child(1) { animation-delay: -1.5s; }
.waveform-bar:nth-child(2) { animation-delay: -3s; }
.waveform-bar:nth-child(3) { animation-delay: -4.5s; }
.waveform-bar:nth-child(4) { animation-delay: -6s; }
.waveform-bar:nth-child(5) { animation-delay: -7.5s; }
 
@keyframes waveform-animation {
  0% {
    transform: translateX(-200px);
  }
  100% {
    transform: translateX(200px);
  }
}

这段代码创建了一个带有波纹效果的加载动画。每个.waveform-bar代表一个波纹，通过animation属性和@keyframes规则，实现了从左至右移动的动画效果。通过调整.waveform-bar的animation-delay属性，使得每个波纹出现的时间有所延迟，从而模拟出一个连续的波纹动画。

- 阅读更多 -
css3的animation制作围绕椭圆轨道旋转，近大远小的动画
System
2024-08-11
所有,css3

要使用CSS3的animation制作一个围绕椭圆轨道旋转，且远离观察者的元素在近大远小的动画，你可以使用scale属性进行缩放控制，结合animation和transform属性。

以下是一个简单的例子：

HTML:




<div class="ellipse"></div>

CSS:




@keyframes rotate {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
    transform-origin: 50% 50%;
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
 
.ellipse {
  width: 100px;
  height: 50px;
  background: blue;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -50px;
  animation: rotate 5s infinite linear;
  transform-style: preserve-3d;
}
 
.ellipse:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: red;
  border-radius: 50%;
  transform: scale(0);
  animation: scale-up 5s infinite alternate ease-in-out;
}
 
@keyframes scale-up {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

在这个例子中，.ellipse是动画的基本元素，围绕其中心旋转。:before伪元素用来模拟远离观察者的效果，通过scale动画在0到1之间变化来模拟大小的变化。rotate动画控制.ellipse的旋转。

你可以根据需要调整动画的时长和其他属性。

- 阅读更多 -
CSS3实现文字循环滚动播放
System
2024-08-11
所有,css3

要使用CSS3实现文字的循环滚动播放，可以使用@keyframes规则来定义动画，并使用animation属性应用这个动画。以下是一个简单的例子，展示了如何使用CSS3实现循环滚动的文字效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Scroll Animation</title>
<style>
  .scroll-text {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
  }
 
  .scroll-text::before,
  .scroll-text::after {
    content: attr(data-scroll-text);
    position: absolute;
    top: 0;
    left: 100%;
    will-change: transform;
    animation: scroll-left 10s linear infinite;
  }
 
  .scroll-text::after {
    left: inherit;
    animation-direction: alternate;
    animation-duration: 10s;
  }
 
  @keyframes scroll-left {
    to {
      transform: translateX(-100%);
    }
  }
</style>
</head>
<body>
 
<div class="scroll-text" data-scroll-text="This is a looping scroll text animation.">
  This is a looping scroll text animation.
</div>
 
</body>
</html>

在这个例子中，.scroll-text元素包含了需要滚动的文本。使用::before和::after伪元素创建了文本的两个副本，并且给这些副本应用了scroll-left动画。动画通过从左向右移动文本内容来实现循环滚动效果。通过调整animation-duration属性，可以控制滚动的速度；调整animation-delay可以控制动画开始的时间。

- 阅读更多 -
【CSS】多个图片在同一行显示
System
2024-08-11
所有,css3

要在CSS中使多个图片显示在同一行，可以使用CSS的float属性或者使用flexbox布局。以下是两种方法的示例代码：

使用float属性：




<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 100%; /* 确保父容器宽度足够 */
}
.container img {
  float: left; /* 让图片向左浮动 */
  margin-right: 10px; /* 图片之间的间隔 */
}
</style>
</head>
<body>
 
<div class="container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>
 
</body>
</html>

使用flexbox布局：




<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: flex; /* 使用flexbox布局 */
  justify-content: flex-start; /* 图片靠左排列 */
  gap: 10px; /* 图片之间的间隔 */
}
</style>
</head>
<body>
 
<div class="container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>
 
</body>
</html>

在这两种方法中，float属性是一种较早的布局方法，而flexbox是一种现代布局方法，提供更多的灵活性和更好的空间分配控制。根据需求和浏览器兼容性选择合适的方法。

- 阅读更多 -
IOS系统iphone6系列机型，CSS滚动穿透失效问题
System
2024-08-11
所有,css3

在iOS系统中，iPhone 6系列机型出现CSS滚动穿透失效问题，通常是由于WebKit的一个已知问题导致的。这个问题会影响使用position: fixed或position: absolute属性的元素在滚动时的表现。

问题解释：

在iOS设备上，当你试图在一个滚动容器内使用固定定位的元素时，该元素可能会停留在初始位置，而不是像期望的那样固定在屏幕上。

解决方法：

  1. 使用JavaScript监听滚动事件，并在每次滚动时更新固定定位元素的top或left属性，使其始终保持在屏幕上。
  2. 使用position: sticky属性替代position: fixed。position: sticky会在元素达到其定位位置时变为固定，但它在iOS上的支持不是完全的，并且在某些情况下可能会有不同程度的表现不一致。
  3. 使用第三方库或插件，如iscroll或iScroll-lite，来创建自定义的滚动行为。
  4. 避免在iPhone 6系列机型上使用position: fixed，或者通过用户代理（User Agent）检测来为这些机型提供一个不同的样式规则。

示例代码：




if (navigator.userAgent.match(/iPhone/i)) {
    // iPhone设备上使用JavaScript模拟fixed定位
    window.addEventListener('scroll', function() {
        var fixedElement = document.getElementById('fixed-element');
        fixedElement.style.top = window.scrollY + 'px';
    });
}

请注意，这些解决方案可能需要额外的工作来确保它们在不同的设备和浏览器上都能正常工作，并且可能会影响性能。在实施任何解决方案之前，应该进行充分的测试以确保它们不会引入新的问题。

- 阅读更多 -
css：使用filter和backdrop-filter实现高斯模糊效果
System
2024-08-11
所有,css3

在CSS中，filter属性可以应用于元素，以创建各种视觉效果，如模糊效果。但是，filter属性只能应用于元素本身，不能应用于其背景。因此，如果想要对背景应用高斯模糊效果，就需要使用backdrop-filter属性。

backdrop-filter属性可以让你为元素后面的区域添加图形效果（如模糊或饱和度调整）。它适用于元素背景的非标准图像或颜色。

下面是一个简单的例子，展示如何使用filter和backdrop-filter来实现高斯模糊效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blur Effect</title>
<style>
  .blur-box {
    width: 200px;
    height: 200px;
    background-image: url('your-image.jpg'); /* 替换为你的图片路径 */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    backdrop-filter: blur(5px); /* 背景模糊效果 */
  }
  .content {
    position: absolute;
    filter: opacity(0.7); /* 内容的透明度降低，避免过度遮盖 */
  }
</style>
</head>
<body>
<div class="blur-box">
  <div class="content">
    Blurred Background
  </div>
</div>
</body>
</html>

在这个例子中，.blur-box类定义了一个带有背景图片的容器，并使用backdrop-filter属性实现了背景的高斯模糊效果。同时，.content类中的文本被包裹在一个绝对定位的容器内，并使用filter属性的opacity函数降低了文本的透明度，以确保文本内容可读。

请注意，backdrop-filter属性可能不是所有浏览器都支持，因此在使用时请确保它在目标平台上有效。

- 阅读更多 -
基于HTML5和CSS3搭建一个Web网页
System
2024-08-11
所有,css3



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f7f7f7;
            font-family: Arial, sans-serif;
        }
        .container {
            width: 80%;
            max-width: 600px;
            text-align: center;
        }
        .input-container {
            margin: 20px 0;
            padding: 10px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        input[type="text"] {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            outline: none;
        }
        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #5cb85c;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            outline: none;
        }
        input[type="submit"]:hover {
            background-color: #449d44;
        }
    </style>
</head>
<body>
    <div class="container">
        <form>
            <div class="input-container">
                <input type="text" required placeholder="请输入您的名字">
            </div>
            <div class="input-container">
                <input type="email" required placeholder="请输入您的邮箱">
            </div>
            <div class="input-container">
                <input type="text" required placeholder="请输入您的手机号码">
            </div>
            <div class="input-container">
                <input type="submit" value="提交">
            </div>
        </form>
    </div>
</body>
</html>

这段代码使用了HTML5和CSS3来创建一个简单的表单页面。它包括了表单元素的使用，还有CSS样式的应用，使得页面更加美观和易于使用。代码中的样式主要是通过flexbox布局来实现表单的垂直居中和水平居中，并为表单元素设置了统一的样式。

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