标签 css 下的文章

2024-08-23

CSS3是CSS（层叠样式表）的一个版本，引入了许多新特性，包括选择器、背景和边框的新属性、文字效果、过渡和动画等。以下是一些CSS3的新增样式示例：

圆角（border-radius）：




div {
  border: 2px solid #a1a1a1;
  border-radius: 25px; /* 圆角的半径 */
}

阴影（box-shadow）：




div {
  box-shadow: 10px 10px 5px #888888; /* 水平偏移 垂直偏移 模糊半径 颜色 */
}

渐变（gradient）：




div {
  background: linear-gradient(to right, red , yellow); /* 线性渐变 */
}

转换（transform）：




div:hover {
  transform: rotate(360deg); /* 旋转 */
}

动画（animation）：




@keyframes myAnimation {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
div {
  animation-name: myAnimation;
  animation-duration: 4s; /* 动画时长 */
  animation-iteration-count: infinite; /* 动画重复次数 */
}

伪元素（::before, ::after）：




div::before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background-color: blue;
}

这些只是CSS3功能的一小部分，还有许多其他的特性，如自定义动画、变换、过渡、媒体查询等。CSS3为网页设计提供了更多样化和动感的效果。

- 阅读更多 -

FE_CSS 页面布局之盒子模型边框 & 内外边距

System

2024-08-23

所有,css3




/* 设置盒子模型的边框样式 */
.box {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  border: 5px solid #000; /* 设置边框宽度为5px，样式为实线，颜色为黑色 */
  /* 设置盒子与其他元素的间距为10px */
  padding: 10px;
  margin: 10px;
}
 
/* 设置盒子模型的内外边距样式 */
.box-padding {
  padding: 20px; /* 内边距为20px */
}
 
.box-margin {
  margin: 20px; /* 外边距为20px */
}
 
/* 设置盒子模型的边框圆角样式 */
.box-border-radius {
  border-radius: 10px; /* 圆角半径为10px */
}

这段代码定义了一个.box类，它设置了盒子模型的宽度、高度、背景色和边框。同时，它还设置了盒子与其他元素之间的内边距和外边距。另外，.box-border-radius类用于设置边框的圆角样式，使盒子看起来更为圆润。这些样式可以直接应用于HTML中的任何元素，以实现基本的盒子模型布局。

- 阅读更多 -

css 实现文字智能适配背景

System

2024-08-23

所有,css3

要实现文字智能适配背景，可以使用CSS的background-clip属性和text-fill-color属性（仅限WebKit内核的浏览器，如Chrome和Safari）。以下是一个简单的例子：

HTML:




<div class="auto-background">智能适配背景</div>

CSS:




.auto-background {
  font-size: 60px;
  font-weight: bold;
  color: transparent;
  background: url('your-image.jpg'); /* 替换为你的图片路径 */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

这段代码会使得.auto-background元素的文字与背景图片完全匹配，从而实现文字与背景的智能适配。注意，-webkit-前缀是为了确保在WebKit内核的浏览器中兼容。如果需要在不支持-webkit-前缀的浏览器上实现类似效果，可能需要使用其他技术，如SVG或者Canvas。

System

2024-08-23

所有,css3




/* 设置根元素的字体大小，方便使用vh单位 */
:root {
  font-size: 16px;
}
 
/* 使用CSS变量和calc()函数来动态计算自定义UI的高度 */
.custom-ui {
  /* 设置最小高度为100px */
  min-height: 100px;
  
  /* 使用CSS变量来存储高度的基础系数 */
  --base-height-coefficient: 6; /* 可以根据实际需求调整这个系数 */
  
  /* 使用calc()函数结合变量和其他单位来动态计算自定义UI的高度 */
  height: calc(100px + var(--base-height-coefficient) * 1vh);
  
  /* 其他样式 */
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
}
 
/* 示例：如何使用.custom-ui类 */
<div class="custom-ui">
  <!-- 自定义内容 -->
</div>

这段代码定义了一个.custom-ui类，它可以被用来设置一个自定义UI的高度。通过结合CSS变量和calc()函数，开发者可以根据视口的高度动态调整元素的高度。这种方法提供了灵活性和可维护性，可以根据不同的设计需求进行调整。

- 阅读更多 -

前端原生 CSS 跑马灯效果，无限轮播（横竖版本，带渐变遮罩，简单实用）

System

2024-08-23

所有,css3

以下是一个使用原生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>
  .marquee {
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    padding: 10px;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1) 50%, rgba(255,255,255,0));
    background-size: 200% 100%;
    background-position: 0 0;
    animation: marquee 10s linear infinite;
  }
 
  @keyframes marquee {
    0% { background-position: 0 0; }
    100% { background-position: -100% 0; }
  }
