System 发布的文章

2024-08-11

在网页中使用鼠标滚轮来放大缩小页面的特定区域，可以通过监听元素的wheel事件来实现。以下是一个使用JavaScript和CSS实现的示例：

HTML:




<div id="zoomable-area">
  <!-- 这里是你需要放大缩小的内容 -->
</div>

CSS:




#zoomable-area {
  width: 300px;
  height: 200px;
  background-color: #f0f0f0;
  overflow: hidden; /* 确保放大后的内容不超出div边界 */
  transition: transform 0.1s; /* 平滑的变换效果 */
  transform-origin: center center; /* 变换的基点设为中心 */
}

JavaScript:




const zoomableArea = document.getElementById('zoomable-area');
let scale = 1; // 初始缩放比例为1
 
zoomableArea.addEventListener('wheel', function(event) {
  event.preventDefault(); // 阻止默认的滚轮行为
  const delta = event.deltaY > 0 ? 1.1 : 0.9; // 根据滚轮方向调整缩放比例
  scale *= delta; // 更新缩放比例
  this.style.transform = `scale(${scale})`; // 应用缩放变换
}, { passive: false }); // passive: false 防止移动设备上的默认行为

这段代码会为ID为zoomable-area的元素添加一个事件监听器，当用户在该元素上使用鼠标滚轮时，会根据滚轮的滚动方向放大或缩小该区域。transform属性被用来应用缩放效果，而transition属性确保缩放有平滑的过渡效果。

- 阅读更多 -

CSS布局之使用Flex布局画骰子（5点）

System

2024-08-11

所有,css3




/* 基础HTML结构 */
<div class="dice">
  <div class="side"></div>
  <div class="side"></div>
  <div class="side"></div>
  <div class="side"></div>
  <div class="side"></div>
</div>
 
