分类 css 下的文章

2024-08-07




/* 设置照片墙容器样式 */
.photo-wall-container {
    perspective: 1000px; /* 设置3D视图的距离，为子元素创建透视效果 */
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
 
/* 设置照片单元样式 */
.photo-wall-item {
    width: 200px;
    height: 200px;
    position: absolute;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
    transition: transform 1s; /* 设置过渡动画 */
}
 
/* 使用CSS动画实现自动旋转 */
.photo-wall-item:nth-child(1) {
    transform: rotateY(0deg) translateZ(300px);
    animation: rotateItem 10s infinite linear;
}
 
/* 其他照片样式... */
 
/* 定义动画 */
@keyframes rotateItem {
    0% {
        transform: rotateY(0deg) translateZ(300px);
    }
    100% {
        transform: rotateY(360deg) translateZ(300px);
    }
}

这个代码实例展示了如何创建一个自动旋转的3D照片墙。它设置了透视，定义了照片的样式，并使用CSS动画实现了照片的自动旋转效果。这个案例教导开发者如何利用CSS动画和3D转换创建复杂的交互效果。

- 阅读更多 -

纯css实现太极八卦图

System

2024-08-07

所有,css

使用纯CSS实现太极八卦图，可以通过使用CSS的@keyframes规则来创建动画，并使用transform属性进行旋转等变换。以下是一个简单的例子，展示了如何使用CSS创建一个基本的太极八卦图：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Taiji Icon</title>
<style>
  .taiji {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 50%;
    animation: rotate 4s infinite linear;
  }
 
  .taiji::before,
  .taiji::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: white;
    border-radius: 50%;
  }
 
  .taiji::before {
    width: 50%;
    height: 50%;
    transform: translate(-50%, -50%);
  }
 
  .taiji::after {
    width: 30%;
    height: 30%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
 
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>
</head>
<body>
<div class="taiji"></div>
</body>
</html>

这段代码创建了一个简单的太极图标，其中.taiji代表天，而.taiji::before和.taiji::after分别代表地和阳。通过@keyframes rotate动画，它们会不断旋转和切换位置，模拟出太极旋律的动态效果。

- 阅读更多 -

HTML5 满天繁星+流星划过动画效果（CSS 动画）

System

2024-08-07

所有,css




<!DOCTYPE html>
<html>
<head>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .stars {
            width: 100%;
            height: 100%;
            background: #000;
            overflow: hidden;
            position: relative;
        }
        .stars-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform: translateZ(0);
        }
        .star {
            position: absolute;
            top: 0;
            width: 2px;
            height: 2px;
            background: #fff;
            border-radius: 100%;
            opacity: 0.3;
            transform: translateZ(0);
            animation: twinkle 10s infinite alternate;
        }
        @keyframes twinkle {
            from { opacity: 0.3; }
            to { opacity: 0.8; }
        }
        .meteor {
            position: absolute;
            top: -100px;
            width: 2px;
            height: 100px;
            background: #fff;
            opacity: 0.5;
            transform: translateX(50%);
            animation: shoot 20s linear infinite;
        }
        @keyframes shoot {
            0% { top: -100px; opacity: 0.5; }
            20% { opacity: 0.8; }
            100% { top: 100%; opacity: 0; }
        }
    </style>
