1. 首页
  2. 分类
  3. 前端技术
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布局来实现表单的垂直居中和水平居中，并为表单元素设置了统一的样式。

- 阅读更多 -
css3实现无缝滚动，鼠标经过暂停
System
2024-08-11
所有,css3

CSS3可以通过animation和keyframes实现无缝滚动效果，并通过:hover伪类实现鼠标悬停时滚动停止。以下是一个简单的例子：

HTML结构：




<div class="slider">
  <div class="slide">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
  <!-- 更多slide -->
</div>

CSS样式：




.slider {
  display: flex;
  overflow: hidden;
  width: 300px; /* 根据实际内容调整 */
  height: 200px; /* 根据实际内容调整 */
  animation: slide 10s linear infinite; /* 动画名称，持续时间，速率函数，循环方式 */
}
 
.slide {
  flex: 1; /* 每个slide平分容器宽度 */
  line-height: 200px; /* 垂直居中内容 */
  text-align: center; /* 水平居中内容 */
  font-size: 3em; /* 根据实际内容调整 */
}
 
/* 更多slide样式，确保第一个和最后一个是重复的以实现无缝连接 */
 
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-300px); /* 每次滚动的距离，等于一个slide的宽度 */
  }
}
 
/* 鼠标悬停时暂停滚动 */
.slider:hover {
  animation-play-state: paused;
}

这段代码会创建一个无缝滚动的内容滚动容器，其中.slider是滚动容器，.slide是滚动的项。animation属性定义了无缝滚动的动画，keyframes定义了滚动的具体动作。当鼠标悬停在滚动容器上时，动画会被暂停。

- 阅读更多 -
h5手机端如何快速的兼容富文本内容
System
2024-08-11
所有,css3

在移动端快速兼容富文本内容，可以使用WebView来展示HTML内容。WebView是Android和iOS平台的一个组件，可以加载和显示网页内容。对于简单的富文本内容，WebView可以很好地处理不同的HTML标签和CSS样式。

以下是一个使用WebView在Android和iOS上展示富文本内容的基本示例：

Android 示例代码：




import android.os.Bundle;
import android.webkit.WebView;
import androidx.appcompat.app.AppCompatActivity;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        WebView webView = findViewById(R.id.webView);
        webView.getSettings().setJavaScriptEnabled(true); // 如果富文本内容包含JavaScript，需要启用JavaScript
 
        String data = "<html><head><style>body{margin:0;padding:0}</style></head>"
                + "<body><h1>Hello, World!</h1><p>This is a <strong>rich</strong> text <em>example</em>.</p></body></html>";
 
        webView.loadData(data, "text/html", "UTF-8");
    }
}

iOS 示例代码：




import UIKit
import WebKit
 
class ViewController: UIViewController, WKNavigationDelegate {
 
    var webView: WKWebView!
 
    override func viewDidLoad() {
        super.viewDidLoad()
 
        let config = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: config)
        webView.navigationDelegate = self
        view = webView
 
        let data = "<html><head><style>body{margin:0;padding:0}</style></head>" +
                   "<body><h1>Hello, World!</h1><p>This is a <strong>rich</strong> text <em>example</em>.</p></body></html>"
 
        webView.loadHTMLString(data, baseURL: nil)
    }
}

在这些示例中，我们创建了一个WebView组件，并使用loadData（Android）或loadHTMLString（iOS）方法来加载富文本内容。这种方法简单快捷，适用于简单的富文本展示。如果需要处理更复杂的情况，可能需要自定义WebView的处理逻辑或使用第三方库来提升兼容性和性能。

- 阅读更多 -
Vue3自定义PostCss插件
System
2024-08-11
所有,css



// 引入必要的库
const postcss = require('postcss');
const selectorParser = require('postcss-selector-parser');
 
// 创建一个PostCSS插件工厂函数
module.exports = postcss.plugin('postcss-prefix-selector', (options = {}) => {
  // 插件的实现逻辑
  return (root, result) => {
    const prefix = options.prefix || '';
    root.walkRules((rule) => {
      rule.selector = selectorParser((selectors) => {
        selectors.each((selector) => {
          // 在每个选择器前添加指定的前缀
          selector.prepend(selectorParser.attribute({ value: prefix }));
        });
      }).processSync(rule.selector);
    });
  };
});
 
