分类 css3 下的文章

2024-08-16

CSS filter属性用于应用模糊或颜色调整效果，类似于PS的滤镜功能。

以下是一些常用的filter属性值及其使用示例：

blur() - 应用高斯模糊效果。




img {
  filter: blur(5px);
}

brightness() - 调整亮度。




img {
  filter: brightness(50%);
}

contrast() - 调整对比度。




img {
  filter: contrast(200%);
}

grayscale() - 应用灰度效果。




img {
  filter: grayscale(100%);
}

hue-rotate() - 调整色调旋转度数。




img {
  filter: hue-rotate(90deg);
}

invert() - 反转输入图像颜色。




img {
  filter: invert(100%);
}

opacity() - 调整透明度。




img {
  filter: opacity(50%);
}

saturate() - 调整饱和度。




img {
  filter: saturate(300%);
}

sepia() - 将图像转换为深褐色。




img {
  filter: sepia(100%);
}

drop-shadow() - 应用阴影效果。




img {
  filter: drop-shadow(16px 16px 20px red);
}

多个filter效果可以组合使用，以空格分隔：




img {
  filter: contrast(175%) brightness(90%);
}

以上代码示例展示了如何在图片元素上应用各种滤镜效果。在实际应用中，可以根据需要选择合适的滤镜并调整参数值。

- 阅读更多 -

css阴影详解-Box-shadow修饰性属性

System

2024-08-16

所有,css3

CSS的box-shadow属性用于为元素添加阴影样式，它可以让你控制阴影的类型、大小、颜色、模糊距离以及阴影是否扩散等特性。

box-shadow属性的基本语法如下：




box-shadow: [水平偏移] [垂直偏移] [模糊半径] [扩散半径] [颜色];

水平偏移：定义阴影在水平方向上的偏移距离，允许负值。
垂直偏移：定义阴影在垂直方向上的偏移距离，允许负值。
模糊半径：定义阴影的模糊程度，0表示没有模糊效果，大于0的值会让阴影更加平滑。
扩散半径：定义阴影的扩散范围，大于0的值会导致阴影扩大，小于0的值会导致阴影缩小。
颜色：定义阴影的颜色。

例如，创建一个带有阴影的盒子：




div {
  width: 100px;
  height: 100px;
  background-color: #444;
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}

HTML代码：




<div></div>

这段代码会创建一个宽度和高度都是100px的div，背景色为#444，并且拥有向右下方偏移10px、模糊半径为5px、颜色为半透明黑色的阴影。

System

2024-08-16

所有,css3




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex 弹性布局案例</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
        }
        .header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 50px;
            background-color: #333;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .container {
            position: fixed;
            top: 50px;
            left: 0;
            width: 100%;
            height: 40px;
            background-color: #555;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .content {
            margin-top: 90px;
            height: 1500px;
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <div class="header">顶部固定栏</div>
    <div class="container">固定位置盒子</div>
    <div class="content">内容区域</div>
</body>
</html>

这段代码实现了一个简单的移动端网页布局，顶部和中间固定位置的盒子使用了 position: fixed 属性，并利用 Flex 布局居中显示内容。内容区域通过设置 margin-top 避免被固定位置的盒子遮挡。这个案例简单明了，适合初学者学习和理解 Flex 布局的应用。

- 阅读更多 -

html+css实现登录界面

System

2024-08-16

所有,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>Login Page</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background: #f7f7f7;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  .login-container {
    width: 300px;
    padding: 40px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }
  .login-container h2 {
    text-align: center;
    margin-bottom: 20px;
  }
  .form-group {
    margin-bottom: 15px;
  }
  .form-group label {
    display: block;
    margin-bottom: 5px;
  }
  .form-group input[type="text"],
  .form-group input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-top: 2px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* Makes sure the padding does not affect the total width of the input */
  }
  .form-group input[type="submit"] {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 4px;
    background: #5cb85c;
    color: white;
    cursor: pointer;
  }
  .form-group input[type="submit"]:hover {
    background: #4cae4c;
  }
</style>
</head>
<body>
<div class="login-container">
  <h2>Login</h2>
  <form action="">
    <div class="form-group">
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" required>
    </div>
    <div class="form-group">
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" required>
    </div>
    <div class="form-group">
      <input type="submit" value="Login">
    </div>
  </form>
</div>
</body>
</html>

这段代码创建了一个简单的登录表单，并使用CSS为其提供了基本的样式。表单包含用户名和密码字段，以及一个提交按钮。通过这个示例，开发者可以学习如何使用HTML和CSS创建Web页面的基本元素。

- 阅读更多 -

将html字符串转换成html标签显示到页面上（转）

System

2024-08-16

所有,css3

要将HTML字符串转换为HTML标签并显示到页面上，可以使用JavaScript的DOM操作。以下是一个简单的例子：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML String to HTML Elements</title>
</head>
<body>
 
<div id="content"></div>
 
<script>
// 假设这是你的HTML字符串
var htmlString = "<p>这是一个段落。</p><h1>这是一个标题。</h1>";
 
// 获取页面上的容器元素
var contentDiv = document.getElementById('content');
 
// 使用innerHTML属性将字符串转换为HTML元素
contentDiv.innerHTML = htmlString;
</script>
 
</body>
</html>

在这个例子中，我们定义了一个名为htmlString的变量，其中包含了一些HTML标签的字符串。然后我们通过document.getElementById获取了页面上的一个div元素，并将其id设置为content。最后，我们使用innerHTML属性将htmlString中的HTML标记应用到div元素中，这样就可以在页面上显示转换后的HTML内容。

- 阅读更多 -