/* CSS样式 */
.dice {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background-color: #bbada0;
  border-radius: 10px;
  border: 3px solid #efdfd5;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
 
.side {
  width: 50%;
  height: 50%;
  background-color: #fcfdf5;
  border: 2px solid #efdfd5;
  border-radius: 10px;
  position: relative;
}
 
.side::before {
  content: '';
  position: absolute;
  width: 20%;
  height: 20%;
  background-color: #efdfd5;
  border-radius: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 
/* 随机应用于一个side类以模拟骰子的点 */
.side:nth-child(1) {
  background-color: #efdfd5;
}
 
.side:nth-child(2) {
  transform: rotate(60deg);
}
 
.side:nth-child(3) {
  transform: rotate(120deg);
}
 
.side:nth-child(4) {
  transform: rotate(180deg);
}
 
.side:nth-child(5) {
  transform: rotate(240deg);
}
 
.side:nth-child(6) {
  transform: rotate(300deg);
}

这段代码使用了Flexbox布局来创建一个简单的五点骰子模型。每个.side类代表骰子的一面，通过CSS的transform属性旋转不同的角度来模拟骰子的点分布。通过随机应用.side类，可以模拟骰子的随机点投射效果。

- 阅读更多 -

html+css+js 鼠标放在页面顶部则导航栏出现鼠标移出则隐藏

System

2024-08-11

所有,css3

这个功能可以通过HTML、CSS和JavaScript实现。以下是实现这个功能的示例代码：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Bar on Hover</title>
<style>
  body {
    margin: 0;
    padding: 0;
  }
  .nav {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
  }
  .nav.active {
    display: block;
  }
</style>
</head>
<body>
 
<div class="nav">
  <span>Navigation Link 1</span>
  <span>Navigation Link 2</span>
  <span>Navigation Link 3</span>
</div>
 
<script>
  const nav = document.querySelector('.nav');
 
  window.addEventListener('DOMContentLoaded', () => {
    document.addEventListener('mouseover', (e) => {
      if (e.target === e.currentTarget) {
        nav.classList.add('active');
      }
    });
 
    document.addEventListener('mouseout', (e) => {
      if (e.target === e.currentTarget) {
        nav.classList.remove('active');
      }
    });
  });
</script>
 
</body>
</html>

在这个示例中，当鼠标悬停在页面body上时，导航栏会显示，鼠标移出则导航栏隐藏。这是通过监听mouseover和mouseout事件实现的，并通过添加或移除一个CSS类来控制导航栏的显示与隐藏。

- 阅读更多 -

vue项目打开地址默认是http://0.0.0.0:8080/的问题解决

System

2024-08-11

所有,css3

在Vue项目中，默认的开发服务器地址通常是http://localhost:8080或者http://0.0.0.0:8080。如果你遇到了打开地址默认是http://0.0.0.0:8080的问题，可能是以下原因导致的：

项目配置问题：检查vue.config.js文件中的devServer配置，确保没有错误地设置host。
环境变量问题：检查是否有环境变量影响了服务器启动的配置。
本地hosts文件：确保没有错误的条目影响0.0.0.0解析。
网络配置问题：检查网络设置，确保没有阻止0.0.0.0地址的访问。

解决方法：

检查并修改vue.config.js中的devServer.host选项，如果设置为0.0.0.0，将其改为localhost或者你需要的具体IP地址。
```
// vue.config.js
module.exports = {
  devServer: {
    host: 'localhost',
    port: 8080
  }
};
```
如果是环境变量问题，检查环境变量，确保没有错误地设置了影响服务器启动的变量。
检查本地hosts文件（在Windows系统中位于C:\Windows\System32\drivers\etc\hosts，在Unix/Linux系统中位于/etc/hosts），确保没有错误的条目。
检查网络配置，确保没有任何设置阻止了对0.0.0.0地址的访问。

如果以上步骤不能解决问题，可能需要更详细的错误信息来进行具体的问题诊断。

- 阅读更多 -

解决flex布局最后一排数量不够自动向两端排列问题

System

2024-08-11

所有,css3

要解决Flex布局中最后一排子元素数量不足时自动向两端排列的问题，可以使用Flex布局的justify-content属性配合flex-wrap属性。具体做法是确保父容器的justify-content属性设置为space-between，这样子元素就会被均匀地分布在两端，同时还需要设置flex-wrap属性为wrap以支持换行。

以下是一个简单的HTML和CSS示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex 布局示例</title>
<style>
  .flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .flex-item {
    width: 100px;
    height: 100px;
    margin: 5px;
    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会根据容器的宽度自动换行，并且最后一排使用space-between原则进行布局，保证两端对齐。

- 阅读更多 -

【前端-初阶】CSS复合选择器

System

2024-08-11

所有,css3

CSS复合选择器是通过组合不同的基础选择器来创建更精确的选择器，以便选择DOM中更具体的元素。以下是一些常见的复合选择器及其用法：

交集选择器（Element1Element2）：用于选择同时满足两个条件的元素，即既是Element1又是Element2。




div.example { /* 选择class为example的div元素 */
  color: red;
}

并集选择器（Selector1, Selector2, ..., SelectorN）：用于选择任一条件满足的元素。




div, p { /* 选择div或p元素 */
  margin: 10px;
}

后代选择器（Selector1 Selector2）：用于选择嵌套关系中的元素，即Selector2是Selector1的后代。




div span { /* 选择div的所有span后代 */
  color: blue;
}

子选择器（Selector1 > Selector2）：用于选择直接子元素。




div > p { /* 选择div的直接子元素p */
  border: 1px solid black;
}

相邻兄弟选择器（Selector1 + Selector2）：用于选择紧随Selector1的Selector2元素。




p + div { /* 选择紧跟在p元素后的第一个div元素 */
  margin-top: 20px;
}

通用兄弟选择器（Selector1 ~ Selector2）：用于选择所有跟在Selector1后面的Selector2元素。




p ~ div { /* 选择所有跟在p元素后的div元素 */
  border-bottom: 1px dotted black;
}

这些复合选择器可以根据需要组合使用，以创建更加精准的样式规则。

- 阅读更多 -

css 如何实现一个带阴影的气泡对话框

System

2024-08-11

所有,css3

在CSS中，可以使用box-shadow属性为气泡对话框添加阴影。以下是实现一个带阴影的气泡对话框的示例代码：

HTML:




<div class="bubble">
  <p>这是一段文本，展示如何创建带阴影的气泡对话框。</p>
</div>

CSS:




.bubble {
  position: relative;
  background-color: #f2f2f2;
  border-radius: 10px;
  padding: 20px;
  width: 200px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
}
 
.bubble::after {
  content: "";
  position: absolute;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent transparent #f2f2f2;
  top: 50%;
  left: -10px; /* 调整这个值可以改变阴影与气泡的位置关系 */
  margin-top: -10px;
}

这段代码创建了一个带有圆角和阴影的气泡对话框，并且使用伪元素::after来创建一个三角形的箭头，指向气泡的方向。可以根据需要调整.bubble的宽度、内边距、边框半径和阴影大小。

- 阅读更多 -

HTML5+CSS3+JS小实例：倒计时动画特效

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>倒计时动画特效</title>
<style>
  .countdown {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3em;
    font-family: Arial, sans-serif;
    color: #333;
    margin: 20px;
  }
  .digit {
    line-height: 1;
    font-size: 2em;
    margin: 0 2px;
  }
</style>
</head>
<body>
<div id="countdown" class="countdown">
  00:00:10
</div>
<script>
function countdown() {
  var endTime = new Date().getTime() + 10 * 1000,
      elements = document.getElementById('countdown').querySelectorAll('.digit'),
      tick = function() {
        var currentTime = new Date().getTime(),
            remaining = endTime - currentTime,
            hours = Math.floor(remaining / (1000 * 60 * 60)),
            minutes = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60)),
            seconds = Math.floor((remaining % (1000 * 60)) / 1000),
            milliseconds = Math.floor((remaining % 1000) / 100);
 
        elements[0].textContent = hours < 10 ? '0' + hours : hours;
        elements[1].textContent = minutes < 10 ? '0' + minutes : minutes;
        elements[2].textContent = seconds < 10 ? '0' + seconds : seconds;
        elements[3].textContent = milliseconds < 10 ? '0' + milliseconds : milliseconds;
 
        if (remaining < 0) {
          clearInterval(interval);
          elements[0].textContent = '00';
          elements[1].textContent = '00';
          elements[2].textContent = '00';
          elements[3].textContent = '00';
        }
      };
 
  tick();
  var interval = setInterval(tick, 100);
}
 
countdown();
</script>
</body>
</html>

这段代码实现了一个简单的倒计时动画特效。它使用了HTML、CSS和JavaScript。在页面中，它创建了一个ID为countdown的div元素，并通过CSS给它设置了样式。JavaScript脚本定义了countdown函数，它使用了setInterval方法来每100毫秒更新一次计时器的显示。当计时结束时，计时器会被清零。这个实例提供了一个简单的倒计时动画示例，并且可以通过调整endTime的值来改变倒计时的时间。

- 阅读更多 -

html+js实现自定义弹窗

System

2024-08-11

所有,css3

以下是一个简单的HTML和JavaScript结合的代码示例，实现了一个自定义弹窗：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Modal</title>
<style>
  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
  }
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }
</style>
</head>
<body>
 
