1. 首页
  2. 标签
  3. css
CSS3 弹性盒子 flex box
System
2024-08-23
所有,css3

CSS3弹性盒子（Flexible Box或Flexbox）是一种现代化的布局模型，使得复杂的布局变得更加简单，主要应对一维布局。

以下是一些使用CSS3弹性盒子的基本示例：

  1. 创建一个简单的弹性容器：



.container {
  display: flex; /* 或者 inline-flex */
}
  1. 在弹性容器中居中所有子元素：



.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
  1. 使用弹性盒子创建列和行：



.container {
  display: flex;
  flex-direction: column; /* 创建列 */
}
  1. 使用弹性盒子对子元素进行等分：



.container {
  display: flex;
}
 
.child {
  flex: 1; /* 等分空间 */
}
  1. 使用弹性盒子创建一个网格布局：



.container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
}
 
.child {
  flex: 0 0 50%; /* 每个子元素占据50%宽度 */
}
  1. 使用弹性盒子进行弹性流布局：



.container {
  display: flex;
}
 
.child {
  order: 2; /* 默认为0，值越小越靠前 */
}

弹性盒子是一种强大的工具，可以用来创建复杂的布局，而无需使用多个嵌套的div元素。这些例子只是弹性盒子所能提供的功能的一小部分，实际上，Flexbox提供了更多的属性和功能，如align-self、flex-grow、flex-shrink等，以支持更多复杂的布局需求。

- 阅读更多 -
实战分享！基于 Vue3 + CSS3 + js-tool-big-box 打造超炫的字符串中间加星号效果
System
2024-08-23
所有,css3



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 CSS3 String with Star Example</title>
    <style>
        .string-container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            font-family: Arial, sans-serif;
        }
        .string-box {
            display: flex;
            align-items: center;
            font-size: 20px;
            font-weight: bold;
            color: #333;
            padding: 0 5px;
            background: linear-gradient(to right, #30cfd0 0%, #330f70 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-decoration: none;
            transition: 0.5s ease-in-out;
        }
        .string-box:hover {
            background-size: 150% auto;
            color: #fff;
            transition-delay: 0.5s;
        }
    </style>
</head>
<body>
    <div id="app" class="string-container">
        <div class="string-box">
            <span>{{ stringWithStars }}</span>
        </div>
    </div>
 
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    originalString: 'HelloWorld',
                };
            },
            computed: {
                stringWithStars() {
                    return this.originalString.split('').join('* ');
                }
            }
        });
 
        app.mount('#app');
    </script>
</body>
</html>

这段代码使用Vue3创建了一个简单的应用，其中stringWithStars计算属性将原始字符串的每个字符之间插入星号，并在页面上以炫丽的视觉效果呈现。通过CSS3的background-clip属性和-webkit-text-fill-color属性实现了文字的渐变效果，并且在鼠标悬停时添加了视觉效果。这个例子展示了如何将创意的CSS3效果融入Vue3应用程序中，提升用户界面的视觉吸引力。

- 阅读更多 -
css3实现页面元素抖动效果
System
2024-08-23
所有,css3

CSS3可以通过animation和keyframes来实现页面元素的抖动效果。以下是一个简单的例子，展示了如何使用CSS3为一个元素添加抖动动画：




@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(5px); }
}
 
.shake-animation {
  animation: shake 0.5s; /* 抖动的持续时间 */
  animation-iteration-count: infinite; /* 动画重复次数 */
}

在HTML中，你可以给需要抖动的元素添加shake-animation类：




<div class="shake-animation">抖动的元素</div>

这段代码定义了一个shake的关键帧动画，它会让元素在水平方向上左右抖动。通过将这个动画应用到你想要抖动的元素上，就可以实现抖动效果。

- 阅读更多 -
CSS3 渐变
System
2024-08-23
所有,css3

CSS3 渐变是使用 linear-gradient() 或 radial-gradient() 函数创建的。

线性渐变（Linear Gradients）：




.linear-gradient {
  background: linear-gradient(direction, color-stop1, color-stop2, ...);
}

示例：




div {
  background: linear-gradient(to right, red, yellow);
}

径向渐变（Radial Gradients）：




.radial-gradient {
  background: radial-gradient(shape size at position, start-color, ..., last-color);
}

示例：




div {
  background: radial-gradient(circle, red, yellow, green);
}

