标签 css3 下的文章

2024-08-12

CSS3中新增了一些背景相关的属性，以下是一些常见的新增背景属性及其使用示例：

background-size: 可以指定背景图片的大小，可以设置为具体的宽高值或者使用诸如cover和contain这样的关键字。




/* 指定背景图片的大小 */
div {
  background-image: url('image.jpg');
  background-size: 150px 100px; /* 宽度150px，高度100px */
}
 
/* 使用关键字cover使背景图片覆盖整个元素，可能会被裁剪 */
div {
  background-image: url('image.jpg');
  background-size: cover;
}
 
/* 使用关键字contain使背景图片缩放到适合元素尺寸的最大尺寸，无裁剪 */
div {
  background-image: url('image.jpg');
  background-size: contain;
}

background-origin: 可以指定背景图片的起始位置，可以设置为border-box, padding-box, 或者content-box。




/* 背景图片的起始位置在边框盒 */
div {
  background-image: url('image.jpg');
  background-origin: border-box;
}
 
/* 背景图片的起始位置在内填充盒 */
div {
  background-image: url('image.jpg');
  background-origin: padding-box;
}
 
/* 背景图片的起始位置在内容盒 */
div {
  background-image: url('image.jpg');
  background-origin: content-box;
}

background-clip: 可以指定背景的裁剪区域，同样可以设置为border-box, padding-box, 或者content-box。




/* 背景裁剪在边框盒之外 */
div {
  background-color: red;
  background-clip: border-box;
}
 
/* 背景裁剪在内填充盒之外 */
div {
  background-color: red;
  background-clip: padding-box;
}
 
/* 背景裁剪在内容盒之外 */
div {
  background-color: red;
  background-clip: content-box;
}

background-break: 用于控制背景图片的行为，当内容宽度超过视口时。




/* 背景图片在内容宽度超过视口时不会重复 */
div {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-break: clone;
}

background-attachment: 可以设置背景是否随页面滚动。




/* 背景固定，不随页面滚动 */
div {
  background-image: url('image.jpg');
  background-attachment: fixed;
}
 
/* 背景相对于元素固定，不随元素滚动 */
div {
  background-image: url('image.jpg');
  background-attachment: local;
}

background-repeat: 可以设置背景图片的重复方式。




/* 背景图片不重复 */
div {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
}
 
/* 背景图片横向重复 */
div {
  background-image: url('image.jpg');
  background-repeat: repeat-x;
}
 
/* 背景图片纵向重复 */
div {
  background-image: url('image.jpg');
  background-repeat: repeat-y;
}
 
/* 背景图片在水平方向和垂直方向上都重复 */
div {
  background-image

- 阅读更多 -

深入解析CSS3 @font-face 规则：自定义与网络字体全面指南

System

2024-08-12

所有,css3




/* 定义自定义字体，指定字体文件的URL */
@font-face {
  font-family: 'MyCustomFont';
  src: url('./path/to/my-custom-font.woff2') format('woff2'), /* 最优先级 */
       url('./path/to/my-custom-font.woff') format('woff'),   /* 次优先级 */
       url('./path/to/my-custom-font.ttf') format('truetype'); /* 最后的备选方案 */
}
 
/* 应用自定义字体 */
body {
  font-family: 'MyCustomFont', sans-serif;
}

这段代码展示了如何使用@font-face规则来定义一个自定义字体，并指定了不同格式的字体文件作为备选方案。这样用户的浏览器会自动选择支持的格式进行加载。同时，示例中展示了如何在body标签上应用这个自定义字体，并提供了sans-serif作为备用字体。这是一个简单而实用的自定义字体使用案例。

- 阅读更多 -

前端基础-HTML5CSS3提高第七天

System

2024-08-12

所有,css3

在HTML5和CSS3的基础上，我们可以创建一个简单的网页布局，包含导航栏、主内容区域和页脚。以下是一个示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Page Layout</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }
 
  header, footer {
    background-color: #f2f2f2;
    padding: 10px 0;
    text-align: center;
  }
 
  nav {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    display: flex;
  }
 
  nav a {
    color: white;
    text-decoration: none;
    padding: 0 15px;
  }
 
  main {
    flex: 1;
    padding: 20px;
  }
 
  section {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
  }
 
  footer {
    margin-top: auto;
  }
</style>
</head>
<body>
 
<header>
  <h1>Simple Layout Example</h1>
</header>
 
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>
 
<main>
  <section>
    <h2>Section Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  </section>
  <!-- More sections as needed -->
</main>
 
<footer>
  <p>Copyright &copy; 2023 Your Company</p>
</footer>
 
</body>
</html>

这个示例展示了如何使用CSS Flexbox布局来创建一个简洁而有效的网页结构。header 用于顶部信息，nav 用于导航链接，main 用于主要内容，而 footer 用于底部信息。通过这样的布局，我们可以快速搭建一个有组织的页面框架。

- 阅读更多 -

CSS3D旋转木马效果+图片倒影特效，web前端开发初级

