1. 首页
  2. 分类
  3. css3
使用CSS伪元素制作动感超酷的hover动画
System
2024-08-09
所有,css3

以下是一个使用CSS伪元素制作动感Hover动画的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Effect</title>
<style>
  .box {
    width: 100px;
    height: 100px;
    background: #3498db;
    margin: 50px;
    position: relative;
    overflow: hidden;
  }
 
  .box:hover:before {
    filter: blur(5px);
    transform: scale(1.2);
  }
 
  .box:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    transition: transform 0.5s ease-in-out, filter 0.5s ease-in-out;
  }
</style>
</head>
<body>
 
<div class="box"></div>
 
</body>
</html>

这段代码定义了一个.box类，它在悬停时会通过:before伪元素生成一个模糊效果，并且通过缩放来增加动感。悬停时的效果通过CSS过渡(transition)实现平滑的动画效果。

- 阅读更多 -
js 小技巧 （ 根据不同的状态生成不同的颜色和状态 ）
System
2024-08-09
所有,css3

这个问题的解决方案取决于状态和颜色的具体规则。假设有一个简单的状态机制，我们可以使用一个对象来映射状态到颜色，然后通过一个函数来生成颜色。以下是一个示例代码：




// 状态颜色映射对象
const stateToColorMap = {
  'active': 'green',
  'inactive': 'red',
  'pending': 'yellow'
};
 
// 根据状态获取颜色的函数
function getColorByState(state) {
  return stateToColorMap[state] || 'black'; // 默认颜色
}
 
// 示例使用
const activeColor = getColorByState('active'); // 返回 'green'
const pendingColor = getColorByState('pending'); // 返回 'yellow'
const unknownStateColor = getColorByState('unknown'); // 返回 'black'

在这个例子中，stateToColorMap 定义了不同状态对应的颜色。getColorByState 函数接受一个状态作为参数，查询映射对象，并返回对应的颜色。如果状态未在映射中定义，则返回默认颜色black。

- 阅读更多 -
css踩坑记录——css控制强制打印背景
System
2024-08-09
所有,css3

在CSS中，可以使用@media print规则来控制打印时的样式，包括是否显示背景图片和颜色。




@media print {
  body, p, div, ul, li {
    color: #000 !important; /* 确保打印时文本是黑色 */
    background: none !important; /* 移除背景 */
    box-shadow: none !important; /* 移除阴影 */
  }
  
  a, a:visited {
    text-decoration: none !important; /* 移除下划线 */
    color: #000 !important; /* 确保链接是黑色 */
  }
  
  img {
    display: none !important; /* 移除图片 */
  }
}

这段代码将打印样式中的文本颜色设置为黑色，移除所有元素的背景，并且移除图片和超链接的装饰。在打印时，通常不需要背景图片和一些视觉装饰，以保证打印清晰和不影响阅读。

- 阅读更多 -
flex布局，换行的元素上下设置间距
System
2024-08-09
所有,css3

在Flex布局中，如果你想要在换行的元素之间设置间距，你可以使用gap属性（在支持的浏览器中，如Chrome、Edge等）。gap属性是row-gap和column-gap的简写形式，分别用于设置行间距和列间距。

以下是一个简单的例子，演示如何在Flex容器中设置行间距：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* 设置行间距和列间距为20像素 */
  }
  .flex-item {
    width: 100px;
    height: 100px;
    background-color: lightblue;
  }
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <!-- ...更多的flex-item元素... -->
</div>
 
</body>
</html>

在这个例子中，.flex-container 类定义了一个Flex容器，其中的子元素 .flex-item 会根据需要自动换行。gap 属性设置为 20px，这将在每个项目下方和右方添加20像素的间距，从而在换行时生效。

- 阅读更多 -
Element中table组件(el-table)右侧滚动条空白占位处理
System
2024-08-09
所有,css3

在Element UI的el-table组件中，如果你遇到了右侧滚动条空白占位的问题，可能是由于表格内容的宽度超出了容器的宽度，导致出现水平滚动条。在这种情况下，可以通过设置el-table的max-height属性和table-layout样式属性来处理右侧的空白占位问题。

以下是一个简单的处理方式：

  1. 设置el-table的max-height属性，限制表格的最大高度，确保垂直滚动条能正常显示。
  2. 设置el-table的样式table-layout: fixed;，这样可以防止列宽度的变化导致的布局变化。

示例代码：




<template>
  <el-table
    :data="tableData"
    style="width: 100%; table-layout: fixed;"
    max-height="400"
  >
    <!-- 列定义 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 数据列表
      ]
    };
  }
};
</script>
 
<style>
/* 可以在这里添加额外的样式 */
</style>

在这个例子中，el-table的最大高度被设置为400像素，并且table-layout属性被设置为fixed。这样，即使内容宽度超出容器宽度，水平滚动条也不会出现，而是显示垂直滚动条。

- 阅读更多 -
基于Vue3+Vite实现的移动端天气预报系统
System
2024-08-09
所有,css3



<template>
  <div class="weather-app">
    <weather-search @getWeather="getWeather" />
    <weather-detail v-if="weatherInfo" :weatherInfo="weatherInfo" />
  </div>
