分类 css3 下的文章

2024-08-13

CSS3 可以用来创建和设计各种网页上的图形界面元素，包括服装等的模型。以下是一个简单的例子，展示如何使用 CSS3 来创建一个简单的衫服模型：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Clothes Model</title>
<style>
  .tshirt {
    width: 200px;
    height: 300px;
    background: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 10px;
    position: relative;
    perspective: 1000px;
  }
 
  .tshirt::before,
  .tshirt::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 50px;
    width: 80px;
    height: 260px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  }
 
  .tshirt::before {
    transform: rotate(-10deg) translateX(10px) translateY(100px);
  }
 
  .tshirt::after {
    background: #ff0;
    transform: rotate(10deg) translateX(-10px) translateY(-100px);
  }
 
  .tshirt-collar {
    width: 100px;
    height: 120px;
    background: #fff;
    border-radius: 10px;
    position: absolute;
    top: -50px;
    left: 60px;
    transform: rotate(-10deg);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  }
 
  .tshirt-pocket {
    width: 80px;
    height: 50px;
    background: #000;
    position: absolute;
    bottom: 60px;
    left: 70px;
    border-radius: 0 0 10px 10px;
    box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.2);
  }
</style>
</head>
<body>
<div class="tshirt">
  <div class="tshirt-collar"></div>
  <div class="tshirt-pocket"></div>
</div>
</body>
</html>

这段代码展示了如何使用 CSS3 的伪元素、transform 和 box-shadow 属性来创建一个简单的衫服模型。通过调整 CSS 属性，你可以进一步完善和设计你的服装模型。

- 阅读更多 -

HTML-table表格详解

System

2024-08-13

所有,css3

HTML表格（table）是一个非常常见的元素，用于在网页上创建结构化数据。以下是一个简单的HTML表格示例，包含标题、表头和一些数据行：




<!DOCTYPE html>
<html>
<head>
    <title>简单表格</title>
</head>
<body>
    <table border="1">
        <caption>用户信息表</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>职业</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>28</td>
                <td>软件工程师</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>25</td>
                <td>产品经理</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>32</td>
                <td>项目经理</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

在这个例子中：

<table> 标签定义表格。
<caption> 标签定义表格的标题。
<thead> 标签定义表头部分，用于包含表头行。
<tbody> 标签定义表的主体部分，用于包含数据行。
<th> 标签定义表头单元格，通常文本会居中并加粗显示。
<tr> 标签定义表格中的行。
<td> 标签定义表格中的单元。

border="1" 属性用于给表格添加边框，你也可以使用 CSS 来控制表格的样式。

- 阅读更多 -

纯CSS实现背景色渐变

System

2024-08-13

所有,css3

要使用纯CSS实现背景色渐变，你可以使用linear-gradient函数。这里是一个简单的例子，它创建了一个从顶部到底部的蓝色到红色的渐变背景。




.gradient-background {
  background: linear-gradient(to bottom, blue, red);
}

将上述CSS类应用到HTML元素上，该元素就会展示出渐变背景。




<div class="gradient-background">这里是渐变背景</div>

你可以调整linear-gradient函数中的方向和颜色来自定义渐变的方向和颜色。

- 阅读更多 -

请解释一下 CSS3 的 Flexbox（弹性盒布局模型）, 以及适用场景？

System

2024-08-13

所有,css3

CSS3的Flexbox（弹性盒布局模型）提供了一种更加灵活的方式来对容器内的项进行布局，无论它们是行内元素还是块级元素。Flexbox可以用来创建复杂的布局，而不需要使用多个嵌套的div元素。

Flexbox布局的主要特点包括：

能够对项进行垂直或水平排列。
能够对项进行弹性伸缩以填满可用空间或根据容器大小自动调整项的大小。
能够轻易的改变项的排列方向。
能够轻易的控制项的对齐方式。
能够提供一个新的方向（主轴和交叉轴）来定义项的排列。

Flexbox适用于以下场景：

需要创建具有复杂布局的应用程序，例如多列布局、响应式设计、弹出窗口、自适应用户界面等。
需要创建具有复杂项排列和对齐的布局，例如图片画廊、商品排列、导航菜单等。
需要创建可以伸缩的用户界面元素，例如图表、图形和数据可视化等。
需要创建可以适应不同屏幕尺寸和设备的布局，例如响应式网页设计、移动应用界面等。

