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

- 阅读更多 -

请解释一下 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

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

- 阅读更多 -

CSS3如何实现元素的固定不滚动

System

2024-08-12

所有,css3

在CSS3中，可以使用position: sticky;属性来实现元素的固定效果，即使元素在滚动时仍然保持在某个位置。position: sticky;的工作需要基于一些条件：

必须指定top, right, bottom或left四个方向之一来指定sticky元素所需要达到的位置，才能使粘性定位生效。
其父元素不能有任何overflow属性设置为visible的情况，否则sticky定位不会生效。

下面是一个简单的例子，演示如何使用position: sticky;来实现元素的固定效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body, html {
    height: 200%;
    margin: 0;
    padding: 0;
  }
  .sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0; /* 距离顶部的距离 */
    background-color: yellow;
    padding: 50px;
    font-size: 20px;
  }
</style>
</head>
<body>
 
<p>向下滚动页面。</p>
 
<div class="sticky">我在滚动时保持固定。</div>
 
<p>继续向下滚动页面...</p>
 
</body>
</html>

在这个例子中，.sticky类使得包含文本的<div>在滚动时保持在顶部。当用户向下滚动页面时，sticky元素会固定在顶部，并不会随着页面的其余部分滚动。

System

2024-08-12

所有,css3




/* 设置图片初始大小 */
img {
  width: 200px;
  height: auto;
}
 
/* 鼠标悬停时，缩小图片 */
img:hover {
  transform: scale(0.8);
}

这段代码示例中，我们首先为所有img元素设置了一个初始宽度，并让其高度自动调整。然后，我们使用CSS的:hover伪类选择器来定义当鼠标悬停在图片上时的变换效果，使用transform属性中的scale函数将图片缩小到原始大小的80%。这种效果在用户希望在用户交互时增加页面视觉效果时非常有用。

- 阅读更多 -

css3滤镜属性filter实现网页变黑白效果

System

2024-08-12

所有,css3

CSS3的filter属性可以用来实现各种视觉效果，包括图片灰度化。要将网页上的所有内容变成黑白效果，可以对<body>元素使用filter: grayscale(100%);。

下面是实现这种效果的CSS代码：




body {
  filter: grayscale(100%);
}

将以上CSS代码添加到你的样式表中，或者在<head>标签内使用<style>标签包含上述代码，然后刷新你的网页，你会看到整个网页已经变成了黑白效果。这种效果可以通过调整grayscale()函数的参数值来进行调整，以达到不同的灰度级别。100%是完全的灰度效果，而更低的值会让图片呈现更多的颜色。

- 阅读更多 -

前端JS特效第23集：jQuery+CSS3实现动画相册代码

System

2024-08-12

所有,css3




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery+CSS3实现动画相册</title>
    <style>
        /* 样式省略 */
    </style>
</head>
<body>
    <div class="container">
        <div class="album">
            <div class="album-item" style="background-image: url(img/1.jpg);"></div>
            <div class="album-item" style="background-image: url(img/2.jpg);"></div>
            <div class="album-item" style="background-image: url(img/3.jpg);"></div>
            <!-- 更多相册项 -->
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        // jQuery 代码
        $(document).ready(function(){
            // 初始化相册
            function initAlbum() {
                // 代码实现
            }
 
            // 相册项点击事件
            $('.album-item').on('click', function() {
                // 代码实现
            });
 
            // 初始化
            initAlbum();
        });
    </script>
</body>
</html>

这个代码实例展示了如何使用jQuery和CSS3创建一个简单的动画相册。在这个例子中，我们假设.album-item是每个相册项的类，并且每个项通过style属性设置了背景图片。实际的初始化相册和点击事件处理函数的代码实现将根据具体的动画效果和交互逻辑来编写。

- 阅读更多 -

CSS3 - 鼠标经过图片缓慢放大、鼠标离开缓慢还原

System

2024-08-12

所有,css3

要实现鼠标经过图片时放大，鼠标离开时缩小到原始大小的效果，可以使用CSS3的transition属性来实现动画效果，以及:hover伪类来定义鼠标经过时的样式。

以下是实现该效果的CSS代码示例：




img {
  transition: transform 0.5s ease; /* 定义变换动画，0.5秒内完成 */
  transform: scale(1); /* 默认缩放比例 */
  display: block; /* 使图片宽度占满父容器 */
}
 
img:hover {
  transform: scale(1.1); /* 鼠标经过时的缩放比例 */
}

将上述CSS代码添加到你的样式表中，并确保你的HTML代码包含了图片元素。鼠标经过图片时，它会平滑放大，鼠标离开后，图片会平滑缩小到原始大小。

- 阅读更多 -

jquery Tab切换，CSS3制作发光字

System

2024-08-12

所有,css3

以下是使用jQuery和CSS3制作的Tab切换效果，同时每个激活的Tab项都会有一个发光的效果。

HTML部分：




<div class="tabs">
  <input type="radio" id="tab1" name="tab-control" checked>
  <input type="radio" id="tab2" name="tab-control">
  <input type="radio" id="tab3" name="tab-control">
  <ul>
    <li title="Tab 1"><label for="tab1">Tab 1</label></li>
    <li title="Tab 2"><label for="tab2">Tab 2</label></li>
    <li title="Tab 3"><label for="tab3">Tab 3</label></li>
  </ul>
  <div class="content">
    <section>
      <h2>Tab 1</h2>
      <p>Content for tab 1...</p>
    </section>
    <section>
      <h2>Tab 2</h2>
      <p>Content for tab 2...</p>
    </section>
    <section>
      <h2>Tab 3</h2>
      <p>Content for tab 3...</p>
    </section>
  </div>
</div>

CSS部分：




.tabs {
  width: 100%;
  display: inline-block;
}
 
.tabs input[type="radio"] {
  display: none;
}
 
.tabs ul {
  cursor: pointer;
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}
 
.tabs li {
  float: left;
  margin-bottom: -1px;
}
 
.tabs label {
  display: block;
  padding: 10px 20px;
  border: 1px solid #ccc;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: background-color 0.3s;
}
 
.tabs label:hover {
  background-color: #f0f0f0;
}
 
.content {
  clear: both;
  padding: 10px;
  position: relative;
  z-index: 1;
}
 
.content section {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
  position: absolute;
  left: 0;
  top: 30px;
  width: 100%;
}
 
[id^="tab"]:checked + label {
  z-index: 3;
  border-bottom: 1px solid #fff;
}
 
[id^="tab"]:checked ~ [id^="tab"] + label {
  z-index: 2;
}
 
[id^="tab"]:checked ~ .content section {
  display: block;
  animation: glow 1.5s ease-in-out infinite alternate;
}
 
@keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 60px #ff00de;
  }
}

jQuery部分：




$(document).ready(function() {
  $('input[ty

- 阅读更多 -