CSS实现水平垂直居中的几种方法

System

2024-08-16

所有,css3

CSS实现元素的水平垂直居中有多种方法，以下是几种常用的实现方式：

使用flexbox布局:




.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.child {
  /* 子元素内容 */
}

使用grid布局:




.parent {
  display: grid;
  place-items: center;
}
 
.child {
  /* 子元素内容 */
}

使用绝对定位和transform:




.parent {
  position: relative;
}
 
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用margin:auto方法:




.parent {
  position: relative;
}
 
.child {
  width: 50%;
  height: 50%;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

这些方法可以实现元素的水平垂直居中，选择哪种方法取决于具体的布局需求和浏览器兼容性要求。

- 阅读更多 -

css3对文字标签不同宽，不同高使用瀑布流对齐显示

System

2024-08-16

所有,css3

要使用CSS3实现瀑布流布局，可以使用column-width、column-gap和column-rule等属性。以下是一个简单的例子，展示如何使用CSS3的多列布局特性来实现文本的瀑布流对齐。

HTML:




<div class="brick-wall">
  <div class="brick">
    <p>这是一段文本。</p>
  </div>
  <!-- 其他的.brick元素 -->
</div>

CSS:




.brick-wall {
  column-count: 5; /* 设置列数 */
  column-gap: 10px; /* 列与列之间的间隔 */
  column-rule: none; /* 列之间没有边框 */
}
 
.brick {
  break-inside: avoid; /* 避免内容分布在不同列 */
  padding: 10px; /* 文本内边距 */
}

这段代码会创建一个带有瀑布流效果的容器，.brick-wall 类定义了多列布局，column-count 设置了列的数量，column-gap 设置了列之间的间隔。.brick 类使用了 break-inside: avoid; 来避免内容跨列显示，增加内边距提供文本之间的一些间隔。

请注意，实际应用中可能需要为.brick添加更多样式，以适应不同宽度和高度的文本。而且，瀑布流布局的完整实现可能需要JavaScript来动态处理加载更多内容或响应式设计等场景。

- 阅读更多 -

css3实现炫彩字体

System

2024-08-16

所有,css3

在CSS3中，可以使用text-shadow属性来实现炫彩的文字效果。以下是一个简单的示例，展示如何给文字添加阴影以创建炫酷的字体效果：




.cool-font {
  font-size: 48px;
  color: #fff; /* 文字颜色为白色 */
  text-shadow:
    1px 1px 0 #ff0000, /* 红色阴影 */
    2px 2px 0 #00ff00, /* 绿色阴影 */
    3px 3px 0 #0000ff, /* 蓝色阴影 */
    4px 4px 0 #ff00ff, /* 紫色阴影 */
    5px 5px 0 #00ffff, /* 青色阴影 */
    6px 6px 0 #ffff00; /* 黄色阴影 */
}




<div class="cool-font">炫酷字体效果</div>

这段代码将创建一个带有六种不同颜色阴影的文字效果。通过增加text-shadow属性中阴影的数量和偏移量，可以创建出更加复杂和逼真的效果。

System

2024-08-16

所有,css3




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>3D立方体旋转动画</title>
    <style>
        .cube {
            width: 100px;
            height: 100px;
            margin: 50px auto;
            transform-style: preserve-3d;
            animation: rotate 5s infinite linear;
        }
 
        @keyframes rotate {
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
 
        .cube div {
            position: absolute;
            width: 100px;
            height: 100px;
            background: skyblue;
            opacity: 0.8;
        }
 
        /* 定义每个面的位置 */
        .cube .front  { background: #f00; transform: translateZ(50px); }
        .cube .back   { background: #0f0; transform: translateZ(-50px); }
        .cube .right  { background: #00f; transform: rotateY(90deg) translateZ(50px); }
        .cube .left   { background: #0ff; transform: rotateY(90deg) translateZ(50px); }
        .cube .top    { background: #ff0; transform: rotateX(90deg) translateZ(50px); }
        .cube .bottom { background: #f0f; transform: rotateX(90deg) translateZ(50px); }
    </style>
</head>
<body>
    <div class="cube">
        <div class="front"></div>
        <div class="back"></div>
        <div class="right"></div>
        <div class="left"></div>
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</body>
</html>

这段代码创建了一个简单的3D立方体，通过CSS3的@keyframes动画实现了它的旋转效果。.cube定义了基本的3D转换环境，@keyframes rotate定义了从0度旋转到360度的动画，cube div设置了立方体的每个面，并通过类名定义了它们的背景色和位置。动画通过无限循环(infinite)和线性曲线(linear)来保持旋转速度一致。

- 阅读更多 -

css3 盒子线性流动效果

System

2024-08-16

所有,css3

CSS3 提供了很多实现盒子线性流动效果的方法，其中一种是使用 animation 属性结合 @keyframes 规则来创建动画。以下是一个简单的例子，展示如何使用 CSS3 创建一个盒子沿一条直线流动的效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: absolute;
    animation: move 2s infinite alternate linear;
  }
 
  @keyframes move {
    from {
      left: 0;
    }
    to {
      left: 200px;
    }
  }
</style>
</head>
<body>
 
<div class="box"></div>
 
</body>
</html>

在这个例子中，.box 是要流动的盒子，它将沿着 X 轴从左侧移动到右侧的 200px 位置。animation 属性定义了动画的名称 move，持续时间 2s，使动画无限次数循环 infinite，并且指定动画的播放方式 alternate 使其在到达终点时反向播放，linear 保证动画速度是均匀的。

@keyframes move 规则定义了动画的关键帧，从左边的位置 left: 0; 移动到 left: 200px;。

- 阅读更多 -