分类 css3 下的文章

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伪类会介入，确保即使是在移动端，点击后的样式也不会消失，从而解决了点击后样式无法撤销的问题。

System

2024-08-13

所有,css3

要为文件上传的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新增的语法

System

2024-08-13

所有,css3

在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新特性的一小部分，还有许多其他的特性等待我们去学习和使用。

- 阅读更多 -

css动画与渐变案例，使用动画和渐变做一个背景动态网页

System

2024-08-13

所有,css3

以下是一个使用CSS动画和渐变制作的背景动态网页的简单示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 动画与渐变案例</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
 
  .gradient-background {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
  }
 
  @keyframes gradientBG {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
</style>
</head>
<body>
<div class="gradient-background">
  <!-- 网页内容 -->
</div>
</body>
</html>

这段代码创建了一个带有动画渐变背景的简单网页。.gradient-background 类定义了一个渐变背景，并使用@keyframes规则创建了一个无限循环的动画，该动画使背景从左到右平滑移动。这个示例简单明了，展示了如何将渐变和动画结合起来创造一个生动的背景效果。

- 阅读更多 -

【HTML5】弹性盒子实现导航栏和留言框

System

2024-08-13

所有,css3

以下是一个使用HTML5和CSS3的弹性盒子布局实现的简单导航栏和留言框的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Layout Example</title>
<style>
  .nav {
    display: flex;
    justify-content: center;
    background-color: #f7f7f7;
    padding: 10px;
  }
 
  .nav a {
    text-decoration: none;
    padding: 5px 10px;
    margin: 0 5px;
    color: #333;
    border: 1px solid transparent;
    transition: all 0.3s ease;
  }
 
  .nav a:hover {
    border-color: #555;
    color: #555;
  }
 
  .message-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    margin-top: 20px;
    background-color: #e0e0e0;
  }
 
  .message-box textarea {
    width: 100%;
    min-height: 100px;
    padding: 10px;
    margin-top: 10px;
  }
 
  .message-box input[type="submit"] {
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #555;
    color: white;
    border: none;
    cursor: pointer;
  }
</style>
</head>
<body>
 
<div class="nav">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</div>
 
<div class="message-box">
  <form action="">
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="4" cols="50"></textarea>
    <input type="submit" value="Send">
  </form>
</div>
 
</body>
</html>

这段代码展示了如何使用弹性盒子布局创建一个水平居中的导航栏和一个留言框。导航栏使用display: flex来创建一个弹性容器，并通过justify-content: center实现内部元素的水平居中。留言框使用flex-direction: column来垂直排列其子元素。

- 阅读更多 -

CSS--浮动

System

2024-08-13

所有,css3

CSS 的浮动（Float）属性用于创建浮动框，可以让这些框向左或向右浮动，直到它们的外边缘碰到包含它们的容器的边缘或另一个浮动框为止。

解决浮动带来的问题，可以用以下几种方法：

使用 clear 属性

clear 属性用于清除浮动，它可以用来阻止元素向某一侧浮动。




.clear {
  clear: both;
}




<div style="float: left;">I am a floated element.</div>
<div class="clear">I am a clearing div.</div>

使用 overflow 属性

overflow 属性用于创建一个块级格式化上下文，当元素的 overflow 属性值不是 visible 时，该元素会生成一个块级上下文。




.overflow {
  overflow: auto; /* 或者 'hidden' */
}




<div class="overflow">
  <div style="float: left;">I am a floated element.</div>
</div>

使用 ::after 伪元素




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




<div class="clearfix">
  <div style="float: left;">I am a floated element.</div>
</div>

使用 flex 布局




.flex-container {
  display: flex;
}




<div class="flex-container">
  <div style="order: 2;">I am a floated element.</div>
</div>

使用 grid 布局




.grid-container {
  display: grid;
}




<div class="grid-container">
  <div>I am a floated element.</div>
</div>

以上都是解决CSS浮动问题的方法，具体使用哪种，取决于实际需求和场景。

- 阅读更多 -

使用HTML+CSS实现网页loading加载效果，支持定时或加载完成后隐藏

System

2024-08-13

所有,css3

以下是一个简单的HTML和CSS代码示例，用于创建一个自定义的页面加载效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Loading Spinner</title>
<style>
  .loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 1000;
  }
 
  .loader {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
  }
 
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>
</head>
<body>
 
