分类前端技术下的文章

2024-08-22

要在CSS中实现文字的扫光效果，可以使用@keyframes动画结合text-stroke属性（或text-shadow）来创建出闪烁的效果。以下是一个简单的实现示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Glow Effect</title>
<style>
  .glow-text {
    color: transparent;
    text-stroke: 1px #fff;
    font-size: 48px;
    font-weight: bold;
    animation: glow 1s ease-in-out infinite alternate;
  }
 
  @keyframes glow {
    from {
      text-stroke-color: #fff;
      text-fill-color: #fff;
    }
    to {
      text-stroke-color: #ff0000; /* Change this to your desired color */
      text-fill-color: #ff0000; /* Change this to your desired color */
    }
  }
</style>
</head>
<body>
 
<div class="glow-text">扫光文字效果</div>
 
</body>
</html>

在这个例子中，.glow-text 类定义了文字的样式，包括动画效果。@keyframes glow 定义了文字颜色从白色变到指定颜色的过渡，可以通过修改to段中的颜色来改变扫光的颜色。这个动画将无限次数地开始和结束，alternate使得动画交替执行，从而创建出持续的扫光效果。

- 阅读更多 -

CSS 系列 -- 块级元素靠右的实现方式

System

2024-08-22

所有,css3

要使一个块级元素靠右，可以使用CSS的float属性或者text-align属性，或者利用flexbox布局。以下是几种实现方式的示例代码：

使用float属性：




.block-right {
  float: right;
}




<div class="block-right">这个块将会浮动到右边</div>

使用text-align属性（适用于块级元素内的内联内容或者内联块级内容）：




.container {
  text-align: right;
}




<div class="container">
  <div>这个块将会靠右边</div>
</div>

使用flexbox布局：




.flex-container {
  display: flex;
  justify-content: flex-end; /* 使子元素靠右 */
}




<div class="flex-container">
  <div>这个块将会靠右边</div>
</div>

在实际应用中，可以根据具体情况选择最适合的方法。

- 阅读更多 -

用xpath取出属性值的文本

System

2024-08-22

所有,css3

在XPath中，可以使用@符号来获取元素的属性值。例如，如果你想获取HTML中<a>标签的href属性值，可以使用以下XPath表达式：




//a/@href

这将会选取所有<a>标签的href属性。

如果你正在使用Python，并且想要使用lxml库来获取属性值，可以这样做：




from lxml import etree
 
html = """
<a href="https://www.example.com">Example Link</a>
"""
 
tree = etree.HTML(html)
 
# 获取href属性值
href_values = tree.xpath('//a/@href')
 
for href in href_values:
    print(href)

这段代码会输出所有<a>标签的href属性值。

- 阅读更多 -

vue3 + css动画实现元素翻转效果

System

2024-08-22

所有,css3




<template>
  <div class="flip-container" @click="toggle">
    <div class="flipper">
      <div class="front" v-show="!isFlipped">正面</div>
      <div class="back" v-show="isFlipped">背面</div>
    </div>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const isFlipped = ref(false);
 
    function toggle() {
      isFlipped.value = !isFlipped.value;
    }
 
    return { isFlipped, toggle };
  }
};
</script>
 
<style scoped>
.flip-container {
  perspective: 1000;
}
 
