分类 css3 下的文章

2024-08-18

CSS3 动画（Animation）是一种创建动画效果的机制，可以用来改变元素的样式，在一定的时间内平滑地过渡到新的样式。

基本语法：




@keyframes animationName {
  from {
    property1: value1;
    property2: value2;
    ...
  }
  to {
    property1: value1;
    property2: value2;
    ...
  }
}
 
element {
  animation-name: animationName;
  animation-duration: seconds;
  animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
  animation-delay: seconds;
  animation-iteration-count: n|infinite;
  animation-direction: normal|alternate;
  animation-fill-mode: none|forwards|backwards|both;
  animation-play-state: running|paused;
}

示例代码：




@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
 
.animated {
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

HTML 使用：




<div class="animated">This is a fading in text.</div>

以上代码定义了一个名为 fadeIn 的动画，它会在 2 秒内将元素从完全透明过渡到完全不透明。然后，我们将这个动画应用到了拥有 animated 类的元素上。

2024-08-18

在CSS3中，可以使用border-radius属性来创建内凹的圆角。通过指定较大的内部半径和较小的外部半径，可以实现内凹的效果。

以下是一个简单的例子，展示了如何使用CSS3来创建内凹的圆角：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内凹圆角示例</title>
<style>
  .inset-rounded-corners {
    width: 200px;
    height: 200px;
    background-color: #3498db;
    border-radius: 50%;  /* 创建完全的圆形 */
    position: relative;
  }
 
  .inset-rounded-corners::before {
    content: '';
    position: absolute;
    top: 20px;  /* 根据需要调整 */
    left: 20px; /* 根据需要调整 */
    right: 20px; /* 根据需要调整 */
    bottom: 20px; /* 根据需要调整 */
    background-color: #fff;
    border-radius: 50%;
  }
</style>
</head>
<body>
<div class="inset-rounded-corners"></div>
</body>
</html>

在这个例子中，.inset-rounded-corners 类创建了一个带有背景色的方形，并使用border-radius: 50%;创建了完全圆角。然后，使用:before伪元素创建一个白色的圆形覆盖在方形的中心，从而形成内凹的效果。通过调整:before伪元素的top, left, right, bottom属性值，可以控制内凹的大小和深度。

System

2024-08-18

所有,css3




<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background: #E9E9E4;
        }
        .rabbit-container {
            width: 300px;
            height: 300px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .rabbit-ear {
            width: 100px;
            height: 100px;
            background: #000;
            border-radius: 50%;
            position: absolute;
            top: 50px;
            left: 30px;
            transform: rotate(-30deg);
            z-index: 10;
        }
        .rabbit-ear::before {
            content: '';
            width: 100px;
            height: 50px;
            background: #000;
            border-radius: 50%;
            position: absolute;
            bottom: -50px;
            left: -30px;
            transform: rotate(-30deg);
        }
        .rabbit-ear::after {
            content: '';
            width: 100px;
            height: 50px;
            background: #000;
            border-radius: 50%;
            position: absolute;
            bottom: -50px;
            right: -30px;
            transform: rotate(30deg);
        }
        .rabbit-body {
            width: 180px;
            height: 180px;
            background: #FFF;
            border-radius: 50%;
            position: absolute;
            bottom: -90px;
            left: 0;
            z-index: 5;
        }
        .rabbit-body::before {
            content: '';
            width: 30px;
            height: 100px;
            background: #000;
            position: absolute;
            bottom: -110px;
            left: 75px;
            z-index: 5;
            border-radius: 30px 30px 0 0;
        }
        .rabbit-eye {
            width: 20px;
            height: 24px;
            background: #000;
            border-radius: 50%;
            position: absolute;
            bottom: -100px;
            left: 60px;
        }
        .rabbit-eye::before {
            content: '';
            width: 8px;
            height: 8px;
            background: #FFF;
            border-radius: 50%;
            position: absolute;
            bottom: 5px;
            left: 10px;
        }
        .rabbit-nose {
            width: 24px;
            height: 18px;

- 阅读更多 -

前端从入门到入坟之HTML篇

System

2024-08-18

所有,css3

HTML是构建网页的基础语言，全称是Hyper Text Markup Language，即超文本标记语言。它是一种用于创建网页的标准标记语言。

以下是一个简单的HTML页面示例：




<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
    <a href="https://www.example.com">这是一个链接</a>
</body>
</html>

解释：

<!DOCTYPE html>：文档类型声明，用于通知浏览器使用HTML5的文档类型。
<html>：HTML文档的开始和结束标签。
<head>：包含了文档的元数据，如<title>标签定义了网页的标题。
<title>：定义了网页的标题，显示在浏览器的标题栏上。
<body>：包含了网页的主要可见部分，如文本（<h1>标题，<p>段落）和超链接(<a>标签)。

这个示例展示了如何创建一个基本的HTML页面，包含标题、段落和链接。这是学习前端开发的基础知识，对于初学者来说非常重要。

- 阅读更多 -

css3 flex弹性布局详解

System

2024-08-18

所有,css3

CSS3 Flex布局提供了一种更加灵活的方式来对容器内的项目进行布局，可以简化线性或者非线性布局的设计。

以下是一些关键的CSS属性和它们的作用：

display: flex; 或 display: inline-flex; - 这将创建一个弹性容器。
flex-direction - 定义了容器内项目的方向，可以是水平的（row, row-reverse）或垂直的（column, column-reverse）。
flex-wrap - 定义了当容器太小以至于不能放下所有项目时，项目是否应该换行。
flex-flow - 是flex-direction和flex-wrap的简写形式，默认值为row nowrap。
justify-content - 定义了项目在主轴方向上的对齐方式（例如，在水平容器中，这将影响项目的水平对齐）。
align-items - 定义了项目在交叉轴方向上的对齐方式（例如，在水平容器中，这将影响项目的垂直对齐）。
align-self - 定义了单个项目在交叉轴方向上的对齐方式。
flex-grow - 定义了项目的放大比例。
flex-shrink - 定义了项目的缩小比例。
flex-basis - 定义了在分配多余空间之前，项目占据的主轴空间（类似于width/height属性）。
flex - 是flex-grow, flex-shrink, 和 flex-basis的简写。
order - 定义了项目的排序顺序。

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

HTML:




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

CSS:




.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
 
.flex-item {
  width: 50px;
  height: 50px;
  background-color: #f76c6c;
  color: white;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
}

这个例子创建了一个水平的弹性容器，其中包含了三个方块状的子元素，每个方块都有相等的空间，并且围绕在它们的中间。

- 阅读更多 -

推荐 Sublime CSS3 插件：更高效地编写现代 CSS 代码

System

2024-08-17

所有,css3

Sublime Text 是一款流行的文本编辑器，广泛用于编写和编辑各种代码。Sublime CSS3 插件为 Sublime Text 提供了更好的 CSS3 支持，包括代码高亮、自动完成和代码导航等功能，从而使得编写现代 CSS 代码更加高效和便捷。

以下是如何安装和使用 Sublime CSS3 插件的步骤：

打开 Sublime Text 编辑器。
按 Ctrl+Shift+P（在 Mac 上是 Cmd+Shift+P）打开命令面板。
输入 Install Package 并选择它，然后按回车。
在列表中搜索 CSS3 并选择它进行安装。

安装完成后，CSS3 插件会自动激活，并提供更加丰富的编写体验。

以下是一个简单的 CSS 示例，展示了使用 Sublime CSS3 插件可以提升的编写体验：




/* 使用 Sublime CSS3 插件的自动完成功能 */
.selector {
    display: -webkit-flex; /* Chrome, Safari, 等使用 Webkit 引擎的浏览器 */
    display: flex;         /* 标准的 CSS 显示为 flexbox 布局 */
    align-items: center;   /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

在编写 CSS 代码时，Sublime CSS3 插件可以提供更加智能的代码自动完成，帮助开发者快速准确地编写 CSS 属性和值。此外，它还提供了代码片段（snippets）的功能，用户可以通过输入简写然后按 Tab 键来生成完整的代码块。

System

2024-08-17

所有,css3

在HTML5和CSS3的基础上，我们可以使用以下标签来创建列表、表格和表单，并对文本域和标签进行样式定制。

HTML部分：




<!DOCTYPE html>
<html>
<head>
    <title>前端开发基础</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <!-- 无序列表 -->
    <ul class="my-list">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
 
    <!-- 有序列表 -->
    <ol class="my-list">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ol>
 
    <!-- 表格 -->
    <table class="my-table">
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
        <tr>
            <td>单元格3</td>
            <td>单元格4</td>
        </tr>
    </table>
 
    <!-- 表单 -->
    <form action="">
        <!-- 文本域 -->
        <label for="my-text">输入你的名字:</label>
        <input type="text" id="my-text" name="username">
 
        <!-- 提交按钮 -->
        <input type="submit" value="提交">
    </form>
</body>
</html>

CSS部分：




/* style.css */
.my-list {
    list-style-type: square; /* 实现自定义列表样式 */
}
 
.my-table {
    border-collapse: collapse; /* 实现表格的边框合并 */
    width: 100%;
}
 
.my-table th, .my-table td {
    border: 1px solid #ddd; /* 实现单元格边框样式 */
    padding: 8px;
}
 
.my-table tr:nth-child(even) {
    background-color: #f2f2f2; /* 实现行背景色的交替 */
}
 
.my-table tr:hover {
    background-color: #ddd; /* 鼠标悬浮行的背景色变化 */
}
 
input[type="submit"] {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}
 
input[type="submit"]:hover {
    background-color: #45a049;
}

以上代码实现了无序列表、有序列表、表格和表单的基本结构，并通过CSS为它们添加了基本样式。同时，文本域和提交按钮也被添加到表单中，并通过label标签关联，以提高表单的可访问性。

- 阅读更多 -

html结合css实现浏览器展示3D相册

System

2024-08-17

所有,css3




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D相册</title>
<style>
  .album {
    width: 400px;
    height: 400px;
    perspective: 600px;
    margin: 50px auto;
  }
  .album img {
    width: 100%;
    height: 100%;
    transform: translateZ(-1px);
    position: absolute;
    backface-visibility: hidden;
  }
  .album:hover img {
    transform: rotateY(360deg);
    transition: transform 10s ease-in-out;
  }
</style>
</head>
<body>
<div class="album">
  <img src="path_to_your_image_1.jpg" alt="Image 1">
  <img src="path_to_your_image_2.jpg" alt="Image 2">
  <img src="path_to_your_image_3.jpg" alt="Image 3">
  <!-- 更多图片 -->
</div>
</body>
</html>

这个简单的HTML和CSS代码示例展示了如何创建一个基本的3D相册。当鼠标悬停在相册容器上时，所有的图片会旋转一周。你需要替换src属性的值为你自己的图片路径。这个例子使用了transform和transition属性来实现动画效果，并且通过backface-visibility属性来确保在旋转时不会显示图片的背面。

- 阅读更多 -

手写轮播图(支持h5手指滑动切换)，可无缝滚动

System

2024-08-17

所有,css3

以下是一个简单的轮播图实现，支持H5中使用手指滑动切换图片，并且具有无缝滚动的效果。

HTML部分:




<div class="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active"><img src="image1.jpg"></div>
    <div class="carousel-item"><img src="image2.jpg"></div>
    <div class="carousel-item"><img src="image3.jpg"></div>
    <!-- 更多轮播项 -->
  </div>
  <div class="carousel-controls">
    <button class="carousel-control-prev">Previous</button>
    <button class="carousel-control-next">Next</button>
  </div>
</div>

CSS部分:




.carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
}
 
.carousel-inner {
  display: flex;
  width: 300%; /* 假设有三张图片，每张图片宽度100% */
  transition: transform 0.5s ease-in-out;
}
 
.carousel-item {
  flex: 1 0 auto;
  width: 100%;
}
 
.carousel-item img {
  width: 100%;
  height: auto;
}
 
.carousel-controls {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
 
.carousel-control-prev, .carousel-control-next {
  cursor: pointer;
}

JavaScript部分:




let carousel = document.querySelector('.carousel');
let inner = document.querySelector('.carousel-inner');
let items = document.querySelectorAll('.carousel-item');
let prevBtn = document.querySelector('.carousel-control-prev');
let nextBtn = document.querySelector('.carousel-control-next');
let currentIndex = 0;
 
function moveToSlide(direction) {
  let nextIndex = currentIndex + direction;
  if (nextIndex < 0) {
    nextIndex = items.length - 1;
  } else if (nextIndex >= items.length) {
    nextIndex = 0;
  }
  inner.style.transform = `translateX(${-nextIndex * 100}%)`;
  currentIndex = nextIndex;
}
 
prevBtn.addEventListener('click', function() {
  moveToSlide(-1);
});
 
nextBtn.addEventListener('click', function() {
  moveToSlide(1);
});
 
carousel.addEventListener('touchstart', function(e) {
  touchStartX = e.touches[0].clientX;
});
 
carousel.addEventListener('touchmove', function(e) {
  e.preventDefault(); // 防止页面滚动
  touchEndX = e.touches[0].clientX;
  if (touchEndX > touchStartX) {
    moveToSlide(-1); // 向左滑动
  } else {
    moveToSlide(1); // 向右滑动
  }
});
 
let touchStartX, touchEndX;

这段代

- 阅读更多 -

CSS3笔记之定位篇z-index

System

2024-08-17

所有,css3

在CSS中，z-index属性主要用于管理定位元素（即position属性值为relative、absolute、fixed或sticky的元素）的堆叠顺序。元素的z-index值越大，它就越位于顶层。

注意，z-index只能应用于相对定位的元素，即position属性值为relative、absolute、fixed或sticky的元素。此外，每个元素都有一个默认的z-index值，通常是0，除非它是一个 positioned元素，在这种情况下，它的默认值是auto。

以下是一些使用z-index的示例：




/* 示例1 */
.first-element {
  position: relative;
  z-index: 10;
}
 
.second-element {
  position: relative;
  z-index: 5;
}
 
/* 示例2 */
.container {
  position: relative;
}
 
.first-child {
  position: absolute;
  z-index: 10;
}
 
.second-child {
  position: absolute;
  z-index: 20;
}
 
/* 示例3 */
.overlay {
  position: fixed;
  z-index: 1000;
}

在示例1中，即使.second-element在HTML结构中先定义，由于其z-index值小于.first-element，因此.first-element将显示在.second-element之上。

在示例2中，即使.first-child在HTML结构中先定义，由于.second-child的z-index值大于.first-child，.second-child将显示在.first-child之上。

在示例3中，.overlay拥有较高的z-index值，因此即使它不是最后定义的元素，它也会显示在其他元素之上。

请注意，z-index只在父元素的z-index值都相同的情况下才会发挥作用。如果父元素的z-index值较高，则子元素无论z-index设置多高都无法显示在其父元素之上。

- 阅读更多 -