</head>
<body>
    <div class="stars">
        <div class="stars-container">
            <!-- 生成随机的星星 -->
            <div class="star" style="left:100px;top:50px;"></div>
            <!-- 更多星星... -->
        </div>
        <!-- 流星 -->
        <div class="meteor"></div>
    </div>
    <script>
        const numStars = 1000; // 星星数量
        const starsContainer = document.querySelector('.stars-container');
 
        for (let i = 0; i < numStars; i++) {
            const star = document.createElement('div');
            star.className = 'star';
            // 随机位置和大小
            star.style.left = Math.random() * 100 + '%';
            s

- 阅读更多 -

CSS——scss中动态引入背景图

System

2024-08-07

所有,css

在SCSS中，你可以使用@each指令来遍历列表并动态地引入背景图。以下是一个简单的例子：




// 假设你有一个包含图片路径的列表
$background-images: 'image1.jpg', 'image2.jpg', 'image3.jpg';
 
// 遍历列表并为每个图片创建一个类
@each $image in $background-images {
  .bg-image-#{$image} {
    background-image: url(#{$image});
  }
}

编译后的CSS将是：




.bg-image-image1.jpg {
  background-image: url(image1.jpg);
}
 
.bg-image-image2.jpg {
  background-image: url(image2.jpg);
}
 
.bg-image-image3.jpg {
  background-image: url(image3.jpg);
}

这样，你可以将生成的类添加到HTML元素中，以应用对应的背景图。

- 阅读更多 -

CSS-backround样式，普通背景颜色的设置和渐变色背景的设置。

System

2024-08-07

所有,css




/* 设置元素的普通背景色 */
.element {
  background-color: #f0f0f0; /* 十六进制颜色值 */
}
 
/* 设置元素的线性渐变背景 */
.gradient-background {
  background-image: linear-gradient(to right, #ff7e5f, #feb47b); /* 从左到右的渐变，从#ff7e5f到#feb47b */
}
 
/* 设置元素的径向渐变背景 */
.radial-gradient-background {
  background-image: radial-gradient(circle, #ff9a9e, #fad0c4); /* 圆形渐变，从#ff9a9e到#fad0c4 */
}
 
/* 设置背景图片，同时包含背景颜色和背景渐变 */
.background-image {
  background-image: url('image.jpg'), linear-gradient(to right, #ff7e5f, #feb47b); /* 图片地址替换为实际路径 */
}

这段代码展示了如何使用CSS为元素设置普通背景色、线性渐变背景和径向渐变背景，同时也展示了如何在同一元素上同时使用背景图片和背景渐变。这些是CSS背景样式设置中的基础知识，对于初学者来说非常有用。

- 阅读更多 -

Flutter 基础篇，教你用CSS清除样式

System

2024-08-07

所有,css

在Flutter中，CSS样式通常是用来为Widget添加样式的，但有时候我们需要清除已经应用的样式。Flutter没有直接使用CSS，但我们可以通过设置默认的样式来达到类似的效果。

例如，如果你想清除所有的文本样式，你可以创建一个默认的TextStyle，然后在需要清除样式的地方使用这个默认样式。




// 创建一个默认的TextStyle
final TextStyle defaultTextStyle = const TextStyle();
 
// 在需要清除样式的地方使用这个默认样式
Text(
  '清除样式的文本',
  style: defaultTextStyle,
),

如果你想清除所有的容器样式，你可以创建一个默认的BoxDecoration，然后在需要清除样式的地方使用这个默认样式。




// 创建一个默认的BoxDecoration
final BoxDecoration defaultBoxDecoration = const BoxDecoration();
 
// 在需要清除样式的地方使用这个默认样式
Container(
  decoration: defaultBoxDecoration,
  // ...
),

请注意，这只是清除样式的一种方法，Flutter提供了丰富的样式定制能力，你可以根据需要选择合适的方法来清除或自定义样式。

- 阅读更多 -

学习和总结CSS的字体属性设置

System

2024-08-07

所有,css




/* 设置字体族 */
body {
  font-family: 'Arial', sans-serif;
}
 
/* 设置字体大小 */
h1 {
  font-size: 24px;
}
 
/* 设置字体粗细 */
strong {
  font-weight: bold; /* 或者使用数值 400 到 900 的整数 */
}
 
/* 设置字体样式（斜体） */
em {
  font-style: italic;
}
 
/* 设置行间距 */
p {
  line-height: 1.5; /* 这里可以是无单位的数值或者具体的长度值 */
}
 
/* 设置文本的装饰（下划线） */
a {
  text-decoration: underline; /* 或者 'none' 移除下划线 */
}
 
/* 设置文本的对齐方式 */
div.center-text {
  text-align: center;
}
 
/* 设置文本阴影 */
h2 {
  color: #333333;
  text-shadow: 2px 2px 2px #aaaaaa; /* 水平偏移 垂直偏移 模糊半径 颜色 */
}

这段代码展示了如何在CSS中设置字体族、大小、粗细、样式、行间距、装饰和对齐，以及阴影效果。这些是设计师和开发者经常用到的CSS属性，对于学习前端开发是非常有帮助的。

- 阅读更多 -

css实现文本超出隐藏，并显示省略号

System

2024-08-07

所有,css

要在CSS中实现文本超出隐藏并显示省略号，可以使用以下属性：

overflow: 设置为 hidden 以隐藏超出容器的内容。
text-overflow: 设置为 ellipsis 以显示省略号来表示被截断的文本。
white-space: 设置为 nowrap 以防止文本换行。

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




.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

然后将这个类应用到你的HTML元素上：




<div class="ellipsis">这是一段很长的文本，需要被截断并显示省略号。</div>

这样，当文本超出容器宽度时，就会以省略号显示，并且文本不会换行。

- 阅读更多 -

CSS扩展选择器

System

2024-08-07

所有,css

CSS扩展选择器是一种特殊的选择器，它可以根据元素在其位置的上下文关系来选择元素。这些选择器包括：

子选择器（Child Selector）E > F：选择作为E元素子元素的F元素。
后代选择器（Descendant Selector）E F：选择E元素内的所有F元素，不仅限于子元素。
相邻兄弟选择器（Adjacent Sibling Selector）E + F：选择紧跟在E元素之后的F元素。
通用兄弟选择器（General Sibling Selector）E ~ F：选择E元素之后的所有F元素。

实例代码：




/* 子选择器 */
div > p {
  color: red;
}
 
/* 后代选择器 */
div p {
  color: blue;
}
 
/* 相邻兄弟选择器 */
p + div {
  color: green;
}
 
/* 通用兄弟选择器 */
p ~ div {
  color: purple;
}

HTML示例：




<div>
  <p>我是红色，因为我是直接子元素。</p>
  <span>我不会变色。</span>
  <div>我是蓝色，因为我是后代元素。</div>
</div>
<p>紧跟在我之后的Div将是绿色。</p>
<div>我是绿色，因为我是相邻兄弟元素。</div>
<div>我也是绿色，因为我是通用兄弟元素。</div>

- 阅读更多 -

CSS2D3D转换

System

2024-08-07

所有,css

CSS2D3D转换是指在CSS中应用2D或3D转换效果。2D转换主要包括平移(translate)、缩放(scale)、旋转(rotate)和倾斜(skew)等，而3D转换则在此基础上增加了z轴上的转换，如透视(perspective)和转换(transform)。

以下是一些CSS2D3D转换的例子：

2D转换:




/* 平移 */
.element {
  transform: translate(50px, 100px);
}
 
/* 缩放 */
.element {
  transform: scale(1.5, 2);
}
 
/* 旋转 */
.element {
  transform: rotate(45deg);
}
 
/* 倾斜 */
.element {
  transform: skew(30deg, 20deg);
}

3D转换:




/* 设置透视 */
.element {
  perspective: 500px;
}
 
/* 3D旋转 */
.element {
  transform: rotateX(45deg) rotateY(30deg);
}
 
/* 3D位置移动 */
.element {
  transform: translateX(50px) translateY(100px) translateZ(50px);
}
 
/* 3D缩放 */
.element {
  transform: scaleX(1.5) scaleY(2) scaleZ(1.5);
}

CSS3D转换需要硬件加速以实现更好的性能，可以通过在动画或转换元素上设置transform: translateZ(0);或其他非none的backface-visibility属性来实现。

- 阅读更多 -