标签 css 下的文章

2024-08-13

以下是一个简单的HTML和CSS代码示例，展示如何使用HTML5和CSS3创建一个3D呈现的商品信息卡片：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Product Card</title>
<style>
  .product-card {
    width: 200px;
    height: 260px;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    perspective: 1000px;
  }
 
  .product-card .face {
    position: relative;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: transform 0.6s;
  }
 
  .product-card .face.back {
    transform: rotateY(180deg);
    background-color: #f8f8f8;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #333;
  }
 
  .product-card .face.front {
    background-color: #f0f0f0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
  }
 
  .product-card .face.front img {
    width: 100%;
    height: 150px;
    object-fit: cover;
  }
 
  .product-card .face.front .info {
    padding: 10px;
  }
 
  .product-card:hover .face {
    transform: rotateY(180deg);
  }
</style>
</head>
<body>
 
<div class="product-card">
  <div class="face front">
    <img src="product-image.jpg" alt="Product Image">
    <div class="info">
      <p>Product Name</p>
      <p>$99.99</p>
    </div>
  </div>
  <div class="face back">
    Description of the product goes here.
  </div>
</div>
 
</body>
</html>

这个示例使用了CSS3的perspective和transform属性来创建3D效果，并使用:hover伪类来触发卡片翻转的动画。这个简单的3D卡片可以作为学习如何制作类似效果的起点。

- 阅读更多 -

CSS左右摆动动效

System

2024-08-13

所有,css3

要实现一个简单的CSS左右摆动动效，可以使用@keyframes规则来定义动画，并使用animation属性应用到元素上。以下是一个实现左右摆动效果的例子：




/* 定义动画 */
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}
 
/* 应用动画 */
.slider {
  animation: slide 1s infinite alternate;
}




<!-- 应用动画的HTML元素 -->
<div class="slider">我将会左右摆动！</div>

在这个例子中，.slider类定义了一个动画，名为slide，它将元素从当前位置向右移动100像素，动画持续时间为1秒，并且设置为无限次数循环（infinite），且每次动画完成后都会反向播放（alternate）。

- 阅读更多 -

如何使用 CSS 中的边距（margin）属性来定义元素在网页中的边距

System

2024-08-13

所有,css3

CSS 的 margin 属性用于在元素周围创建空间，也就是定义元素与其他元素之间的距离。margin 属性可以使用四个值来分别指定元素的上、右、下、左边距，也可以使用两个值指定上下和左右的边距，或者使用一个值指定所有四个方向的边距。

CSS 代码示例：




/* 四个值语法: 上 右 下 左 */
element {
  margin: 10px 20px 15px 25px;
}
 
/* 两个值语法: 上下 左右 */
element {
  margin: 10px 20px;
}
 
/* 一个值语法: 所有四个方向的边距 */
element {
  margin: 10px;
}
 
/* 单边距语法: 上 右 下 左 */
element {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 15px;
  margin-left: 25px;
}

在 HTML 中使用：




<!DOCTYPE html>
<html>
<head>
<style>
  .margin-example {
    margin: 20px; /* 设置元素的边距为20px */
    background-color: lightblue; /* 设置背景颜色 */
    padding: 20px; /* 设置内边距 */
  }
</style>
</head>
<body>
 
<div class="margin-example">
  这是一个有边距的元素。
</div>
 
</body>
</html>

在这个例子中，.margin-example 类定义了一个 20px 的边距，将 div 元素与其它元素区分开来。

- 阅读更多 -

Css3中如何使用媒体查询？响应式布局如何实现

System

2024-08-13

所有,css3

媒体查询（Media Queries）是CSS3的一个功能，可以根据不同的设备特性如屏幕尺寸、分辨率等来应用不同的样式规则。使用媒体查询可以创建响应式布局，使得网页在不同设备上都能显示良好。

下面是一个简单的媒体查询示例，它会在屏幕宽度小于600px时应用样式规则：




/* 默认样式 */
body {
  background-color: lightblue;
}
 
/* 媒体查询：当屏幕宽度小于600px时 */
@media screen and (max-width: 600px) {
  body {
    background-color: yellow;
  }
}

响应式布局实现的关键是使用媒体查询和CSS的弹性盒子（Flexbox）或者网格（Grid）系统。下面是一个使用Flexbox的响应式布局示例：




/* 基本布局 */
.container {
  display: flex;
}
 
/* 默认情况下，所有子元素均等分配空间 */
.item {
  flex: 1;
  padding: 10px;
}
 
/* 在屏幕宽度小于600px时，子元素不均等分配空间，第一个占一半，第二个占全部 */
@media screen and (max-width: 600px) {
  .item:first-child {
    flex: 1;
  }
 
  .item:last-child {
    flex: 2;
  }
}

HTML结构：