// 使用插件的例子
// 在Vue3项目中的postcss配置文件中
module.exports = {
  plugins: {
    'postcss-prefix-selector': {
      prefix: '.my-prefix-' // 这里定义你想要添加的前缀
    }
  }
};

这个代码实例展示了如何创建一个简单的PostCSS插件，并在Vue3项目中使用它来给所有的CSS选择器添加一个指定的前缀。这个例子可以作为开发者学习如何创建自己的PostCSS插件的起点。

- 阅读更多 -
css让button居右
System
2024-08-11
所有,css

要在CSS中使按钮居右，可以使用flexbox或者float属性。以下是两种方法的示例代码：

使用flexbox居右：




.container {
  display: flex;
  justify-content: flex-end; /* 使子元素（按钮）靠右 */
}
 
.button {
  /* 按钮样式 */
}



<div class="container">
  <button class="button">按钮</button>
</div>

使用float居右：




.button {
  float: right; /* 使按钮靠右 */
}



<div class="container">
  <button class="button">按钮</button>
</div>

在这两种方法中，你可以选择最适合你布局需求的一种。如果你的布局允许使用flexbox，那么使用flexbox是更现代且灵活的解决方案。如果你需要兼容更老版本的浏览器，或者你的布局已经使用了float，那么使用float会是更好的选择。

- 阅读更多 -
【vue3】js + css 实现 视频框选放大：局部细节放大、放大镜效果
System
2024-08-11
所有,css

在Vue 3中，你可以使用JavaScript和CSS来实现视频框选放大的效果，具体可以通过监听鼠标事件来实现放大镜效果。以下是一个简单的示例：




<template>
  <div class="video-container">
    <video
      ref="video"
      class="video"
      src="your-video-url.mp4"
      @mousemove="handleMouseMove"
      @mouseleave="resetVideo"
    ></video>
    <div
      v-show="isMoving"
      class="magnifier"
      :style="{ top: magnifierTop + 'px', left: magnifierLeft + 'px }"
    ></div>
  </div>
</template>
 
<script setup>
import { ref, onMounted, watch } from 'vue';
 
const video = ref(null);
const isMoving = ref(false);
const magnifier = ref(null);
const magnifierSize = 100; // 放大镜的大小
const videoRect = ref(null);
 
// 鼠标移动事件处理函数
const handleMouseMove = (event) => {
  if (!video.value) return;
  videoRect.value = video.value.getBoundingClientRect();
  const x = event.clientX - videoRect.value.left;
  const y = event.clientY - videoRect.value.top;
 
  // 设置放大镜的位置
  magnifier.value.style.top = `${y - magnifierSize / 2}px`;
  magnifier.value.style.left = `${x - magnifierSize / 2}px`;
 
  isMoving.value = true;
};
 
// 鼠标离开事件处理函数
const resetVideo = () => {
  isMoving.value = false;
};
 
onMounted(() => {
  // 创建放大镜元素
  magnifier.value = document.createElement('div');
  magnifier.value.classList.add('magnifier');
  video.value.parentNode.appendChild(magnifier.value);
});
</script>
 
<style scoped>
.video-container {
  position: relative;
  display: inline-block;
}
.video {
  width: 300px; /* 视频宽度 */
  height: 200px; /* 视频高度 */
  background-color: #000;
}
.magnifier {
  position: absolute;
  width: 100px; /* 放大镜宽度 */
  height: 100px; /* 放大镜高度 */
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid #fff;
  cursor: none; /* 隐藏鼠标指针 */
  contain: strict; /* 确保放大镜内容不被浏览器自动缩放 */
}
</style>

在这个示例中，我们创建了一个视频播放器和一个放大镜元素。当鼠标在视频上移动时，通过监听mousemove事件来更新放大镜的位置，并显示放大镜。当鼠标离开视频区域时，通过监听mouseleave事件来隐藏放大镜。CSS 负责样式设置，包括视频容器、视频元素和放大镜的样式。

