1. 首页
  2. 分类
  3. css3
八个解决你80%需求的CSS动画库
System
2024-08-11
所有,css3

CSS动画是提高网页视觉吸引力的强大工具。以下是八个CSS动画库，它们可以帮助你创建80%的常见需求。

  1. Animate.css

    Animate.css 是一个用CSS编写的动画库，非常受欢迎。它提供了一系列预定义的动画，可以通过简单的类添加到HTML元素上。




<link rel="stylesheet" href="animate.min.css">
<div class="animate__animated animate__bounce">我会跳动!</div>

  1. Magic.css

    Magic.css 是一个轻量级的CSS库，提供了一系列的动画效果。




<link rel="stylesheet" href="magic.min.css">
<div class="m-bounce">我会跳动!</div>

  1. Hover.css

    Hover.css 提供了一系列的CSS动画，可以应用在链接、按钮、图片等元素上。




<link rel="stylesheet" href="hover.min.css">
<button class="hover-pulse">按我!</button>

  1. Move.js

    Move.js 是一个轻量级的JavaScript库，用于创建平滑的CSS动画。




<link rel="stylesheet" href="move.min.css">
<script src="move.min.js"></script>
<div id="box"></div>
<script>
  new Move(document.getElementById('box'))
    .rotate(45)
    .execute();
</script>

  1. WOW.js

    WOW.js 是一个轻量级的JavaScript库，用于创建滚动时的动画效果。




<link rel="stylesheet" href="animate.min.css">
<script src="wow.min.js"></script>
<script>
  new WOW().init();
</script>
<div class="wow slideInLeft">我会滚动进入!</div>

  1. Aos.js

    Aos.js 是一个轻量级的JavaScript库，用于创建滚动动画。




<link rel="stylesheet" href="aos.css">
<script src="aos.js"></script>
<script>
  AOS.init();
</script>
<div class="aos-animate">我会有动画!</div>

  1. Velocity.js

    Velocity.js 是一个功能强大的JavaScript动画库，类似于jQuery的$.animate()方法。




<script src="velocity.min.js"></script>
<div id="box"></div>
<script>
  $("#box").velocity({ width: 100 }, 1000);
</script>

  1. Typed.js

    Typed.js 是一个简单的JavaScript库，用于创建打字机效果。




<script src="typed.min.js"></script>
<script>
  var typed = new Typed('#typed', {
    strings: ['这是打字机效果!'],
    typeSpeed: 100
  });
</script>
<span id="typed"></span>

这些库提供了各种各样的动画效果，可以满足大部分的网页设计需求。你可以根据自己的需求选择合适的库，并且可以在它们的官方文档中找到更多的使用方法和定制动画。

- 阅读更多 -
陈表达学html-弹出显示下拉菜单-窗口案例
System
2024-08-11
所有,css3

在HTML中，可以使用<select>元素创建一个下拉菜单，并使用JavaScript结合window.alert()来实现弹出显示下拉菜单选中的值的简单示例如下：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单弹出选择值示例</title>
<script>
function showSelected() {
    var selectElement = document.getElementById("mySelect");
    var selectedValue = selectElement.options[selectElement.selectedIndex].text;
    window.alert("您选择了: " + selectedValue);
}
</script>
</head>
<body>
 
<select id="mySelect">
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
    <option value="option3">选项3</option>
</select>
 
<button onclick="showSelected()">弹出选择</button>
 
</body>
</html>

在这个例子中，我们定义了一个带有ID的<select>元素，并为其添加了三个<option>元素。然后，我们创建了一个按钮，当被点击时，会调用showSelected函数。这个函数会获取下拉菜单当前选中的值，并使用window.alert()将其弹出显示。

- 阅读更多 -
在html中使li左右排列
System
2024-08-11
所有,css3

在HTML中，要使li元素左右排列，可以使用CSS的float属性或者使用Flexbox布局。以下是两种方法的示例代码：

使用float属性：




<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none; /* 移除列表的标记 */
  margin: 0;
  padding: 0;
}
li {
  float: left; /* 左右浮动 */
  margin-right: 10px; /* 添加右边距离 */
}
</style>
</head>
<body>
 
<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ul>
 
</body>
</html>

使用Flexbox布局：




<!DOCTYPE html>
<html>
<head>
<style>
ul {
  display: flex; /* 使用Flexbox布局 */
  list-style-type: none; /* 移除列表的标记 */
  padding: 0;
}
li {
  margin-right: 10px; /* 添加右边距离 */
}
</style>
</head>
<body>
 
