分类前端技术下的文章

2024-08-18

以下是一个简单的手电筒效果实现，使用了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>Torch Effect</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    overflow: hidden;
  }
  .torch {
    width: 100px;
    height: 200px;
    background: #ffc107;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 20px #ffc107;
    animation: torch-animation 2s linear infinite;
  }
  @keyframes torch-animation {
    0% {
      box-shadow: 0 0 20px #ffc107;
    }
    50% {
      box-shadow: 0 0 20px #ffc107, 0 0 50px #ffc107;
    }
    100% {
      box-shadow: 0 0 20px #ffc107, 0 0 50px #ffc107, 0 0 100px #ffc107;
    }
  }
</style>
</head>
<body>
<div class="torch"></div>
<script>
  // JavaScript 部分可以为空，因为效果是纯CSS实现的
</script>
</body>
</html>

这段代码创建了一个简单的手电筒效果，使用CSS动画来实现手电筒的移动和光芒的扩散。这个例子展示了如何使用CSS创建视觉上的动态效果，而不需要依赖复杂的JavaScript代码。

- 阅读更多 -

css 边框属性、盒子阴影和文字阴影相关设置和内外边距

System

2024-08-18

所有,css3

CSS中设置边框属性，盒子阴影和文字阴影以及内外边距的基本语法如下：




/* 设置边框 */
.element {
  border: border-width border-style border-color;
}
 
/* 设置盒子阴影 */
.box-shadow {
  box-shadow: offsetX offsetY blurRadius spreadRadius color inset;
}
 
/* 设置文字阴影 */
.text-shadow {
  text-shadow: offsetX offsetY blurRadius color;
}
 
/* 设置内边距 */
.padding {
  padding: top right bottom left;
}
 
/* 设置外边距 */
.margin {
  margin: top right bottom left;
}

具体实例代码：




/* 边框 */
.border-example {
  border: 1px solid #000;
}
 
/* 盒子阴影 */
.box-shadow-example {
  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
}
 
/* 文字阴影 */
.text-shadow-example {
  text-shadow: 2px 2px 4px #000;
}
 
/* 内边距 */
.padding-example {
  padding: 20px 15px 10px 25px;
}
 
/* 外边距 */
.margin-example {
  margin: 10px 20px 30px 40px;
}

在HTML中使用这些类名：




<div class="border-example">带边框的元素</div>
<div class="box-shadow-example">带盒子阴影的元素</div>
<div class="text-shadow-example">带文字阴影的元素</div>
<div class="padding-example">带内边距的元素</div>
<div class="margin-example">带外边距的元素</div>

以上代码演示了如何在CSS中设置元素的边框、盒子阴影和文字阴影以及内外边距。

- 阅读更多 -

js实现百度地图的自定义marker与css3动画的交互

System

2024-08-18

所有,css3




// 首先，确保你已经在页面中引入了BMap API和CSS样式
 
// 初始化地图和marker
function initMap() {
    var map = new BMap.Map("mapContainer"); // 创建Map实例
    var point = new BMap.Point(116.404, 39.915); // 创建点坐标
    map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
 
    // 创建自定义marker
    var marker = new BMap.Marker(point);
    map.addOverlay(marker); // 将标注添加到地图中
 
    // 绑定鼠标事件
    marker.addEventListener("mouseover", function() {
        this.setTop(true); // 将标注置顶
        openInfo(this); // 打开信息窗口
    });
 
    marker.addEventListener("mouseout", function() {
        this.setTop(false); // 取消置顶
        closeInfo(this); // 关闭信息窗口
    });
}
 
// 打开信息窗口
function openInfo(marker) {
    var opts = {
        width: 250, // 信息窗口宽度
        height: 100, // 信息窗口高度
        title: "自定义标题" // 信息窗口标题
    };
 
    // 创建信息窗口
    var infoWindow = new BMap.InfoWindow("这里是自定义内容", opts);
    marker.openInfoWindow(infoWindow); // 打开信息窗口
}
 
// 关闭信息窗口
function closeInfo(marker) {
    marker.closeInfoWindow(); // 关闭信息窗口
}
 
// 页面加载完成后初始化地图
window.onload = initMap;

这段代码展示了如何在百度地图上创建一个自定义的marker，并且通过CSS3动画与marker进行交互。当鼠标悬停在marker上时，会打开一个信息窗口，当鼠标离开时，会关闭信息窗口。这个例子简单明了地展示了如何使用百度地图API进行开发。