.flipper {
  position: relative;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
 
.front, .back {
  backface-visibility: hidden;
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
 
.front {
  z-index: 2;
}
 
.back {
  transform: rotateY(180deg);
}
 
.flip-container:hover .flipper {
  transform: rotateY(180deg);
}
</style>

这个例子中，我们创建了一个可以点击翻转的容器，通过Vue的响应式数据绑定和CSS动画实现了元素的翻转效果。用户点击.flip-container后，.flipper的transform属性从rotateY(0)变为rotateY(180deg)，从而触发CSS动画使得.front和.back分别显示和隐藏，实现翻转效果。

- 阅读更多 -

css中实现元素居中的方式

System

2024-08-22

所有,css3

在CSS中，实现元素居中可以通过不同的属性来实现，取决于你是要水平居中、垂直居中，还是两者都要。以下是一些常用的居中方法：

水平居中 - 行内元素或文本




.center-text {
  text-align: center;
}

水平居中 - 块级元素




.center-block {
  margin-left: auto;
  margin-right: auto;
  width: 50%; /* or any other value */
}

垂直居中 - 单行文本




.center-vertical-text {
  height: 100px;
  line-height: 100px; /* same as height to vertically center text */
}

水平和垂直居中 - 使用flexbox




.center-flex {
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
  height: 200px; /* or any other value */
}

水平和垂直居中 - 使用定位和转换




.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

垂直居中 - 使用CSS Grid




.center-grid {
  display: grid;
  place-items: center;
  height: 200px; /* or any other value */
}

选择合适的方法取决于你的具体需求和上下文。

- 阅读更多 -

Hexo+Butterfly主题设置背景透明度和字体

System

2024-08-22

所有,css3

在Hexo博客中使用Butterfly主题设置背景透明度和字体，你可以通过编辑主题的自定义配置文件来实现。以下是如何设置的步骤和示例代码：

打开Butterfly主题的配置文件 _config.butterfly.yml。
找到 body_style 配置项，可以直接在这里设置背景的透明度。例如，设置背景透明度为70%：
```
body_style: "background-color: rgba(255, 255, 255, 0.7);"
```
若要设置字体，可以使用 font 配置项，或者直接在主题的样式文件中设置。例如，在 source/_data/butterfly.swig 文件中添加字体样式：
```
body {
  font-family: 'YourFont', sans-serif;
}
```
替换 'YourFont' 为你想要的字体名称。
如果你想要在网站上动态调整字体大小或背景透明度，可以考虑使用JavaScript来实现。例如，在 source/js/custom.js 文件中添加以下代码来调整字体大小：
```
document.body.style.fontSize = '16px'; // 设置字体大小为16px
```
并在页面中引入这个JavaScript文件：
```
# 在主题配置文件中引入自定义的js文件
custom_file:
  js:
    - js/custom.js
```

请注意，这些示例代码只是设置背景透明度和字体的基本方法。根据你的具体需求，可能需要更复杂的CSS或JavaScript代码来实现动态调整。

- 阅读更多 -

CSS3中伪元素::before和::after 制作按钮的开关门效果

System

2024-08-22

所有,css3




/* 开关门效果 */
.toggle-switch {
  position: relative;
  width: 120px;
  height: 60px;
  background-color: #e9e9e9;
  border-radius: 30px;
  transition: background-color 0.3s;
}
 
.toggle-switch::before,
.toggle-switch::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50%;
  height: 80%;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s;
  content: '';
}
 
.toggle-switch::before {
  left: 20px;
}
 
.toggle-switch::after {
  right: 20px;
}
 
/* 开启状态 */
.toggle-switch.on {
  background-color: #4caf50;
}
 
.toggle-switch.on::before {
  left: 5%;
}
 
.toggle-switch.on::after {
  right: 5%;
}

这段代码定义了一个简单的开关门效果，当.toggle-switch元素有.on类时，门会打开，展示出背景色#4caf50的样式。::before和::after伪元素分别代表门的左右半部分，当有.on类时，它们会向外扩展，从而模拟门打开的效果。

- 阅读更多 -

CSS3-补充-伪元素

System

2024-08-22

所有,css3

CSS3中的伪元素和伪类可以让我们向某些选择器添加特殊的效果。伪元素使用::开头，而伪类使用:开头。

伪元素 ::before 和 ::after

伪元素 "::before" 和 "::after" 创建一个元素，这个元素在内容之前或之后插入。这两个伪元素是行内元素。




div::before {
  content: "开始";
}
 
div::after {
  content: "结束";
}

伪类 :first-child, :last-child, :nth-child()

伪类 ":first-child", ":last-child", ":nth-child()" 选择器用于选择指定的元素。




p:first-child {
  color: blue;
}
 
p:last-child {
  color: red;
}
 
p:nth-child(2) {
  color: green;
}

伪类 :first-letter, :first-line

伪类 ":first-letter", ":first-line" 选择器用于选定文本的首字母或首行。




p:first-letter {
  font-size: 200%;
}
 
p:first-line {
  font-weight: bold;
}

伪类 :link, :visited, :hover, :active

伪类 ":link", ":visited", ":hover", ":active" 选择器用于设置超链接的状态样式。




a:link {
  color: blue;
}
 
a:visited {
  color: purple;
}
 
a:hover {
  color: red;
}
 
a:active {
  color: yellow;
}

伪类 :focus

伪类 ":focus" 选择器用于选择获得焦点的元素。




input:focus {
  background-color: yellow;
}

伪类 :checked, :disabled, :empty

伪类 ":checked", ":disabled", ":empty" 选择器用于选择特定状态的元素。




input:checked {
  background-color: green;
}
 
input:disabled {
  background-color: gray;
}
 
p:empty {
  display: none;
}

伪类 :not()

伪类 ":not()" 选择器用于选择不符合条件的元素。




p:not(.exclude) {
  color: red;
}

伪类 :target

伪类 ":target" 选择器用于选择当前的目标元素。




#target {
  color: red;
}