</style>
</head>
<body>
 
<div class="marquee">
  这是一个带渐变遮罩的无限轮播跑马灯效果。你可以自定义文本内容，并调整CSS参数以适应不同的设计需求。
</div>
 
</body>
</html>

这段代码会创建一个带渐变遮罩的无限循环跑马灯效果。通过CSS @keyframes 规则，背景位置会持续从0变为-100%，实现不断循环滚动的效果。可以根据实际需求调整背景渐变的颜色和速度。

- 阅读更多 -

CSS3 多媒体查询、网格布局

System

2024-08-23

所有,css3

CSS3 多媒体查询可以用来根据屏幕宽度调整样式规则，而网格布局（Grid）则可以创建复杂的列和行。以下是一个简单的示例，展示了如何使用这两个功能：




/* 多媒体查询，当屏幕宽度小于600px时应用这些样式 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
 
/* 网格布局 */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建三个等宽的列 */
  grid-gap: 10px; /* 设置网格间隙 */
}
 
.item {
  background-color: coral;
  padding: 20px;
  text-align: center;
}

HTML 代码：




<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

这个例子中，.container 类使用了网格布局，.item 类则定义了网格中的项目。当屏幕宽度小于600px时，背景颜色会变成浅蓝色。这个例子演示了响应式设计的基本原理，并且展示了CSS网格布局的基本用法。

- 阅读更多 -

CSS2与CSS3布局方式比较

System

2024-08-23

所有,css3

CSS2和CSS3在布局方面的主要差异包括：

Flexbox: CSS3引入了Flexbox布局模块，它提供了一种更简单的方式来构建灵活的布局。

CSS2示例（不适用Flexbox）:




.container {
  display: flex; /* 启用Flexbox布局 */
}
 
.item {
  flex: 1; /* 分配空间 */
}

Grid: CSS Grid布局提供了一种更高级的布局方式，它允许你创建复杂的网格布局。

CSS2示例（不适用Grid）:




.container {
  display: grid; /* 启用Grid布局 */
  grid-template-columns: repeat(3, 1fr); /* 创建三个相等宽度的列 */
}
 
.item {
  grid-column: 1 / 3; /* 占据第一列到第二列的空间 */
}

多列布局: CSS3的多列布局可以用于创建文本的多列布局，适合于报纸或杂志的排版。

CSS2示例（不适用多列布局）:




.column-layout {
  column-count: 3; /* 指定列的数量 */
  column-gap: 20px; /* 指定列之间的间隔 */
}

变换: CSS3的变换可以用于创建2D和3D转换效果。

CSS2示例（不适用变换）:




.transform-box {
  transform: rotate(45deg); /* 旋转元素45度 */
}

动画和过渡: CSS3引入了动画和过渡特性，可以让元素的变化更加平滑。

CSS2示例（不适用动画和过渡）:




.animated-box {
  transition: all 0.3s ease-in-out; /* 平滑的过渡效果 */
}
 
.animated-box:hover {
  transform: scale(1.1); /* 鼠标悬停时放大元素 */
}

媒体查询: CSS3的媒体查询可以根据设备的屏幕大小和特性来应用不同的样式规则。

CSS2示例（不适用媒体查询）:




@media (max-width: 768px) {
  .column-layout {
    column-count: 1; /* 在小屏幕上只显示一列 */
  }
}

虽然CSS3提供了更多强大的布局工具，但CSS2仍然是所有现代浏览器的基础，并且在许多旧的或不支持CSS3的浏览器中依然被使用。选择使用哪种方法通常取决于你的项目需求和目标用户的浏览器兼容性。

- 阅读更多 -

css多行文本溢出显示省略号

System

2024-08-23

所有,css3

CSS可以使用以下属性来实现多行文本溢出显示省略号：

-webkit-line-clamp 属性：这个属性可以指定元素的最大行数。超过这个行数的文本会被截断，并显示省略号。
overflow 属性：需要设置为 hidden，以确保超出容器的文本会被截断。
text-overflow 属性：需要设置为 ellipsis，以显示省略号。

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