方向可以用角度或方位词（如 to top, to right 等）来指定。径向渐变的形状可以是 circle 或 ellipse，大小可以设置为 closest-side, farthest-side, closest-corner, farthest-corner, 或者特定的宽度和高度。位置决定渐变的中心点，可以是百分比或具体像素值。

- 阅读更多 -
css补充
System
2024-08-23
所有,css3

在CSS中，可以使用多种方式来补充或者修改一个已有的样式规则。以下是一些常用的CSS补充方法：

  1. 使用不同的选择器来增强样式规则，提高其优先级。
  2. 使用!important规则来强制应用特定的样式。
  3. 通过增加CSS文件的加载顺序来覆盖之前的样式。

例如，假设我们有以下HTML结构和CSS样式：




<div class="box">Box</div>



.box {
  color: blue;
}

我们可以通过以下方法来补充或修改这个样式：

  1. 增加选择器的特异性：



body .box {
  color: red;
}
  1. 使用!important：



.box {
  color: blue !important;
}
 
body .box {
  color: red;
}
  1. 改变CSS加载顺序：



<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="overrides.css">

在overrides.css中：




.box {
  color: red;
}

这些方法可以根据具体情况选择使用，但需要注意!important的滥用可能会导致维护上的问题，应该谨慎使用。

- 阅读更多 -
three.js CSS3DObject在非全屏场景下浏览器缩放尺寸导致位置偏移问题（vue）
System
2024-08-23
所有,css3



// 假设你已经有了three.js的场景(scene)和渲染器(renderer)对象
// 创建一个CSS3DObject
var element = document.createElement( 'div' );
element.style.cssText = 'border: 1px solid red; padding: 10px;';
element.innerHTML = 'Some text';
var object = new THREE.CSS3DObject( element );
object.position.set( 0, 0, 0 );
scene.add( object );
 
// 监听浏览器缩放事件
function onResize() {
    // 更新渲染器大小以匹配窗口大小
    renderer.setSize( window.innerWidth, window.innerHeight );
    // 更新相机投影矩阵，确保3D内容适应新的屏幕尺寸
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
}
 
// 监听浏览器缩放事件
window.addEventListener( 'resize', onResize, false );

这段代码示例展示了如何在Vue项目中使用Three.js创建一个CSS3DObject，并在浏览器窗口尺寸变化时更新渲染器和相机的设置，以保持3D场景的正确显示。

- 阅读更多 -
CSS3 浮动、定位、动画
System
2024-08-23
所有,css3

CSS3 包含多个新特性，其中包括浮动（Floats）、定位（Positioning）和动画（Animations）。以下是这些特性的简单示例：

浮动（Floats）:




.float-left {
  float: left;
}
 
.float-right {
  float: right;
}

定位（Positioning）:




.relative-position {
  position: relative;
  top: 10px;
  left: 20px;
}
 
.absolute-position {
  position: absolute;
  bottom: 0;
  right: 0;
}
 
.fixed-position {
  position: fixed;
  top: 0;
  left: 0;
}
 
.sticky-position {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

动画（Animations）:




@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
@-webkit-keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
.animated-example {
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  /* Safari */
  -webkit-animation-name: example;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

这些代码示例展示了如何使用CSS3中的浮动、定位和动画。在实际应用中，你可能需要根据具体需求来调整这些属性的值。

- 阅读更多 -
uniapp去掉顶部导航栏后计算手机安全区距离，css背景模糊效果
System
2024-08-23
所有,css3

在uniapp中，如果你想去掉顶部导航栏并计算手机安全区的距离，可以通过以下方式实现：

  1. 去掉顶部导航栏：

    在pages.json中对应页面的navigationBarTextStyle设置为transparent，这样顶部导航栏就变得透明，看起来就像是“去掉”了。

  2. 计算手机安全区的距离：

    使用uniapp提供的uni.getSystemInfo或uni.getSystemInfoSyncAPI获取到系统信息，其中safeAreaInsets属性可以得到安全区域的边界。

  3. 使用CSS实现背景模糊效果：

    可以使用CSS的backdrop-filter属性和blur()函数来实现背景模糊效果，但需要注意的是，这个属性对iOS平台支持的不是很好，安卓平台表现更好。

示例代码：




// pages.json 中配置
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarTextStyle": "transparent"  // 设置导航栏文本样式为透明
      }
    }
  ]
}