</template>
 
<script>
import { ref } from 'vue';
import WeatherSearch from './components/WeatherSearch.vue';
import WeatherDetail from './components/WeatherDetail.vue';
 
export default {
  name: 'App',
  components: {
    WeatherSearch,
    WeatherDetail
  },
  setup() {
    const weatherInfo = ref(null);
 
    const getWeather = (weatherData) => {
      weatherInfo.value = weatherData;
    };
 
    return {
      weatherInfo,
      getWeather
    };
  }
};
</script>
 
<style>
.weather-app {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}
</style>

这个简单的Vue应用展示了如何在Vue 3和Vite环境中创建一个用户可以查询天气并显示详细信息的应用。它包括一个搜索组件和一个显示天气详情的组件。应用的样式也非常简洁，适合移动端显示。

- 阅读更多 -
CSS3垂直水平的居中的几种方法
System
2024-08-09
所有,css3

CSS3提供了多种方法来实现垂直和水平居中。以下是一些常用的方法：

  1. 使用Flexbox布局:



.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
  1. 使用Grid布局:



.container {
  display: grid;
  place-items: center; /* 同时实现水平和垂直居中 */
}
  1. 使用绝对定位和transform:



.container {
  position: relative;
}
 
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
  1. 使用margin:auto方法:



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

这些方法可以实现不同程度的居中，选择哪种方法取决于具体的布局需求和浏览器兼容性要求。

- 阅读更多 -
CSS新手入门笔记整理：CSS3属性表
System
2024-08-09
所有,css3

CSS3是CSS（层叠样式表）的一个版本，引入了许多新特性，包括更加丰富的选择器、阴影、渐变、动画等。以下是一些CSS3的关键属性及其简单示例：

  1. 阴影（Box Shadow）:



div {
  box-shadow: 10px 10px 5px #888888;
}
  1. 圆角（Border Radius）:



div {
  border-radius: 10px;
}
  1. 渐变（Gradients）:



div {
  background: linear-gradient(to right, red , yellow);
}
  1. 变换（Transform）:



div:hover {
  transform: rotate(360deg);
}
  1. 动画（Animation）:



@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
div {
  animation-name: example;
  animation-duration: 4s;
}
  1. 圆形图片（Clip-path）:



div {
  clip-path: circle(50%);
}
  1. 过渡（Transition）:



div:hover {
  transition: width 1s;
}
  1. 用户界面（UI）:



input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

这些属性和示例代表了CSS3的一部分功能，实际应用中可以根据需要选择合适的属性和值。

- 阅读更多 -
[HTML]Web前端开发技术28（HTMLCSSJavaScript ）JavaScript基础——喵喵画网页
System
2024-08-09
所有,css3

以下是一个简单的示例，展示了如何使用JavaScript和CSS创建一个简单的喵喵画网页版本。




<!DOCTYPE html>
<html>
<head>
    <title>喵喵画网</title>
    <style>
        body {
            background-color: #f7f7f7;
            font-family: Arial, sans-serif;
        }
        .container {
            width: 600px;
            margin: 100px auto;
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .title {
            text-align: center;
            color: #333;
            padding: 20px;
        }
        .input-container {
            text-align: center;
            padding: 20px 0;
        }
        input[type="text"] {
            width: 80%;
            padding: 10px;
            margin: 0 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        input[type="button"] {
            padding: 10px 20px;
            background-color: #5883d3;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        input[type="button"]:hover {
            background-color: #3d66a7;
        }
        #poem {
            text-align: center;
            padding: 20px;
            color: #333;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="title">喵喵画网</div>
        <div class="input-container">
            <input type="text" id="text" placeholder="请输入内容" />
            <input type="button" value="生成喵喵" onclick="generateShuShu()" />
        </div>
        <div id="poem">输入文本后点击生成喵喵</div>
    </div>
    <script>
        function generateShuShu() {
            var text = document.getElementById('text').value;
            var shuShu = text.split('').join('🐖 ') + '🐖';
            document.getElementById('poem').innerHTML = shuShu;
        }
    </script>
</body>
</html>

这段代码实现了一个简单的喵喵画网功能，用户输入文本后点击按钮，文本会被转换成喵喵（一种表情符号），并显示在页面上。这个示例教学了如何使用JavaScript处理DOM元素，以及如何添加事件监听器来响应用户的交互。

- 阅读更多 -
CSS3实现无限旋转动画特效
System
2024-08-09
所有,css3



/* 定义一个无限旋转的动画 */
@keyframes infinite-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
/* 应用动画到具体的元素上，这里以 .icon 为例 */
.icon {
  animation: infinite-spin 2s linear infinite;
  /* 其他样式 */
}

这段代码定义了一个名为 infinite-spin 的关键帧动画，它让元素从0度旋转到360度。然后，它将这个动画应用到类名为 .icon 的元素上，动画持续时间为2秒，线性变化，并且是无限次数旋转。这是一个简单而有效的CSS3动画实现方式，适用于创建旋转加载器或者其他需要不断旋转的图标。

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