System

2024-08-12

所有,css

以下是一个简单的3D旋转木马效果和图片倒影特效的示例代码。这个示例使用了HTML和CSS来实现。

HTML部分:




<div class="carousel">
  <div class="carousel-item">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="carousel-item">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="carousel-item">
    <img src="image3.jpg" alt="Image 3">
  </div>
</div>

CSS部分:




.carousel {
  perspective: 600px;
  position: relative;
  width: 300px;
  height: 200px;
  margin: 50px auto;
}
 
.carousel-item {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 1s;
}
 
.carousel-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
 
.carousel-item:nth-child(n+2) {
  transform: rotateY(90deg) translateZ(-250px);
}
 
.carousel:hover .carousel-item {
  transform: rotateY(calc(90deg * ((var(--index) - 1) + (var(--mouse-position) - 1) * 0.25))) translateZ(calc(-250px * (var(--mouse-position) - 1)));
}

在这个例子中，.carousel 是旋转木马的容器，.carousel-item 是每张图片的容器。图片使用了 object-fit: cover; 来保持其宽高比，并且使用了阴影来创建倒影效果。

鼠标悬停时，每个 .carousel-item 会根据 --index 和 --mouse-position 两个变量（需要通过JavaScript来赋值）进行3D旋转。这里的旋转计算是示例性质的，实际情况可能需要更复杂的数学计算和逻辑判断。

请注意，这个示例并不完整，因为它缺少对 --index 和 --mouse-position 变量的赋值逻辑。实际应用中，你需要使用JavaScript来跟踪鼠标位置，并相应地更新这些变量，从而实现动态的旋转效果。

- 阅读更多 -

JS特效第107弹：jQuery+css3相册图片叠加堆放展开动画特效

System

2024-08-12

所有,css3

以下是一个使用jQuery和CSS3创建相册图片叠加堆放展开动画的示例代码：

HTML部分：




<div id="gallery">
  <div class="item">
    <img src="image1.jpg" alt="Image 1">
    <div class="overlay"></div>
  </div>
  <!-- 其他图片项 -->
</div>

CSS部分：




#gallery .item {
  position: relative;
  width: 200px;
  height: 200px;
  float: left;
  margin: 10px;
  overflow: hidden;
}
 
#gallery .item img {
  width: 100%;
  height: auto;
  transition: transform 0.5s ease-in-out;
}
 
#gallery .item .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  transform: translateY(100%);
}
 
/* 其他样式 */

jQuery部分：




$(document).ready(function() {
  $('#gallery .item').hover(function() {
    // 鼠标悬停时
    $(this).find('img').css({
      transform: 'scale(1.1)'
    });
    $(this).find('.overlay').css({
      opacity: 1,
      transform: 'translateY(0)'
    });
  }, function() {
    // 鼠标移出时
    $(this).find('img').css({
      transform: 'scale(1)'
    });
    $(this).find('.overlay').css({
      opacity: 0,
      transform: 'translateY(100%)'
    });
  });
});

这段代码实现了当鼠标悬停在相册图片上时，图片会缩放并且叠加层会由上向下展开的堆放开展动画效果。鼠标移出时，动画效果逆向播放，恢复到原始状态。这是一个典型的利用CSS3的transform和transition属性制作的动画效果。

- 阅读更多 -

css3关键帧动画

System

2024-08-12

所有,css3

CSS3关键帧动画可以使用@keyframes规则来创建。关键帧动画是将动画分解为一系列的关键帧，然后将每个关键帧的样式用百分比来表示（如0%、25%、50%、75%、100%）。在每个关键帧上，可以指定元素的样式。

以下是一个简单的例子，创建一个动画让一个元素的背景颜色从红色渐变到蓝色：




@keyframes colorChange {
  0% {
    background-color: red;
  }
  100% {
    background-color: blue;
  }
}
 
.animated-box {
  width: 100px;
  height: 100px;
  animation: colorChange 2s infinite alternate;
}

在这个例子中，.animated-box 类定义了一个动画，名为 colorChange，持续时间为2秒，并且设置为无限次循环，且每次循环方向交替（alternate）。

@keyframes colorChange 规则定义了动画的关键帧。0% 表示动画的开始，100% 表示动画的结束。在每个百分比的状态下，我们设置了不同的 background-color 属性。

System

2024-08-12

所有,css3




/* 使用 CSS3 2D 转换的 rotate 函数，绘制一个等边三角形 */
.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 86.6px solid #2ecc71;
  position: relative;
  top: -50px;
}
 
/* 使用 CSS3 2D 转换的 rotate 函数，将三角形旋转为一个正方形 */
.triangle-rotate {
  transform: rotate(45deg);
  animation: rotate-triangle 5s infinite linear;
}
 
/* 创建一个无限循环的动画，持续旋转正方形 */
@keyframes rotate-triangle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

