分类 css3 下的文章

html制作小猪佩奇卡通图案代码,使用HTML和CSS3绘制基本卡通图案的示例分享

2024-08-18




<!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设置多高都无法显示在其父元素之上。

- 阅读更多 -

css 排行榜动画，排序动画，横向，竖向，网格

System

2024-08-17

所有,css3

要创建一个排行榜的动画，你可以使用CSS的@keyframes规则来定义动画，并使用JavaScript来动态更新排行榜数据。以下是一个简单的例子，演示了如何创建一个横向的排行榜动画。

HTML:




<div class="leaderboard">
  <div class="leader">
    <span class="rank">1</span>
    <span class="name">Player 1</span>
    <span class="score">100</span>
  </div>
  <!-- 更多排行榜数据 -->
</div>

CSS:




.leaderboard {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
 
.leader {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 5px;
  padding: 10px;
  background-color: #f0f0f0;
  transition: all 0.3s ease;
}
 
.rank {
  min-width: 20px;
  color: #333;
  font-weight: bold;
}
 
.name {
  min-width: 100px;
  color: #555;
}
 
.score {
  min-width: 50px;
  color: #777;
  font-weight: bold;
}
 
/* 动画 */
@keyframes rankAnimation {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
 
.leader.animate {
  animation: rankAnimation 0.5s ease forwards;
}

JavaScript:




// 假设你有一个包含排行榜数据的数组
const rankings = [
  { name: 'Player 1', score: 100 },
  // 更多...
];
 
// 更新排行榜函数
function updateLeaderboard(rankings) {
  const leaderboard = document.querySelector('.leaderboard');
  leaderboard.innerHTML = ''; // 清空原有内容
 
  rankings.forEach((ranking, index) => {
    const leader = document.createElement('div');
    leader.classList.add('leader');
    if (index === 0) {
      leader.classList.add('animate'); // 为第一名添加动画
    }
 
    leader.innerHTML = `
      <span class="rank">${index + 1}</span>
      <span class="name">${ranking.name}</span>
      <span class="score">${ranking.score}</span>
    `;
 
    leaderboard.appendChild(leader);
  });
}
 
// 使用setInterval模拟排行榜数据更新
setInterval(() => {
  // 更新数据...
  updateLeaderboard(rankings);
}, 5000);

这个例子中，.leaderboard是排行榜容器，.leader是每个排行榜项的容器。.animate类是被添加到第一名的项目上，以便为其提供动画效果。@keyframes rankAnimation定义了一个动画，它将项目从屏幕外向内移动并逐渐变为可见。updateLeaderboard函数用于更新排行榜数据，并可以被定期调用来模拟实时更新。

- 阅读更多 -

小按钮大宇宙，分享几个宇宙风格的按钮动效，让你爱上CSS

System

2024-08-17

所有,css3

在这里，我将提供两个简单而又炫目的CSS按钮动效，它们都是以宇宙风格设计的。

星辰飘落的按钮:

HTML:




<button class="star-button">点击我</button>

CSS:




.star-button {
  border: none;
  background: none;
  position: relative;
  outline: none;
  font-size: 20px;
  color: #FFF;
  cursor: pointer;
  padding: 10px 20px;
  overflow: hidden;
  box-sizing: border-box;
}
 
.star-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  background: #F7D674;
  border-radius: 50%;
  opacity: 0;
  animation: star-animation 2s infinite;
}
 
.star-button:hover::after {
  animation: none;
}
 
@keyframes star-animation {
  0% {
    transform: translate(-50%, -100%) rotate(0deg);
    opacity: 1;
    width: 0;
    height: 0;
  }
  100% {
    transform: translate(-50%, 0) rotate(720deg);
    opacity: 0;
    width: 1000px;
    height: 1000px;
  }
}

火焰般的按钮:

HTML:




<button class="flame-button">点击我</button>

CSS:




.flame-button {
  position: relative;
  background: #f7d674;
  border: none;
  padding: 10px 20px;
  outline: none;
  font-size: 20px;
  color: #FFF;
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
}
 
.flame-button::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  background: #F7D674;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 50%;
  animation: flame-animation 2s infinite;
}
 
.flame-button:hover::before {
  animation: none;
}
 
@keyframes flame-animation {
  0% {
    transform: translate(-50%, 100%) rotate(0deg);
    opacity: 1;
    width: 0;
    height: 0;
  }
  100% {
    transform: translate(-50%, 0) rotate(720deg);
    opacity: 0;
    width: 1000px;
    height: 1000px;
  }
}

这两个按钮动效都是通过CSS的@keyframes规则和animation属性实现的，它们都包含一个动画，在鼠标悬停时停止动画，给用户一个静态的按钮感觉。这种设计模仿了单一按钮在不同状态下的不同视觉效果，体现了CSS的灵活性和强大功能。

- 阅读更多 -