下面是一个简单的Flexbox布局示例：




.container {
  display: flex; /* 使用弹性盒布局 */
  flex-direction: row; /* 设置主轴方向为水平 */
  justify-content: space-around; /* 设置项在主轴方向上的对齐方式 */
}
 
.item {
  flex: 1; /* 设置项的伸缩性为1，意味着它们会等分容器的空间 */
  min-width: 100px; /* 设置项的最小宽度 */
}




<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

在这个例子中，.container 是一个弹性盒，其中包含三个 .item 项。通过Flexbox，这三个项将会被等分地排列在容器中，并且各自至少有100px的宽度。

- 阅读更多 -

HTML5 CSS3 经典案例：无插件拖拽上传图片（支持预览与批量）

System

2024-08-13

所有,css3

以下是实现HTML5和CSS3拖拽上传图片功能的核心JavaScript代码，它支持图片预览和批量上传。




// 初始化文件输入框
document.getElementById('file-input').addEventListener('change', function(e) {
    var files = this.files;
    for (var i=0; i<files.length; i++) {
        var file = files[i];
        // 检查文件类型
        if (!file.type.match('image.*')) {
            continue;
        }
        // 创建图片预览
        var img = document.createElement('img');
        img.classList.add('preview');
        img.file = file;
        // 添加拖拽效果
        img.addEventListener('dragstart', dragStart, false);
        img.addEventListener('dragend', dragEnd, false);
        // 添加图片到预览区域
        document.getElementById('preview').appendChild(img);
        // 读取文件并显示
        var reader = new FileReader();
        reader.onload = (function(aImg) {
            return function(e) {
                aImg.src = e.target.result;
            };
        })(img);
        reader.readAsDataURL(file);
    }
});
 
// 拖拽开始事件
function dragStart(e) {
    this.style.opacity = '0.5';
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', null);
    e.dataTransfer.setImageData(this.src, 0, 0);
    e.dataTransfer.setData('img-file', this.file);
}
 
// 拖拽结束事件
function dragEnd(e) {
    this.style.opacity = '1';
}
 
// 拖拽进入目标区事件
function dragEnter(e) {
    e.stopPropagation();
    e.preventDefault();
}
 
// 拖拽覆盖目标区事件
function dragOver(e) {
    e.stopPropagation();
    e.preventDefault();
}
 
// 拖拽放置事件
function drop(e) {
    e.stopPropagation();
    e.preventDefault();
 
    var img = document.createElement('img');
    img.classList.add('preview');
    img.file = e.dataTransfer.getData('img-file');
    img.addEventListener('dragstart', dragStart, false);
    img.addEventListener('dragend', dragEnd, false);
 
    document.getElementById('preview').appendChild(img);
    var reader = new FileReader();
    reader.onload = (function(aImg) {
        return function(e) {
            aImg.src = e.target.result;
        };
    })(img);
    reader.readAsDataURL(img.file);
}
 
// 设置拖拽事件监听
document.getElementById('preview').addEventListener('dragenter', dragEnter, false);
document.getElementById('preview').addEventListener('dragover', dragOver, false);
document.getEleme

- 阅读更多 -

纯CSS实现边框流光效果（跑马灯效果）

System

2024-08-13

所有,css3

要使用纯CSS实现边框流光效果，可以使用@keyframes动画结合border属性的变化来实现。以下是一个简单的例子：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框流光效果</title>
<style>
  .glowing-border {
    width: 200px;
    height: 50px;
    position: relative;
    background: #222;
    border: 4px solid #000;
    border-radius: 10px;
    animation: glow 1.5s ease-in-out infinite alternate;
  }
 
  @keyframes glow {
    from {
      border-color: #000;
    }
    to {
      border-color: #ff0;
    }
  }
</style>
</head>
<body>
<div class="glowing-border"></div>
</body>
</html>

这段代码会创建一个有边框流光效果的方形元素。@keyframes glow定义了一个动画，通过改变border-color从黑色过渡到黄色，实现边框的流光效果。animation属性则使这个动画无限次数地循环，并且在起始和结束状态之间交替。

- 阅读更多 -

vue实现纯css直播点赞图标的动画效果组件

System

2024-08-13

所有,css3