<div class="loader-container">
  <div class="loader"></div>
</div>
 
<script>
  window.onload = function() {
    setTimeout(function() {
      document.querySelector('.loader-container').style.display = 'none';
    }, 3000); // 延迟3秒后隐藏加载动画
  };
</script>
 
</body>
</html>

这段代码创建了一个简单的圆形加载动画，并使用CSS动画使其旋转。当页面加载完成后，JavaScript 代码会在3秒后隐藏这个加载动画容器。这个示例可以根据需要进一步定制，比如通过CSS改变加载动画的样式或颜色，或者通过JavaScript来实现更复杂的加载状态管理。

- 阅读更多 -

CSS实现磨砂玻璃（毛玻璃）效果样式

System

2024-08-13

所有,css3

要使用CSS实现磨砂玻璃(毛玻璃)效果，可以使用backdrop-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>磨砂玻璃效果</title>
<style>
  .glass {
    width: 300px;
    height: 200px;
    background-image: url('your-image.jpg'); /* 替换为你的图片路径 */
    background-size: cover;
    background-position: center;
    border: 1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px); /* 调整模糊半径 */
  }
</style>
</head>
<body>
<div class="glass">
  <!-- 内容 -->
</div>
</body>
</html>

在这个例子中，.glass 类定义了一个模糊半径为5像素的磨砂玻璃效果。你可以将url('your-image.jpg')替换为你想要应用这种效果的图片。调整backdrop-filter属性中的blur()函数参数可以改变模糊的强度。

- 阅读更多 -

Web前端：木兰花令网页案例设计

System

2024-08-13

所有,css3

由于原始代码已经包含了一个完整的网页设计，我们可以提取其中的关键部分来展示如何实现木兰花令网页的特定功能。以下是一个简化的HTML代码实例，展示了如何使用HTML和CSS来创建一个类似于原始网页中banner部分的视觉效果：




<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>木兰花令</title>
    <style>
        .banner {
            background-image: url('flower.jpg'); /* 替换为实际图片路径 */
            background-size: cover;
            background-position: center;
            height: 400px;
            color: white;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .banner h1 {
            font-size: 50px;
            margin: 0;
        }
        .banner p {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="banner">
        <h1>木兰花令</h1>
        <p>2023年1月1日-2023年2月15日</p>
    </div>
</body>
</html>

这段代码展示了如何使用CSS背景属性来设置一个带有背景图片的banner，并且使用Flexbox布局来居中内部的标题和段落。这是一个简化的例子，用于教学目的，展示了如何将设计元素应用到网页中。实际的网页设计可能需要更多的HTML标签、CSS样式和JavaScript交互。

- 阅读更多 -

倒计时：精确到天时分秒的计时器html前端设计

System

2024-08-13

所有,css3

以下是一个简单的网页计时器示例，使用JavaScript实现，精确到天时分秒。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时计时器</title>
<script>
// 设定目标时间，这里设置为10天后
var targetTime = new Date().getTime() + 10 * 24 * 60 * 60 * 1000;
 
function countdown() {
    var now = new Date().getTime();
    var distance = targetTime - now;
 
    // 如果时间已过，显示已结束
    if (distance < 0) {
        clearInterval(intervalId);
        document.getElementById("countdown").innerHTML = "已结束";
        return;
    }
 
    // 计算时间
    var days = Math.floor(distance / (24 * 60 * 60 * 1000));
    var hours = Math.floor((distance % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
    var minutes = Math.floor((distance % (60 * 60 * 1000)) / (60 * 1000));
    var seconds = Math.floor((distance % (60 * 1000)) / 1000);
 
    // 输出结果到页面
    document.getElementById("countdown").innerHTML = days + "天 " + hours + "时 "
        + minutes + "分 " + seconds + "秒";
}
 
// 页面加载完成后开始倒计时
window.onload = function() {
    var intervalId = setInterval(countdown, 1000);
};
</script>
</head>
<body>
<div id="countdown"></div>
</body>
</html>

这段代码会在页面加载后开始显示倒计时，并且每秒更新一次显示的时间。当目标时间到达或者过去时，计时器会自动停止。

- 阅读更多 -