请根据你的具体需求调整视频的URL、视频尺寸和放大镜的大小。这个示例提供了一个基本的局部放大效果，你可以根据需要添加更多的视频处理逻辑，比如局部放大算法、边界检查等。

- 阅读更多 -
使用 Vue Router 的 meta 属性实现多种功能
System
2024-08-11
所有,vue.js



import Vue from 'vue'
import Router from 'vue-router'
 
Vue.use(Router)
 
const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/components/Home.vue'),
    meta: {
      auth: true, // 需要认证
      feature1: true, // 功能1
      feature2: false // 功能2
    }
  },
  // 更多的路由配置...
]
 
const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
 
// 路由守卫示例：检查用户是否认证
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.auth)) {
    // 检查用户是否认证，如果没有，跳转到登录页面
    if (!auth.isAuthenticated()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 不需要认证则直接放行
  }
})
 
export default router

这个示例代码展示了如何在 Vue Router 中使用 meta 字段来控制路由的访问权限。在路由定义时，我们可以设置不同的 meta 属性来控制是否需要认证，以及是否启用特定的功能。然后，我们可以通过路由守卫来实现基于这些 meta 属性的路由守卫逻辑。这样，我们可以根据不同的路由配置来控制访问权限和功能启用状态。

- 阅读更多 -
UI妹子说我用CSS实现毛玻璃效果的样子很帅
System
2024-08-11
所有,css

要实现毛玻璃效果，可以使用CSS中的box-shadow和border-radius属性。以下是一个简单的例子：




<!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: 200px;
    height: 200px;
    background-color: #fff;
    border-radius: 10px; /* 圆角 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* 阴影 */
    text-align: center;
    line-height: 200px;
    color: #000;
    font-size: 24px;
    font-weight: bold;
  }
</style>
</head>
<body>
 
<div class="glass">毛玻璃效果</div>
 
</body>
</html>

这段代码会创建一个带有毛玻璃效果的div元素，背景色可以根据实际需求调整。阴影的大小、模糊半径以及颜色都可以根据你的设计需求进行调整。

- 阅读更多 -
Vue 打包 chunk-vendors，CSS的文本样式属性值
System
2024-08-11
所有,css

关于Vue项目的chunk-vendors打包和CSS文本样式属性值的问题，这里没有提供具体的代码问题描述，但我可以提供一个简单的例子来说明如何在Vue项目中使用chunk-vendors以及如何在CSS中设置文本样式。

  1. 对于Vue项目中的chunk-vendors打包：

Vue CLI 3+ 使用webpack构建项目时，默认会将依赖库(vendors)打包到一个独立的chunk文件中，这样可以在页面间共享依赖库，减少页面加载时的重复下载。

如果你需要自定义这个行为，可以在vue.config.js中修改webpack配置：




module.exports = {
  chainWebpack: config => {
    config.optimization.splitChunks({
      chunks: 'all',
      cacheGroups: {
        vendors: {
          name: 'chunk-vendors',
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          chunks: 'initial'
        },
        // ... 其他配置
      }
    });
  }
};
  1. 对于CSS中的文本样式属性值：

在CSS中设置文本样式，你可以使用如下属性：




.text-style {
  color: #333;            /* 设置文本颜色 */
  font-size: 16px;        /* 设置文本字号 */
  font-weight: bold;      /* 设置文本加粗 */
  text-decoration: underline; /* 设置文本下划线 */
  text-align: center;     /* 设置文本居中 */
}

然后在Vue模板中使用这个样式类：




<template>
  <div class="text-style">这是一个样式化的文本。</div>
</template>
 
<style>
.text-style {
  color: #333;
  font-size: 16px;
  font-weight: bold;
  text-decoration: underline;
  text-align: center;
}
</style>

以上代码演示了如何在Vue模板中应用CSS样式以及如何在vue.config.js中配置webpack来改变chunk-vendors的打包行为。

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