<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ul>
 
</body>
</html>

在这两种方法中，你可以根据需要调整margin-right的值来控制li元素之间的间距。如果你想要在最后一个li元素后面没有额外的间距，可以在最后一个li元素上使用margin-right: 0;。

- 阅读更多 -
uni问题：如何在ucharts提示窗中自定义内容
System
2024-08-11
所有,css3

在UCharts中，要在提示窗（tooltip）中自定义内容，您可以通过设置图表的tooltip选项，并使用formatter函数来自定义提示窗中显示的内容。以下是一个简单的例子，展示了如何在UCharts图表中自定义提示窗内容：




// 假设已经初始化了ucharts实例为chart
 
// 自定义提示窗内容格式化函数
function tooltipFormatter(params) {
    // params 是包含数据信息的对象或数组
    // 您可以根据需要提取相关信息并构造自定义的字符串
    var result = params.name + ': ' + params.value;
    if (params.seriesData) {
        result += ' (' + params.seriesData.seriesName + ')';
    }
    return result;
}
 
// 设置图表的tooltip选项
chart.setOption({
    tooltip: {
        trigger: 'axis', // 触发类型，'axis'表示坐标轴触发
        formatter: tooltipFormatter // 使用自定义格式化函数
    },
    // ... 其他图表配置项
});

在这个例子中，tooltipFormatter函数负责构造提示窗显示的文本。您可以根据params对象中的信息（例如params.name、params.value、params.seriesData等）来动态生成您想要在提示窗中显示的内容。

请确保在设置图表的tooltip选项之前，UCharts图表实例chart已经被正确初始化。

- 阅读更多 -
【前端初学者】【CSS笔记】之定位：相对定位、绝对定位、固定定位、静态定位及粘性定位
System
2024-08-11
所有,css3

在CSS中，定位属性主要有以下几种：

  1. 静态定位（Static Positioning）
  2. 相对定位（Relative Positioning）
  3. 绝对定位（Absolute Positioning）
  4. 固定定位（Fixed Positioning）
  5. 粘性定位（Sticky Positioning）

  6. 静态定位：

    这是所有元素的默认定位方式，不使用position属性时，元素的定位模式就是静态定位。

  7. 相对定位：

    相对定位是一个非常常用的定位方式，它对元素进行相对于其正常位置的定位。设置了相对定位的元素仍然占据它在文档流中的原始空间。




div {
  position: relative;
  top: 20px;
  left: 40px;
}

  1. 绝对定位：

    绝对定位是一种更加高级的定位方式，元素会被移除出正常文档流，并且相对于最近的非静态定位的父元素进行定位。如果没有这样的父元素，则相对于初始包含块进行定位。




div {
  position: absolute;
  top: 20px;
  right: 30px;
}

  1. 固定定位：

    固定定位类似于绝对定位，但是它是相对于浏览器窗口进行定位的，而不是正常的父元素。




div {
  position: fixed;
  bottom: 10px;
  left: 5px;
}

  1. 粘性定位：

    粘性定位是相对定位和固定定位的混合体，它是相对定位在当页面滚动到一定程度时才转换为固定定位。




div {
  position: sticky;
  top: 10px;
}

以上代码示例展示了如何在CSS中使用这些定位属性。在实际开发中，可以根据页面布局的需要，灵活运用这些定位方式。

- 阅读更多 -
浅浅地用 CSS 来实现个像素化悬停马赛克吧
System
2024-08-11
所有,css3

马赛克效果可以通过CSS的filter属性来实现。以下是一个简单的例子，展示了如何使用CSS为一个元素添加马赛克效果，并在鼠标悬停时显示出来：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pixelize Hover Effect</title>
<style>
  .pixel-hover {
    width: 200px;
    height: 200px;
    background: url('image.jpg') no-repeat center center;
    background-size: cover;
    transition: filter 0.5s ease;
    filter: grayscale(100%);
    pixelate(20px);
  }
 
  .pixel-hover:hover {
    filter: grayscale(0%) pixelate(20px);
  }
</style>
</head>
<body>
 
<div class="pixel-hover"></div>
 
</body>
</html>

在这个例子中，.pixel-hover 类定义了一个带有背景图片的div，并且在鼠标悬停时通过修改filter属性从而实现马赛克效果。pixelate函数接受一个参数，表示马赛克的大小。

