标签 css 下的文章

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 属性，你可以进一步完善和设计你的服装模型。

- 阅读更多 -

纯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样式。当鼠标悬停在带有下拉内容的菜单项上时，会显示下拉菜单。这个示例可以作为学习如何创建导航菜单的起点，并可以根据具体需求进行扩展和修改。

System

2024-08-13

所有,css




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom HTML5 Video Player</title>
    <!-- Tailwind CSS -->
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
    <div class="mx-auto max-w-lg bg-white rounded-lg shadow overflow-hidden">
        <video id="video" class="w-full" controls>
            <source src="your-video-file.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div class="flex items-center justify-between px-2 py-2 bg-gray-100">
            <!-- Play/Pause Button -->
            <button id="playPause" class="text-blue-500" onclick="togglePlayPause()">
                Play/Pause
            </button>
            <!-- Progress Bar -->
            <div class="w-1/4">
                <input id="seek" type="range" min="0" max="100" value="0" onchange="seekTo()">
            </div>
            <!-- Timer -->
            <div id="timer" class="text-gray-600">00:00 / 00:00</div>
        </div>
    </div>
 
    <script>
        function togglePlayPause() {
            var video = document.getElementById('video');
            if (video.paused) {
                video.play();
            } else {
                video.pause();
            }
        }
 
        function seekTo() {
            var video = document.getElementById('video');
            var seekTo = (event.target.value / 100) * video.duration;
            video.currentTime = seekTo;
        }
 
        // Update the seek slider and timer
        function updateProgress() {
            var video = document.getElementById('video');
            var progress = (video.currentTime / video.duration) * 100;
            document.getElementById('seek').value = progress;
 
            // Calculate the time left and time total
            var minutes = Math.floor(video.currentTime / 60);
            if (minutes < 10) {
                minutes = '0' + minutes;
            }
            var seconds = Math.floor(video.currentTime % 60);
            if (seconds < 10) {
                seconds = '0' + seconds;
            }
            var totalMinutes = Math.floor(video.duration / 60);
            if (totalMinutes < 10) {
                totalMinutes = '0' + totalMinutes;
            }

- 阅读更多 -

vue2项目postcss.config.js配置，将px转化成rem

System

2024-08-13

所有,css

在Vue 2项目中，要使用PostCSS将px转换成rem，你需要安装postcss-plugin-px2rem插件。以下是postcss.config.js的配置示例：

首先，安装postcss-plugin-px2rem：




npm install postcss-plugin-px2rem --save-dev

然后，在项目根目录下创建或编辑postcss.config.js文件，并配置如下：




module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-plugin-px2rem": {
      rootValue: 37.5, // 设计稿宽度/10，这里假设设计稿宽度是375px
      propList: ['*'], // 需要转换的属性，这里选择转换所有属性
      unitPrecision: 5, // 单位精度
      propWhiteList: [], // 白名单属性，如果设置后，则只转换设置的属性
      propBlackList: [], // 黑名单属性，如果设置后，则不转换设置的属性
      exclude: /(node_module)/, // 忽略转换正则匹配的文件目录
      selectorBlackList: [], // 要忽略并保留为px的选择器
      ignoreIdentifier: false, // 忽略单个属性的转换
      replace: true, // 是否直接更换属性值，而不添加backup属性
      mediaQuery: false, // 是否处理媒体查询中的px
      minPixelValue: 0 // 设置要转换的最小像素值，如果设置为1，则只有大于1px的px单位会被转换
    }
  }
};

配置完成后，重新运行项目，PostCSS会自动将CSS中的px单位转换成相应的rem单位。

- 阅读更多 -

CSS基础之CSS选择器，前端编程开发

System

2024-08-13

所有,css

CSS选择器是用来指定CSS样式的“指南”，它决定了样式规则应用于哪些元素。以下是一些常用的CSS选择器：

类选择器（Class Selector）: 用于选择具有指定类的元素。




.my-class {
  color: red;
}

ID选择器（ID Selector）: 用于选择具有指定ID的单个元素。




#my-id {
  color: blue;
}

元素选择器（Element Selector）: 用于选择指定类型的元素。




p {
  font-size: 16px;
}

属性选择器（Attribute Selector）: 用于选择包含特定属性的元素，无论其值如何。




input[type="text"] {
  background-color: yellow;
}

伪类选择器（Pseudo-class Selector）: 用于选择处于特定状态的元素。




a:hover {
  text-decoration: underline;
}

伪元素选择器（Pseudo-element Selector）: 用于选择元素的一部分（如第一个字母或元素内容的开始/结束）。




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

子代选择器（Child Selector）: 用于选择指定父元素的直接子元素。




div > p {
  color: green;
}

相邻选择器（Adjacent Sibling Selector）: 用于选择紧跟在另一个元素后的元素，且两者有相同父元素。




h1 + p {
  margin-top: 0;
}

后代选择器（Descendant Selector）: 用于选择指定父元素的后代（不仅限于直接子元素）。




div p {
  color: purple;
}

通配选择器（Universal Selector）: 选择页面上的所有元素。




* {
  margin: 0;
  padding: 0;
}

选择器的复杂程度可以导致无限的可能性，这里只列出了一些基本和常用的选择器。在实际开发中，可以根据需要灵活运用各种选择器，以便精确控制页面中元素的样式。

- 阅读更多 -