标签 css 下的文章

2024-08-08




// Vue 3中引入SCSS依赖的配置示例
// 在Vue 3项目中，你可以使用以下配置来处理SCSS文件
 
// 安装依赖
// npm install --save-dev sass-loader sass
 
// vue.config.js 配置
module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";` // 引入全局SCSS变量文件
      }
    }
  }
};
 
// 在组件中使用SCSS
// <style lang="scss">
// 使用SCSS编写样式
// </style>




// Vue 3中引入LESS依赖的配置示例
// 在Vue 3项目中，你可以使用以下配置来处理LESS文件
 
// 安装依赖
// npm install --save-dev less-loader less
 
// vue.config.js 配置
module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          globalVars: {
            primary_color: '#f00' // 定义全局LESS变量
          }
        }
      }
    }
  }
};
 
// 在组件中使用LESS
// <style lang="less">
// 使用LESS编写样式
// </style>

以上代码展示了如何在Vue 3项目中配置SCSS和LESS的loader，并在组件中使用它们。通过vue.config.js文件中的css.loaderOptions选项，你可以设置额外的loader配置，包括全局样式变量。这样可以提高样式开发的效率和一致性。

- 阅读更多 -

【前端html+css3+js】实现背景文字渐变色以及js实现数字递增

System

2024-08-07

所有,css3