<template>
  <div class="like-button">
    <span class="like-icon">
      <img src="./heart.png" alt="点赞图标" />
    </span>
    <span class="like-count">{{ likeCount }}</span>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      likeCount: 0,
    };
  },
  methods: {
    incrementLike() {
      this.likeCount += 1;
      // 这里可以添加点赞后的逻辑，例如发送点赞请求到后端等
    }
  }
};
</script>
 
<style scoped>
.like-button {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
 
.like-icon img {
  width: 20px;
  height: 20px;
  transition: transform 0.2s;
}
 
.like-icon img:hover {
  transform: scale(1.1);
}
 
.like-count {
  margin-left: 5px;
  font-size: 16px;
}
</style>

这个简单的Vue组件展示了如何创建一个点赞按钮，并使用CSS为点赞图标和数量添加动画效果。用户将鼠标悬停在图标上时，图标会缩放，点赞数也会随着点赞次数的增加而更新。这个例子教会开发者如何在Vue中结合使用JavaScript和CSS来创建交互式组件。

System

2024-08-13

所有,css3

以下是一个简单的HTML和CSS代码示例，用于创建一个横向二级导航菜单：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>横向二级导航菜单</title>
<style>
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
 
  li {
    float: left;
  }
 
  li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
 
  li a:hover, .dropdown:hover .dropbtn {
    background-color: #111;
  }
 
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
 
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
 
  .dropdown-content a:hover {background-color: #f1f1f1;}
 
  .dropdown:hover .dropdown-content {
    display: block;
  }
</style>
</head>
<body>
 
<ul>
  <li><a href="#home">首页</a></li>
  <li><a href="#news">新闻</a></li>
  <li class="dropdown">
    <a href="#" class="dropbtn">下拉菜单</a>
    <div class="dropdown-content">
      <a href="#">链接1</a>
      <a href="#">链接2</a>
      <a href="#">链接3</a>
    </div>
  </li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>
 
</body>
</html>

这段代码提供了一个简单的横向二级导航菜单的实现，使用了HTML结构和CSS样式。当鼠标悬停在带有下拉内容的菜单项上时，会显示下拉菜单。这个示例可以作为学习如何创建导航菜单的起点，并可以根据具体需求进行扩展和修改。

- 阅读更多 -

css设置遮罩层(半透明）

System

2024-08-12

所有,css3

在CSS中，可以使用rgba颜色格式来设置半透明的遮罩层。rgba代表红绿蓝三色加上alpha通道（透明度）。

以下是一个简单的例子，创建一个全屏的半透明遮罩层：

HTML:




<div class="mask"></div>

CSS:




.mask {
  position: fixed; /* 定位方式 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* 黑色半透明遮罩层 */
  z-index: 1000; /* 确保遮罩层在其他内容之上 */
}

在这个例子中，.mask 类创建了一个全屏的遮罩层，背景颜色设置为黑色半透明（rgba(0, 0, 0, 0.5)），其中最后一个值（0.5）是透明度，可以根据需要调整为其他介于0（完全透明）和1（完全不透明）的值。

- 阅读更多 -

css伪元素实现选中效果【打勾效果】

System

2024-08-12

所有,css3

CSS伪元素可以用来创建打勾效果，以下是一个简单的例子：

HTML:




<label class="checkbox">
  <input type="checkbox" />
  <span class="checkmark"></span>
  Check me out
</label>

CSS:




/* 复选框样式 */
.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
 
/* 打勾标记样式 */
.checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
}
 
/* 当复选框被选中时，显示打勾 */
.checkbox input:checked + .checkmark:before {
  position: absolute;
  content: "";
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
 
/* 隐藏原生的复选框样式 */
.checkbox input:checked + .checkmark {
  background-color: #bada55;
}
 
.checkbox span.checkmark {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 1px solid #ddd;
  vertical-align: middle;
  margin-right: 5px;
  margin-top: -2px;
}

这段代码中，.checkbox input 隐藏了原生的复选框，.checkbox .checkmark 创建了一个空白的打勾区域，.checkbox input:checked + .checkmark:before 在复选框被选中时，通过伪元素 :before 创建了打勾效果。通过CSS的 transform: rotate(45deg); 属性，将打勾样式旋转成标准的对勾形状。

- 阅读更多 -