这段代码定义了一个 .triangle 类，用于创建一个等边三角形。然后定义了一个 .triangle-rotate 类，该类使用 CSS3 的 transform 属性和 rotate 函数将等边三角形旋转为正方形，并且使用 @keyframes 创建了一个无限循环的动画，使得正方形可以持续旋转。这个示例展示了如何使用 CSS3 的 2D 转换和动画来创建动态的图形效果。

- 阅读更多 -

前端学习第一阶段：第六章 HTML和CSS3

System

2024-08-12

所有,css3

第六章的主题是HTML和CSS。以下是一些关键概念和示例代码：

HTML基础：
- 学习创建基本的HTML页面结构。
- 使用div、span和p标签来构建页面布局。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <div>
        这是一个div元素。
    </div>
    <span>
        这是一个span元素。
    </span>
    <p>
        这是一个段落。
    </p>
</body>
</html>

CSS基础：
- 学习如何使用CSS为HTML元素添加样式。
- 使用class和id选择器来定义样式。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS示例</title>
    <style>
        .my-style {
            color: blue;
            font-size: 20px;
        }
        #my-id {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p class="my-style">这是一个蓝色字体的段落。</p>
    <p id="my-id">这是一个加粗且红色的文本。</p>
</body>
</html>

CSS3特效：
- 学习CSS3提供的特效，比如渐变、边框、阴影等。




/* CSS3 渐变效果 */
.gradient-background {
    background: linear-gradient(to right, red, yellow);
}
 
/* CSS3 边框效果 */
.border-radius {
    border: 2px solid black;
    border-radius: 5px;
}
 
/* CSS3 阴影效果 */
.box-shadow {
    box-shadow: 5px 5px 10px grey;
}

实践：创建一个简单的带有CSS样式的网页。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实践示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        header {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            text-align: center;
        }
        nav {
            float: left;
            width: 20%;
            background: #f2f2f2;
            padding: 15px;
        }
        section {
            float: right;
            width: 80%;
            padding: 15px;
        }
        footer {
            clear: both;
            text-align: center;
            padding: 10px;
            background-color: #ddd;
        }
    </style>
</head>
<body>
 
<header>
    <h1>我的网站</h1>
</header>
 
<nav>
    <ul>
        <li><a href="#">主页</a></li>
        <li><a href="#">联系</a></li>
        <li><a href="#">关于</a></li>
    </ul>
</nav>
 
<section>
    <h2>主要内容</h2>
    <p>这里是主要内容...</p>
</section>
 
<footer>
    <p>版权所有 &copy; 2023</p>
</footer>
 
</

- 阅读更多 -

CSS基础-CSS3过渡与动画

System

2024-08-12

所有,css3




/* 定义一个简单的过渡效果 */
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 1s; /* 当宽度改变时，过渡效果在1秒内完成 */
}
 
.box:hover {
  width: 200px; /* 鼠标悬停时宽度变为200px */
}
 
/* 使用关键帧定义复杂动画 */
@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}
 
/* 应用动画到元素 */
.animated-box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example; /* 指定动画名称 */
  animation-duration: 4s; /* 动画周期为4秒 */
  animation-iteration-count: infinite; /* 动画无限次数播放 */
}

这段代码展示了如何使用CSS3的过渡和动画效果。.box类定义了一个当宽度改变时触发的过渡效果，而.animated-box类则使用了@keyframes规则来定义了一个从红色到黄色的背景色变化动画，并将其应用到该类的元素上。

- 阅读更多 -

css3过渡

System

2024-08-12

所有,css3

CSS3过渡是一个强大的工具，可以让网页设计师创建动态效果，而无需使用Flash或JavaScript。要使用CSS3过渡，你需要指定要过渡的CSS属性，过渡的持续时间，以及时间函数。

以下是一些使用CSS3过渡的方法：

使用hover效果：

HTML:




<div class="box"></div>

CSS:




.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s;
}
 
.box:hover {
  width: 200px;
}

在这个例子中，当鼠标悬停在div上时，宽度会在一秒钟内从100px变为200px。

使用JavaScript触发过渡：

HTML:




<div id="box" class="box"></div>
<button onclick="change()">Change</button>

CSS:




.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s;
}

JavaScript:




function change() {
  document.getElementById('box').style.width = '200px';
}

在这个例子中，当按钮被点击时，宽度会在一秒钟内从100px变为200px。

使用多个属性的过渡效果：

HTML:




<div id="box" class="box"></div>
<button onclick="change()">Change</button>

CSS:




.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s, height 1s, background-color 1s;
}

JavaScript:




function change() {
  document.getElementById('box').style.width = '200px';
  document.getElementById('box').style.height = '200px';
  document.getElementById('box').style.backgroundColor = 'blue';
}

在这个例子中，当按钮被点击时，宽度、高度和背景颜色会在一秒钟内改变。

注意：过渡效果可以应用于任何可以动态更改的CSS属性。但并非所有的属性都会产生良好的视觉效果，例如，display 或 opacity 属性的变化通常会产生最佳的视觉效果。

- 阅读更多 -