伪类 :lang()

伪类 ":lang()" 选择器用于选择具有特定语言的元素。




p:lang(en) {
  color: blue;
}

伪类 :root

伪类 ":root" 选择器用于选择根元素。




:root {
  background-color: yellow;
}

伪类 :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type()

伪类 ":nth-child()", ":nth-last-child()", ":nth-of-type()", ":nth-last-of-type()" 选择器用于选择特定位置的元素。




p:nth-child(2) {
  color: red;
}
 
p:nth-last-child(2) {
  color: blue;
}
 
p:nth-of-type(even) {
  color: green;
}
 
p:nth-last-of-type(odd) {
  color: purple;
}

伪类 :only-child, :only-of-

- 阅读更多 -

vue3中设置滚动条样式

System

2024-08-22

所有,css3

在Vue 3中，可以通过CSS来设置滚动条的样式。以下是一个简单的例子，展示如何为网页中的滚动条设置样式：

首先，在组件的<style>部分或者外部CSS文件中添加滚动条的样式规则。




/* 设置滚动条宽度和背景颜色 */
::-webkit-scrollbar {
  width: 10px;
  background-color: #f9f9f9;
}
 
/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #c1c1c1;
}
 
/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
  border-radius: 10px;
  box-shadow: inset 0 0 5px grey;
}

在Vue组件的模板中，确保有一个元素具有滚动条，例如：




<template>
  <div class="scrollable-content">
    <!-- 内容过多，会出现滚动条 -->
    <p>...</p>
    <!-- 更多内容 -->
  </div>
</template>
 
<style>
.scrollable-content {
  overflow-y: scroll; /* 使内容可滚动 */
  height: 200px; /* 设置一个固定高度 */
}
/* 在这里引入或者直接写上面的CSS样式 */
</style>

这样就可以在Vue 3应用中设置滚动条的样式了。注意，上面的CSS样式主要是针对Webkit内核浏览器（如Chrome和Safari）。对于Firefox或者IE，你可能需要不同的CSS规则。

- 阅读更多 -

CSS3技巧36：backdrop-filter 背景滤镜

System

2024-08-22

所有,css3




/* 添加背景滤镜以实现模糊效果 */
.blur-background {
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.5); /* 设置半透明背景色 */
}
 
/* 应用于元素的样式 */
.my-element {
  width: 300px;
  height: 200px;
  position: relative;
  z-index: 10;
}
 
/* 父容器样式 */
.parent-container {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden; /* 确保过滤效果不会超出容器范围 */
}
 
/* HTML结构 */
<div class="parent-container">
  <div class="my-element">这里是内容</div>
  <div class="blur-background"></div>
</div>

这个例子展示了如何使用backdrop-filter属性为元素添加背景模糊效果。.blur-background类创建了一个半透明的背景，并且利用backdrop-filter实现了模糊效果。.my-element类是需要展示在模糊背景上的内容，而.parent-container类确保模糊效果不会超出设定的容器范围。

- 阅读更多 -