// 页面的 script 中获取安全区域距离
export default {
  onLoad() {
    const systemInfo = uni.getSystemInfoSync();
    const safeAreaInsets = systemInfo.safeAreaInsets;  // 安全区域的边界
    // 根据 safeAreaInsets 的值设置页面样式，如顶部的边距等
  }
}



/* 页面的 style 中实现背景模糊 */
.page {
  background-image: url('path/to/your/image.jpg');
  background-size: cover;
  background-position: center;
  backdrop-filter: blur(10px);  /* 可根据需求调整模糊程度 */
}

请注意，由于不同设备的安全区域边距可能不同，你可能需要针对不同的设备进行适配。另外，背景模糊效果可能在不同的设备和浏览器中表现不一致，需要进行测试以确保兼容性。

- 阅读更多 -
【HTMLCSS3】新增特性总结！
System
2024-08-23
所有,css3

HTML5 的新特性：

  1. 语义化标签（header, nav, section, article, aside, footer）
  2. 表单控件（email, url, number, range, date, time）
  3. 画布（canvas）
  4. 视频和音频（video, audio）
  5. 本地存储（localStorage, sessionStorage）
  6. 新的API（Geolocation, Web Workers, Web Sockets）

CSS3 的新特性：

  1. 边框和背景

    • 圆角（border-radius）
    • 阴影（box-shadow）
    • 背景渐变（gradient）

  2. 文字效果

    • 文字阴影（text-shadow）
    • 字体直接提供（@font-face）
  3. 变换（transform）
  4. 动画（animation）
  5. 多列布局（column）
  6. 媒体查询（media queries）

示例代码：

HTML5 新特性（语义化标签和表单控件）：




<header>头部信息</header>
<nav>导航链接</nav>
<section>
  <article>
    <header>文章标题</header>
    <p>文章内容...</p>
    <footer>文章底部信息</footer>
  </article>
</section>
<aside>侧边内容</aside>
<footer>底部信息</footer>
 
<form>
  <input type="email" name="userEmail" placeholder="请输入邮箱">
  <input type="url" name="userUrl" placeholder="请输入URL">
  <input type="number" name="quantity" min="1" max="5">
  <input type="range" name="volume" min="0" max="100">
  <input type="date" name="userDate">
  <input type="time" name="userTime">
  <input type="submit">
</form>

CSS3 新特性（边框和背景渐变）：




div {
  border: 1px solid #000;
  border-radius: 10px; /* 圆角 */
  box-shadow: 5px 5px 5px #888; /* 阴影 */
  background: -webkit-gradient(linear, left top, right bottom, from(#ff0), to(#f00)); /* 渐变 */
  background: gradient(linear, left top, right bottom, from(#ff0), to(#f00));
}
 
p {
  color: #333;
  text-shadow: 2px 2px 2px #aaa; /* 文字阴影 */
}
 
@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* 现代浏览器 */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
 
div {
  transform: rotate(30deg); /* 旋转 */
}
 
@keyframes myAnimation {
  from {background: red;}
  to {background: yellow;}
}
 
div {
  animation: myAnimation 5s infinite; /* 动画 */
}
 
div {
  column-count: 3; /* 列数 */
  column-gap: 20px; /* 列间隙 */
}
 
/* 媒体查询：当屏幕宽度小于600px时，背景变为蓝色 */
@media screen and (max-width:
- 阅读更多 -
HTML5与CSS3实现动态网页
System
2024-08-23
所有,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>动态网页示例</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .nav {
            position: absolute;
            top: 20px;
            left: 20px;
        }
        .nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .nav ul li {
            display: inline-block;
            margin-right: 10px;
        }
        .nav ul li a {
            text-decoration: none;
            color: white;
            padding: 5px 10px;
            background-color: #007bff;
            border-radius: 5px;
        }
        .nav ul li a:hover {
            background-color: #0056b3;
        }
        @keyframes moveBackground {
            0%   { background-position: 0 0; }
            100% { background-position: 1000px 0; }
        }
        .background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('background.jpg') repeat-x;
            animation: moveBackground 10s linear infinite;
        }
    </style>
</head>
<body>
    <div class="background"></div>
    <div class="nav">
        <ul>
            <li><a href="#">主页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">联系方式</a></li>
        </ul>
    </div>
</body>
</html>

这段代码展示了如何使用HTML5和CSS3创建一个简单的动态背景和导航栏。代码中包含了CSS样式和@keyframes动画规则来实现背景的动态滚动效果。这个示例可以作为学习如何在网页中使用这些技术的起点。

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