分类 css3 下的文章

2024-08-13

以下是一个使用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>

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

- 阅读更多 -

推荐开源项目：WebGradients - 精致的CSS3渐变库

System

2024-08-13

所有,css3

WebGradients是一个提供多种CSS3渐变效果的开源库。使用这个库，开发者可以快速为其网站项目添加引人入胜的背景渐变效果。

以下是如何使用WebGradients的简单步骤：

下载WebGradients: 访问WebGradients的GitHub仓库，下载ZIP文件或者通过Git克隆到本地。
解压下载的文件，并将webgradients文件夹复制到你的项目中。
在你的HTML文件中，引入webgradients.css文件。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGradients Example</title>
    <link rel="stylesheet" href="path/to/webgradients/webgradients.css">
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .gradient-bg {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div class="gradient-bg" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/16149/webgradients-logo.png);"></div>
</body>
</html>

在上面的代码中，我们创建了一个div元素，并通过style属性应用了一个背景图像，该图像是WebGradients项目的logo。我们还定义了一个简单的CSS类.gradient-bg，它将渐变效果应用于页面的背景。

这只是一个简单的例子，你可以根据需要从WebGradients库中选择不同的渐变样式，并将它们应用到你的网页元素上。

- 阅读更多 -

js+css3简易实现2023新年快乐全屏满天星动画特效

System

2024-08-13

所有,css3

以下是一个使用JavaScript和CSS3实现的简易版新年快乐全屏满天星动画特效的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Year Celebration</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  .stars {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
  }
</style>
</head>
<body>
<canvas class="stars"></canvas>
 
<script>
  const canvas = document.querySelector('.stars');
  const ctx = canvas.getContext('2d');
 
  let stars = [];
 
  function init() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
 
    for (let i = 0; i < 200; i++) {
      stars.push(new Star());
    }
 
    animate();
  }
 
  function animate() {
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
 
    for (let i = 0; i < stars.length; i++) {
      stars[i].update();
      stars[i].draw(ctx);
    }
 
    requestAnimationFrame(animate);
  }
 
  function Star() {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;
    this.size = Math.random() * 2;
    this.speed = Math.random() * 0.05;
 
    this.update = function() {
      this.x -= this.speed;
      if (this.x < -5) this.x = canvas.width;
      this.y -= this.speed;
      if (this.y < -5) this.y = canvas.height;
    };
 
    this.draw = function(ctx) {
      ctx.fillStyle = 'white';
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
      ctx.fill();
    };
  }
 
  window.onload = init;
  window.onresize = init;
</script>
</body>
</html>

这段代码创建了一个全屏的画布，并在其中生成了随机的白色星星。星星随机生成、随机移动、随机大小。画布的尺寸会随着窗口大小的变化而变化，保持全屏。这个简易版本的动画特效可以作为新年快乐的视觉装饰，也可以作为创建更复杂动画的基础示例。

- 阅读更多 -

CSS3实现的4种3D文字效果

System

2024-08-13

所有,css3




/* 定义基本的文字效果 */
.text-effect {
  font-size: 7em; /* 字体大小 */
  text-align: center; /* 文字居中 */
  color: #333; /* 文字颜色 */
  margin: 20px; /* 外边距 */
  transform-style: preserve-3d; /* 使3D效果生效 */
  animation: rotate 5s infinite linear; /* 应用旋转动画 */
}
 
/* 定义旋转动画 */
@keyframes rotate {
  from {
    transform: rotateX(0) rotateY(0);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
 
/* 分别应用不同的3D文字旋转效果 */
.effect-1 {
  transform: perspective(200px) rotateX(30deg) rotateY(-30deg);
}
 
.effect-2 {
  transform: perspective(200px) rotateX(30deg) rotateY(30deg);
}
 
.effect-3 {
  transform: perspective(200px) rotateX(-30deg) rotateY(30deg);
}
 
.effect-4 {
  transform: perspective(200px) rotateX(-30deg) rotateY(-30deg);
}
 
/* HTML结构 */
<div class="text-effect effect-1">3D效果1</div>
<div class="text-effect effect-2">3D效果2</div>
<div class="text-effect effect-3">3D效果3</div>
<div class="text-effect effect-4">3D效果4</div>

这段代码展示了如何使用CSS3来创建四种不同的3D旋转文字效果。通过调整rotateX和rotateY的值，可以实现各种3D旋转的文字效果。

- 阅读更多 -