以下是实现背景文字渐变色以及数字递增的简单示例代码：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Text Gradient and Counter</title>
<style>
  .gradient-text {
    font-size: 48px;
    background: -webkit-linear-gradient(45deg, blue, red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    margin-bottom: 20px;
  }
</style>
</head>
<body>
 
<div class="gradient-text">渐变色文字</div>
<div id="counter">0</div>
 
<script>
  // 数字递增函数
  function incrementValue() {
    var value = parseInt(document.getElementById('counter').innerText, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('counter').innerText = value;
  }
 
  // 调用函数，每秒递增一次
  setInterval(incrementValue, 1000);
</script>
 
</body>
</html>

CSS3:




.gradient-text {
  font-size: 48px;
  background: -webkit-linear-gradient(45deg, blue, red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  margin-bottom: 20px;
}

JavaScript:




function incrementValue() {
  var value = parseInt(document.getElementById('counter').innerText, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('counter').innerText = value;
}
 
setInterval(incrementValue, 1000);

这段代码实现了背景内的文字渐变色效果，并且使用JavaScript实现了数字每秒递增的功能。使用了CSS3的渐变背景属性以及-webkit-background-clip和-webkit-text-fill-color来实现文字的渐变效果。JavaScript 使用 setInterval 函数每秒调用一次递增函数，更新显示计数的div内容。

- 阅读更多 -

HTML、CSS和JS怎么变成页面的浅谈

System

2024-08-07

所有,html

HTML、CSS和JS是构建网页的三种核心技术，它们各自负责页面的不同部分：

HTML（Hypertext Markup Language）负责页面的结构。它是一种用来制作网页的标准标记语言，主要用于描述网页的内容。
CSS（Cascading Style Sheets）负责页面的样式。它用来控制HTML元素的显示，比如颜色、大小、布局等。
JS（JavaScript）负责页面的行为。它是一种嵌入到HTML页面中的编程语言，可以让网页具有交互性。

将HTML、CSS和JS组合起来，可以创建一个包含内容、样式和行为的完整网页。

以下是一个简单的HTML、CSS和JS结合的例子：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <button id="myButton">点击我</button>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css):




body {
    font-family: Arial, sans-serif;
}
 
h1 {
    color: blue;
}
 
button {
    background-color: green;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

JavaScript (script.js):




document.getElementById('myButton').addEventListener('click', function() {
    alert('按钮被点击了！');
});

在这个例子中，HTML定义了页面的结构，CSS定义了页面的样式，而JavaScript为按钮添加了交互行为。当用户点击按钮时，会弹出一个警告框。

- 阅读更多 -

css实现六边形及其它灵活布局

System

2024-08-07

所有,css3

CSS可以使用clip-path属性来创建六边形，但这种方法不会适应内容的变化。另一种方法是使用CSS的transform属性和伪元素来实现更灵活的六边形布局。

下面是一个使用CSS创建的灵活六边形布局的例子：




<div class="hexagon">
  <div class="hexagon-inner">
    <p>内容</p>
  </div>
</div>




.hexagon {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #67b168;
  margin: 20px;
  overflow: hidden;
}
 
.hexagon-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(60deg) scale(1.4142135623730951);
  transform-origin: center;
}
 
.hexagon-inner::before,
.hexagon-inner::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: inherit;
  transform: rotate(-60deg);
}
 
.hexagon-inner::before {
  transform-origin: bottom left;
}
 
.hexagon-inner::after {
  transform-origin: top left;
  top: 0;
  left: 50%;
}

这个例子中，.hexagon 创建了一个基本的六边形框架，.hexagon-inner 是内部容器，它通过 transform 属性进行旋转和缩放，使得六边形看起来正确。伪元素 ::before 和 ::after 用于填充六边形的顶部和底部，从而形成一个合适的六边形结构。这个方法可以适应内容的大小变化，因为它不依赖于固定的宽高比。

2024-08-07

要实现一个点击时颜色渐变的菜单栏，并且在鼠标点击时给出方框发光的效果，可以使用CSS3的transition属性来实现颜色的渐变效果，使用:active伪类和box-shadow属性来实现点击时的发光效果。

以下是一个简单的实例代码：

HTML:




<ul class="menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">产品服务</a></li>
  <li><a href="#">联系方式</a></li>
</ul>

CSS:




.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
 
.menu li {
  display: inline-block;
  margin-right: 10px;
}
 
.menu a {
  text-decoration: none;
  color: #fff;
  padding: 10px 15px;
  background-color: #007bff;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
 
.menu a:hover {
  background-color: #0056b3;
}
 
.menu a:active {
  background-color: #00428c;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

在这个例子中，当鼠标悬停在链接上时，背景色会渐变到深蓝色（#0056b3），而当链接被点击时，背景色会渐变到更深的蓝色（#00428c），并且在链接下方产生一个白色的方框发光效果。这个方框发光效果会在点击后持续一段时间，随后随着鼠标的松开而消失。

- 阅读更多 -

Css层叠优先级只会这两招还远远不够

System

2024-08-07

所有,css3

CSS层叠优先级通常由四个级别组成：

内联样式（Inline style）：style属性直接在元素上定义的样式。
ID 选择器（ID selectors）：以 # 开头的选择器，例如 #id。
类选择器（Class selectors）和属性选择器（Attribute selectors）：以 . 或其他属性开头的选择器，例如 .class 或 [attribute]。
元素选择器（Element selectors）和伪类（Pseudo-classes）：标签名称或伪类如 :hover。

还有一个重要级别是通配选择器（Universal selectors），即 *，但它的优先级最低。

在实际应用中，可以通过提升选择器的特异性来增加其优先级：

增加ID选择器的数量。
增加类选择器、属性选择器和伪类的数量。
增加元素选择器和伪类的数量。

例如：




#myId .myClass > p:first-child {
  color: blue; /* 高优先级 */
}
 
.otherClass {
  color: red; /* 低优先级 */
}

在这个例子中，第一个规则有更高的优先级，因为它有一个ID选择器和其他几个类选择器，而第二个规则只有一个类选择器。

如果需要提高优先级，可以结合选择器，例如：




#myId .myClass .myOtherClass p {
  color: blue; /* 优先级提升 */
}

这里通过增加一个类选择器来提升优先级。

- 阅读更多 -

Css提高——Css3盒子模型border-box

System

2024-08-07

所有,css3

CSS3盒子模型中的border-box属性是一个非常有用的工具，它可以让你更容易地控制元素的总宽度和高度。当你将一个元素的box-sizing属性设置为border-box时，浏览器会把边框（border）和内边距（padding）的宽度包含在已定义的宽度和高度内。这样一来，你就不需要再去计算边框和内边距所增加的额外宽度。

下面是一个简单的例子，演示如何使用border-box：




/* 设置所有盒子模型使用 border-box */
* {
  box-sizing: border-box;
}
 
/* 定义一个具有特定宽度、高度、边框和内边距的元素 */
.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px solid black;
}

HTML代码：




<div class="box"></div>

在这个例子中，.box元素的总宽度和高度将是300px和200px，无论边框和内边距的尺寸如何，都不会影响这个元素在页面中占据的空间。这样就使得布局更加容易控制和预测。

- 阅读更多 -

纯css修改图标颜色的五种方式

System

2024-08-07

所有,css3

在纯CSS中，可以通过以下五种方式修改图标颜色：

使用color属性（适用于SVG图标）：




.icon-svg {
  color: red;
}

使用fill属性（适用于SVG图标）：




.icon-svg {
  fill: red;
}

使用background-image属性（适用于使用背景图像的图标）：




.icon-background {
  background-image: url('icon.png');
  background-color: red;
}

使用:before或:after伪元素和background-image（适用于使用字体图标）：




.icon-before:before {
  display: inline-block;
  content: '\f005';
  font-family: FontAwesome;
  color: red;
}

使用filter属性（适用于Gray/Color图标）：




.icon-filter {
  filter: grayscale(100%);
  color: red;
}

注意：在使用这些方法时，你可能需要调整选择器和属性以适应你的具体情况。

- 阅读更多 -

【css动画】从小程序底部弹出模态框，上滑隐藏，下滑显示

System

2024-08-07

所有,css3

要实现这样的动画效果，你可以使用CSS的@keyframes规则来定义弹出和隐藏的动画，并使用JavaScript来控制模态框的显示和隐藏。以下是一个简单的实现示例：

HTML:




<div id="modal" class="modal">
  <!-- 模态框内容 -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>模态框内容</p>
  </div>
</div>

CSS:




.modal {
  display: none; /* 默认隐藏模态框 */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  transition: transform 0.3s ease-out; /* 平滑过渡动画 */
}
 
.modal-content {
  /* 模态框内容样式 */
}
 
.show {
  display: flex; /* 显示模态框 */
}
 
.slide-up {
  animation: slideUp 0.3s forwards; /* 执行上滑隐藏的动画 */
}
 
.slide-down {
  animation: slideDown 0.3s forwards; /* 执行下滑显示的动画 */
}
 
/* 定义上滑隐藏的关键帧动画 */
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
 
/* 定义下滑显示的关键帧动画 */
@keyframes slideDown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

JavaScript:




// 获取模态框元素
var modal = document.getElementById('modal');
 
// 显示模态框
function showModal() {
  modal.classList.add('show');
  modal.classList.remove('slide-up');
}
 
// 隐藏模态框
function hideModal() {
  modal.classList.add('slide-up');
  setTimeout(function() {
    modal.classList.remove('show');
    modal.classList.remove('slide-up');
  }, 300); // 等待动画完成后移除显示类
}
 
// 用户操作，比如点击按钮触发显示或隐藏
document.getElementById('your-trigger-button').addEventListener('click', function() {
  if (modal.classList.contains('show')) {
    hideModal();
  } else {
    showModal();
  }
});

在这个示例中，我们定义了.modal类来设置模态框的基本样式，并在显示时添加.show类。.slide-up和.slide-down类用于触发上滑隐藏和下滑显示的动画。JavaScript函数showModal()和hideModal()用来控制模态框的显示和隐藏。

System

2024-08-07

所有,css3

CSS的text-overflow属性通常与white-space和overflow属性一起使用，来控制文本的溢出显示。它主要用来处理文本超出容器宽度时的显示情况。

当text-overflow设置为ellipsis时，当文本溢出包含它的容器时，溢出的文本会被替换为省略号(...)。




.ellipsis {
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}




<div class="ellipsis">
  这是一段很长的文本，需要被截断并显示省略号。
</div>

在这个例子中，如果文本宽度超过了div的宽度，那么溢出的部分就会被省略号代替。

- 阅读更多 -