- 阅读更多 -

css实现艺术字

System

2024-08-18

所有,css3

要使用CSS实现艺术字，可以使用text-shadow属性来创建阴影效果，或者使用CSS的伪元素来创建特殊的形状或图案。以下是一个简单的例子，使用伪元素和text-shadow来创建艺术字效果：

HTML:




<div class="artistic-text">你的文字</div>

CSS:




.artistic-text {
  font-size: 60px;
  color: #fff;
  text-align: center;
  position: relative;
}
 
.artistic-text::before {
  content: attr(data-content);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  color: #333;
  text-shadow:
    1px 1px #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000;
}
 
.artistic-text {
  data-content: attr(data-content);
}

在这个例子中，.artistic-text是包含原始文字的容器，使用::before伪元素来创建阴影效果。data-content属性用于存储原始文字内容，以便在伪元素中显示。text-shadow属性用于创建错位的阴影，从而创造出艺术效果。

你可以根据需要调整font-size、color和text-shadow的值来自定义艺术字的样式和效果。

- 阅读更多 -

javascript顺序点击文字验证

System

2024-08-18

所有,css3




// 假设有一个元素，我们将在其上附加点击事件监听器
var element = document.getElementById('myElement');
 
// 定义点击事件处理函数
function handleClick() {
    console.log('元素被点击了！');
}
 
// 定义函数来设置事件监听器，并在正确的顺序中点击元素
function sequentialClick(element, steps) {
    var currentStep = 0;
 
    // 定义一个内部的点击事件监听器
    function clickListener() {
        if (currentStep < steps) {
            handleClick(); // 执行点击操作
            currentStep++; // 步骤计数增加
        } else {
            element.removeEventListener('click', clickListener); // 移除监听器
        }
    }
 
    // 开始监听点击事件
    element.addEventListener('click', clickListener);
 
    // 模拟第一次点击开始序列
    element.click();
}
 
// 使用函数点击五次元素
sequentialClick(element, 5);

这段代码首先定义了一个元素和点击事件处理函数。sequentialClick函数负责设置事件监听器，并在每次点击后递增步骤计数。当步骤计数达到预设的次数后，事件监听器会被移除，停止继续点击。这样，我们可以通过调用sequentialClick函数，并传入元素和需要点击的次数，来模拟顺序点击操作。

- 阅读更多 -

uni-app中的DOM操作

System

2024-08-18

所有,css3

在uni-app中，由于其是基于Vue.js开发的，因此其DOM操作应遵循Vue.js的规范。uni-app并不直接使用DOM操作，因为它更多地关注跨平台的兼容性。如果你需要进行DOM操作，通常是为了操作原生组件或者是小程序中的特定元素。

在uni-app中，你可以使用Vue的ref属性来访问组件实例或DOM元素。以下是一个简单的例子：




<template>
  <view>
    <text ref="myText">Hello, World!</text>
    <button @click="clickHandler">Click Me</button>
  </view>
</template>
 
<script>
export default {
  methods: {
    clickHandler() {
      // 使用 this.$refs 访问元素
      let textElement = this.$refs.myText;
      // 在这里你可以进行DOM操作，但请注意，这通常不是uni-app推荐的做法
      // 例如，你可以通过Vue的响应式数据来改变文本内容，而不是直接操作DOM
    }
  }
}
</script>

在上面的例子中，我们通过ref="myText"给<text>元素设置了一个引用名称。然后在clickHandler方法中，我们通过this.$refs.myText来访问这个元素。

请记住，尽管在某些平台上你可以进行DOM操作，但这并不是uni-app推荐的做法。uni-app更倾向于数据驱动的方式来更新UI，而不是直接操作DOM。这样做可以确保你的应用具有更好的性能和跨平台兼容性。

- 阅读更多 -

CSS :has伪类

System

2024-08-18

所有,css3

CSS的:has伪类是一个正在制定中的特性，但在这个答案被提交时，它还没有被大多数浏览器支持。它的目的是为了选择包含特定子元素的元素。

例如，如果你想要选择所有包含.child类的元素，你可以这样写：




/* 正在规划中，但未被支持的CSS代码 */
.parent:has(.child) {
  /* 样式规则 */
}

然而，在现在，你不能使用:has伪类。相反，你需要使用JavaScript来实现同样的功能。例如：