.ellipsis-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 这里的3表示最多显示3行 */
  overflow: hidden;
  text-overflow: ellipsis;
}

HTML部分：




<div class="ellipsis-multiline">
  这里是一段很长的文本，如果超过三行的话，后面的文本将会被截断并显示省略号。
</div>

注意：-webkit-line-clamp 属性是非标准属性，主要是WebKit内核浏览器支持的，所以在使用时需要考虑浏览器的兼容性。

- 阅读更多 -

这些css 动画效果你一定要收藏

System

2024-08-23

所有,css3

CSS 动画是一种让网页内容生动活泼的有效手段。以下是一些常见的 CSS 动画效果，它们可以应用在各种元素和场景中。

淡入淡出效果




.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

滑入滑出效果




.slide-enter-active, .slide-leave-active {
  transition: transform 0.3s;
}
.slide-enter-from, .slide-leave-to {
  transform: translateX(10px);
}

旋转加缩放效果




.rotate-scale-enter-active {
  transition: all 0.5s ease-in-out;
}
.rotate-scale-leave-active {
  transition: all 0.2s ease-in-out;
  position: absolute;
}
.rotate-scale-enter-from, .rotate-scale-leave-to {
  transform: scale(0) rotate(180deg);
}

渐变背景色效果




.color-change-enter-active, .color-change-leave-active {
  transition: background-color 0.5s;
}
.color-change-enter-from, .color-change-leave-to {
  background-color: #ff0000;
}

图片轮播效果




.carousel-enter-active, .carousel-leave-active {
  transition: all 1s;
}
.carousel-enter-from, .carousel-leave-to {
  transform: translateX(100px);
  opacity: 0;
}

这些 CSS 动画效果可以通过 Vue.js 或 React.js 等现代前端框架中的 <transition> 或 <animated> 组件来应用。

例如，在 Vue.js 中使用一个淡入淡出效果：




<template>
  <div id="app">
    <transition name="fade">
      <div v-if="show">Hello World!</div>
    </transition>
    <button @click="show = !show">Toggle</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>
 
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

以上代码中的 <transition name="fade"> 是关键部分，它会根据 show 数据属性的变化来应用淡入淡出动画。

- 阅读更多 -

vue+CSS3移动端App开发美团外卖平台系统项目1-2（实现首页展示）

System

2024-08-23

所有,css3




<template>
  <div class="home">
    <!-- 顶部导航栏 -->
    <div class="nav">
      <div class="nav-left">
        <img src="../assets/logo.png" alt="logo" />
        <span>美团外卖</span>
      </div>
      <div class="nav-right">
        <span>下单</span>
      </div>
    </div>
 
    <!-- 顶部banner -->
    <div class="banner">
      <img src="../assets/banner.jpg" alt="banner" />
    </div>
 
    <!-- 分类 -->
    <div class="category">
      <div class="category-item" v-for="(item, index) in categoryList" :key="index">
        <img :src="item.image" alt="category" />
        <span>{{ item.name }}</span>
      </div>
    </div>
 
    <!-- 特色推荐 -->
    <div class="special-recommend">
      <div class="sr-item" v-for="(item, index) in specialList" :key="index">
        <img :src="item.image" alt="special" />
        <div class="info">
          <span class="name">{{ item.name }}</span>
          <span class="desc">{{ item.desc }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'Home',
  data() {
    return {
      categoryList: [
        // ... 分类数据
      ],
      specialList: [
        // ... 特色推荐数据
      ],
    };
  },
  // 组件创建后的钩子函数
  created() {
    // 这里可以发起API请求获取数据
  },
};
</script>
 
<style lang="scss" scoped>
/* 这里是CSS样式代码，用于控制页面的布局和样式 */
</style>

这个代码实例展示了如何使用Vue组件结构来构建一个简单的移动端外卖平台首页。在data函数中定义了用于渲染的数据列表，并在created生命周期钩子中可以添加获取数据的逻辑。在template部分，使用了类名和Vue的列表渲染指令来构建页面布局，并绑定了对应的样式类。这个简单的例子展示了如何组织Vue项目的结构，并且如何通过数据绑定和列表渲染来动态生成页面内容。

- 阅读更多 -