请注意，pixelate函数是假设的，CSS标准中并没有直接定义这个函数。实际上，CSS Filter Effects Module Level 2 规范中并没有直接提供像素化的功能。如果要实现像素化的效果，可以使用filter: blur()来模拟，但它不会创建完全像素块状的效果。如果需要更接近像素化效果的东西，可能需要使用JavaScript来动态调整图片的像素数据。

- 阅读更多 -
css实现文字闪烁效果
System
2024-08-11
所有,css3

要使用CSS实现文字的闪烁效果，可以使用@keyframes规则创建一个动画，然后将该动画应用到文本上。以下是一个简单的例子：




@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
 
.blinking-text {
  animation: blink 1s infinite;
}

接下来，将blinking-text类应用到你想要闪烁的文本的HTML元素上：




<p class="blinking-text">闪烁的文字效果</p>

这段代码会使得文本每隔1秒钟就闪烁一次。你可以通过调整@keyframes规则中的百分比和animation属性中的时长来控制闪烁的速度和频率。

- 阅读更多 -
仅用a标签实现点击导航栏跳转到页面对应位置
System
2024-08-11
所有,css3

要使用a标签实现点击导航栏后页面滚动到对应位置，你可以通过给a标签设置href属性，指向目标位置的id。同时，确保目标位置有一个相应id的元素。以下是一个简单的实现示例：

HTML:




<nav>
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#about">关于我们</a></li>
    <li><a href="#services">服务</a></li>
    <li><a href="#contact">联系我们</a></li>
  </ul>
</nav>
 
<div id="home">首页内容</div>
<div id="about">关于我们内容</div>
<div id="services">服务内容</div>
<div id="contact">联系我们内容</div>

CSS（用于美化，可选）:




div {
  height: 500px;
  border: 1px solid #000;
  margin-top: 10px;
}

这段代码中，点击导航栏的链接会将页面滚动到对应的div元素。通过锚点定位，用户点击链接后会直接跳转到页面的相应位置。

- 阅读更多 -
【css样式问题】position:absolute绝对定位中设置top的值为百分比不生效
System
2024-08-11
所有,css3

在CSS中，当你使用position: absolute进行绝对定位时，设置top属性为百分比值，是相对于其最近的已定位（即position属性不是static）祖先元素的宽度。如果没有这样的祖先元素，则相对于初始包含块（initial containing block）。

如果你发现设置top的百分比值不生效，可能的原因是：

  1. 没有找到已定位的祖先元素，导致参照错误。
  2. 已定位的祖先元素的宽度不是你预期的值，比如是0或者auto。

解决方法：

  1. 确保有一个已定位（即position属性为relative、absolute、fixed或sticky）的祖先元素。
  2. 如果已定位的祖先元素宽度不符合预期，需要为其设置一个明确的宽度。

示例代码：




/* 已定位的祖先元素 */
.parent {
  position: relative; /* 或 absolute, fixed, sticky */
  width: 100%; /* 确保宽度为100% */
}
 
/* 绝对定位的子元素 */
.child {
  position: absolute;
  top: 10%; /* 现在相对于宽度为100%的父元素设置顶部距离 */
}

HTML结构：




<div class="parent">
  <div class="child">我是绝对定位的元素</div>
</div>

确保父元素.parent具有position: relative;或者其他position值，并且有一个明确的宽度（如果需要）。这样top: 10%;才会根据.parent的宽度来计算。

- 阅读更多 -
CSS3弧形曲线循环菜单导航
System
2024-08-11
所有,css3



/* 设置圆弧的基本样式 */
.arc-menu {
  position: relative;
  width: 200px;
  height: 200px;
  transform: rotate(-90deg) translateY(-100px);
}
 
/* 设置圆弧上的每个项目的基本样式 */
.arc-menu li {
  position: absolute;
  top: 100px;
  transform-origin: 50% -100px;
  list-style: none;
}
 
/* 设置第一个项目的起始角度和旋转角度 */
.arc-menu li:first-child {
  transform: rotate(0deg) translateX(-100px);
}
 
/* 设置后续项目的起始角度和旋转角度 */
.arc-menu li:nth-child(n+2) {
  transform: rotate(72deg) translateX(-100px);
}
 
/* 这里省略了具体的动画实现细节 */

这个示例展示了如何使用CSS3的transform属性来创建一个弧形曲线布局的菜单导航。通过调整每个项目的transform属性，包括旋转角度和位置，我们可以创建出一个圆弧形状的菜单。这个例子省略了具体的动画实现细节，主要是为了展示如何布局这样的一个圆弧形菜单。

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