<button id="openBtn">Open Modal</button>
 
<div id="myModal" class="modal">
  <div class="modal-content">
    <span id="closeBtn">&times;</span>
    <p>Some text in the Modal..</p>
  </div>
</div>
 
<script>
  // Get the modal
  var modal = document.getElementById("myModal");
  // Get the button that opens the modal
  var btn = document.getElementById("openBtn");
  // Get the <span> element that closes the modal
  var span = document.getElementById("closeBtn");
  // When the user clicks on the button, open the modal
  btn.onclick = function() {
    modal.style.display = "block";
  }
  // When the user clicks on <span> (x), close the modal
  span.onclick = function() {
    modal.style.display = "none";
  }
  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
</script>
 
</body>
</html>

这段代码实现了一个基本的自定义弹窗，当用户点击“Open Modal”按钮时弹窗会显示，点击弹窗内的“x”按钮或者点击弹窗外的任何地方都可以关闭弹窗。

- 阅读更多 -

css特效：clip-path

System

2024-08-11

所有,css3

clip-path 是CSS3的一个属性，它允许你创建一个只有元素的某个区域可以显示的剪裁路径。这个属性可以用来创建各种有趣的图形和动画。

解决方案1：使用内置的剪裁函数




.element {
  clip-path: inset(100px 50px);
}

解决方案2：使用自定义的剪裁路径




.element {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%);
}

解决方案3：使用 SVG 中定义的剪裁路径




.element {
  clip-path: url(#svgClipPath);
}

解决方案4：使用圆形剪裁




.element {
  clip-path: circle(50% at 50% 50%);
}

解决方案5：使用椭圆形剪裁




.element {
  clip-path: ellipse(50% 25% at 50% 50%);
}

解决方案6：使用图片剪裁




.element {
  clip-path: image(url(img/nature.jpg), fill);
}

解决方案7：使用 CSS 中的 var() 函数来定义变量




.element {
  --clip-path: polygon(50% 0%, 100% 50%, 50% 100%);
  clip-path: var(--clip-path);
}

注意：clip-path 属性可能不会在所有的浏览器中都被支持，因此在使用时需要考虑浏览器的兼容性问题。

- 阅读更多 -