<div class="container">
  <div class="item">第一个项目</div>
  <div class="item">第二个项目</div>
</div>

在这个例子中，.container 是一个弹性容器，.item 是其子元素。在屏幕宽度大于600px时，所有子元素平均分配容器空间，而当屏幕宽度小于600px时，第一个子元素占一半，第二个子元素占全部。这样就实现了响应式布局。

- 阅读更多 -

CSS实现div滑入效果

System

2024-08-13

所有,css3

要使用CSS实现div滑入效果，可以使用transition属性来平滑过渡效果，并结合:hover伪类来实现鼠标悬停时的效果。以下是一个简单的例子，演示了如何使用CSS创建一个当鼠标悬停时水平滑入的效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div Slide In Effect</title>
<style>
  .slide-in {
    width: 100px;
    height: 100px;
    background-color: #f00;
    transition: transform 0.5s; /* 设置过渡效果 */
    transform: translateX(-100%); /* 初始状态向左滑出 */
  }
 
  .slide-in:hover {
    transform: translateX(0); /* 鼠标悬停时向右滑入 */
  }
</style>
</head>
<body>
 
<div class="slide-in"></div>
 
</body>
</html>

在这个例子中，.slide-in 类定义了一个方块的基本样式，并设置了一个向左的初始变换（translateX(-100%)），使得这个方块在没有鼠标悬停时隐藏在视图左侧。当鼠标悬停在这个div上时，transform 属性通过 :hover 伪类被改变，使得方块向右滑入视图。transition 属性定义了这个变换应该有一个0.5秒的过渡效果。

- 阅读更多 -

JS特效第148弹：html5 css3圆形进度条倒计时页面跳转代码

System

2024-08-13

所有,css3

以下是一个简化的HTML和JavaScript代码示例，用于创建一个圆形进度条并在倒计时结束时跳转到指定页面。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆形进度条倒计时</title>
<style>
  .circle-timer {
    width: 100px;
    height: 100px;
    position: relative;
    border-radius: 50%;
    background: conic-gradient(#4db8ff 0%, #f9f900 50%, #ff3c5c 100%);
    text-align: center;
    line-height: 100px;
    font-size: 20px;
    font-weight: bold;
    color: white;
  }
</style>
</head>
<body>
<div id="timer" class="circle-timer">10</div>
 
<script>
function startTimer(duration, display) {
  var timer = duration, minutes, seconds;
  var interval = setInterval(function () {
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10);
 
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
 
    display.textContent = minutes + ":" + seconds;
 
    if (--timer < 0) {
      clearInterval(interval);
      window.location.href = "https://www.example.com"; // 指定跳转的URL
    }
  }, 1000);
}
 
window.onload = function () {
  var timeLeft = 10 * 60,
    display = document.querySelector('#timer');
  startTimer(timeLeft, display);
};
</script>
</body>
</html>

这段代码实现了一个简单的圆形进度条，通过conic-gradient创建颜色渐变，并在倒计时结束时使用window.location.href跳转到指定的页面。你可以根据需要调整倒计时时间和目标页面的URL。

- 阅读更多 -

自适应布局使用CSS3缩放实现(Vue)

System

2024-08-13

所有,css3




<template>
  <div class="container">
    <div class="box" v-for="(item, index) in items" :key="index">
      <div class="box-content" :style="{ '--scale': item.scale }">
        <!-- 内容 -->
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: [
        { scale: 1 },
        { scale: 0.8 },
        { scale: 0.6 },
        // ...更多项
      ]
    };
  }
};
</script>
 
<style scoped>
.container {
  display: flex;
  justify-content: space-around;
}
 
.box {
  transform: translateZ(0);
}
 
.box-content {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transition: transform 0.3s ease-in-out;
  transform: scale(var(--scale)); /* 使用CSS变量应用缩放 */
}
</style>

这个简单的Vue示例展示了如何使用CSS变量和CSS3的transform属性来实现自适应布局和缩放效果。items数组中的每个对象包含一个scale属性，该属性被用作CSS变量--scale的值，并应用于每个.box-content元素。这允许每个盒子有不同的缩放级别，从而实现自适应布局。

- 阅读更多 -

css绘制3D炫动ikun

System

2024-08-13

所有,css3