document.querySelectorAll('.parent').forEach(function(parent) {
  if (parent.querySelector('.child')) {
    // 如果.parent元素有.child类的子元素，应用样式
    // 例如:
    parent.classList.add('has-child');
  }
});

然后在CSS中，你可以这样写：




.parent.has-child {
  /* 样式规则 */
}

这个JavaScript代码会在页面加载时运行，为所有符合条件的.parent元素添加.has-child类。然后你就可以用CSS来控制这些有.has-child类的.parent元素的样式。

- 阅读更多 -

文字弹性跳动CSS3代码

System

2024-08-18

所有,css3

要实现文字的弹性跳动效果，可以使用CSS3的animation属性结合keyframes规则。以下是一个简单的示例，展示如何为文字创建弹性跳动的效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bouncing Text</title>
<style>
  .bouncing-text {
    display: inline-block;
    font-size: 24px;
    animation: bounce 2s infinite alternate;
  }
 
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
</style>
</head>
<body>
 
<div class="bouncing-text">弹性跳动的文字</div>
 
</body>
</html>

在这个例子中，.bouncing-text 类定义了文字的初始样式和动画。@keyframes bounce 规则定义了动画的关键帧，实现了文字在垂直位置上的跳动。animation 属性设置了动画的名称(bounce)、持续时间(2s)、循环次数(infinite)以及动画的播放方式(alternate)，后者表示动画在每次循环结束时反向播放。

- 阅读更多 -

js 打开页面的方法总结

System

2024-08-18

所有,javascript

在JavaScript中，打开一个新的网页窗口可以使用window.open()方法。以下是几种常见的打开新页面的方法：

使用window.open()直接打开一个新页面：




window.open('https://www.example.com', '_blank');

在一个新的浏览器标签页中打开链接：




<a href="https://www.example.com" target="_blank">打开新页面</a>

使用JavaScript创建一个form并提交，从而在新窗口/标签页中打开页面：




// 创建一个form
var form = document.createElement('form');
form.target = '_blank';
form.action = 'https://www.example.com';
 
// 添加form到body
document.body.appendChild(form);
 
// 提交form
form.submit();

使用window.location.href或window.location.assign()在当前窗口打开新页面：




window.location.href = 'https://www.example.com';
// 或者
window.location.assign('https://www.example.com');

使用window.location.replace()在当前窗口替换为新页面（不会在浏览器历史记录中生成新记录）：




window.location.replace('https://www.example.com');

选择合适的方法取决于你是否需要在新窗口或标签页中打开页面，以及是否需要保留当前页面的历史记录。

- 阅读更多 -

CSS实现抽屉的效果

System

2024-08-18

所有,css3

要使用CSS实现抽屉的效果，你可以使用绝对定位和变换（transform）属性。以下是一个简单的例子：

HTML:




<div class="drawer-container">
  <div class="content">内容区域</div>
  <div class="drawer">
    <button class="drawer-toggle">打开抽屉</button>
    <div class="drawer-content">抽屉内容</div>
  </div>
</div>

CSS:




.drawer-container {
  position: relative;
  width: 100%;
}
 
.content {
  width: 100%;
  background-color: #f0f0f0;
  padding: 20px;
}
 
.drawer {
  position: absolute;
  right: 0;
  top: 0;
  width: 200px; /* 抽屉的宽度 */
  height: 100%;
  background-color: #ddd;
  transform: translateX(100%); /* 初始时抽屉在容器外 */
  transition: transform 0.3s ease-in-out; /* 平滑过渡动画 */
}
 
.drawer-content {
  padding: 20px;
}
 
.drawer-toggle {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  background-color: #fff;
  border: none;
  cursor: pointer;
}
 
/* 当抽屉处于打开状态时的样式 */
.drawer-container .drawer.open {
  transform: translateX(0); /* 将抽屉移动到视图中 */
}

JavaScript:




document.querySelector('.drawer-toggle').addEventListener('click', function() {
  var drawer = document.querySelector('.drawer');
  drawer.classList.toggle('open'); // 切换抽屉的打开和关闭状态
});

在这个例子中，.drawer 类代表抽屉本身，.drawer-toggle 是打开抽屉的按钮。通过点击按钮切换 .open 类，可以使用CSS的 transform 属性和 transition 属性创建平滑的打开和关闭动画。

- 阅读更多 -