要使用CSS绘制一个3D炫动的iKun，你需要使用CSS3的transform属性来创建3D效果，并使用@keyframes动画来实现动态效果。以下是一个简单的例子：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Cube</title>
<style>
  .ikun {
    width: 100px;
    height: 100px;
    margin: 50px;
    transform-style: preserve-3d;
    animation: rotate 5s infinite linear;
  }
 
  .ikun div {
    position: absolute;
    width: 100px;
    height: 100px;
    background: red;
    opacity: 0.5;
  }
 
  .ikun div:nth-child(1) {
    transform: translateZ(50px);
  }
 
  .ikun div:nth-child(2) {
    background: green;
    transform: rotateX(90deg) translateZ(50px);
  }
 
  .ikun div:nth-child(3) {
    background: blue;
    transform: rotateY(90deg) translateZ(50px);
  }
 
  .ikun div:nth-child(4) {
    background: yellow;
    transform: rotateX(90deg) rotateY(90deg) translateZ(50px);
  }
 
  .ikun div:nth-child(5) {
    background: cyan;
    transform: rotateY(180deg) translateZ(50px);
  }
 
  .ikun div:nth-child(6) {
    background: magenta;
    transform: rotateX(90deg) rotateY(-90deg) translateZ(50px);
  }
 
  @keyframes rotate {
    0% {
      transform: rotateX(0deg) rotateY(0deg);
    }
    100% {
      transform: rotateX(360deg) rotateY(360deg);
    }
  }
</style>
</head>
<body>
<div class="ikun">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
</body>
</html>

这段代码创建了一个立方体，每个面都有不同的颜色，并且通过CSS动画不断旋转。你可以根据需要调整.ikun的大小和.ikun div的颜色和尺寸来创建一个符合你需求的iKun。

- 阅读更多 -

CSS定位布局详解

System

2024-08-13

所有,css3

CSS定位布局主要是通过position属性来实现的，它有四个值：static、relative、absolute和fixed。

static：默认值，没有定位，元素出现在正常的流中。
relative：相对于其正常位置进行定位。
absolute：相对于最近的非static定位的父元素进行定位。
fixed：相对于浏览器窗口进行定位。

实例代码：




<!DOCTYPE html>
<html>
<head>
<style>
  .static {
    position: static; /* 默认位置 */
    left: 50px; /* 左侧偏移50px */
    top: 20px; /* 顶部偏移20px */
  }
  
  .relative {
    position: relative; /* 相对于正常位置定位 */
    left: 40px; /* 左侧偏移40px */
    top: 10px; /* 顶部偏移10px */
  }
  
  .absolute {
    position: absolute; /* 相对于最近的非static定位父元素定位 */
    left: 30px; /* 左侧偏移30px */
    top: 5px; /* 顶部偏移5px */
  }
  
  .fixed {
    position: fixed; /* 相对于浏览器窗口定位 */
    right: 20px; /* 右侧偏移20px */
    bottom: 15px; /* 底部偏移15px */
  }
  
  .parent {
    position: relative; /* 设置为relative以便于absolute定位 */
    width: 300px; /* 设置宽度 */
    height: 200px; /* 设置高度 */
    background-color: #f0f0f0; /* 背景颜色 */
    border: 2px solid #000; /* 边框 */
  }
</style>
</head>
<body>
 
<div class="parent">
  <div class="static">Static</div>
  <div class="relative">Relative</div>
  <div class="absolute">Absolute</div>
  <div class="fixed">Fixed</div>
</div>
 
</body>
</html>

在这个例子中，.parent是一个相对定位的容器，其四个子元素分别使用不同的定位方式。.static是默认定位，.relative、.absolute和.fixed都是相对定位，.absolute的偏移是相对于.parent的。.fixed是相对于浏览器窗口的固定定位。

- 阅读更多 -

在 CSS 中设置 cellpadding 和 cellspacing？

System

2024-08-13

所有,css3

在 CSS 中，没有直接的属性可以设置 cellpadding 和 cellspacing，这两个属性是属于 HTML 表格的，是在 HTML 标签内部使用的。在 CSS 中，我们可以使用 padding 和 border 属性来设置单元格的内边距和边框，从而达到类似 cellpadding 和 cellspacing 的效果。

解决方案一：

HTML:




<table class="table-class">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

CSS:




.table-class {
  border-collapse: collapse; /* 移除单元格间的距离 */
}
 
.table-class td {
  padding: 10px; /* 设置单元格内边距 */
  border: 1px solid black; /* 设置单元格边框 */
}

解决方案二：

HTML:




<table class="table-class">
  <tr>
    <td class="td-class">Cell 1</td>
    <td class="td-class">Cell 2</td>
  </tr>
</table>

CSS:




.table-class {
  border-collapse: collapse; /* 移除单元格间的距离 */
}
 
.td-class {
  padding: 10px; /* 设置单元格内边距 */
  border: 1px solid black; /* 设置单元格边框 */
}

在上述代码中，border-collapse: collapse; 是用来移除表格单元格之间的默认间距（即 cellspacing），padding 和 border 是用来设置单元格的内边距和边框（即 cellpadding）。

注意：在实际开发中，我们通常会使用第一种方法，因为这样可以减少 CSS 的代码量，并且使得每个单元格都有相同的样式。

- 阅读更多 -