标签 css 下的文章

2024-08-07




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小球跳动动画</title>
<style>
  .ball {
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    animation: bounce 2s infinite;
  }
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-30px); }
  }
</style>
</head>
<body>
<div class="ball"></div>
</body>
</html>

这段代码使用了CSS的@keyframes规则创建了一个名为bounce的动画，该动画会使小球在垂直位置上跳动。.ball类使用了position: absolute来确保小球位于页面的左上角，并且animation属性应用了跳动动画，使小球不断地在原位置和向下30像素的位置跳动。这个示例展示了如何使用HTML和CSS创建简单的动画效果。

- 阅读更多 -

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

- 阅读更多 -

CSS3：创造引人注目的Web界面

System

2024-08-07

所有,css3




/* 设置HTML5页面的文档类型 */
html {
    font-family: 'Open Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
 
/* 移除默认边距 */
body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, figure, figcaption, blockquote, dl, dt, dd {
    margin: 0;
    padding: 0;
}
 
/* 设置字体大小 */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal;
}
 
/* 使用Flexbox布局创建一个简洁的导航栏 */
.navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    background-color: #333;
    color: #fff;
    padding: 0 20px;
}
 
/* 导航链接样式 */
.navigation a {
    color: #fff;
    text-decoration: none;
    padding: 0 10px;
}
 
/* 创建一个带有阴影的圆角边框的登录框 */
.login-box {
    width: 300px;
    padding: 40px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 100px auto;
}
 
/* 创建一个带有阴影的圆角按钮 */
.login-box button {
    width: 100%;
    padding: 10px;
    background-color: #5cb85c;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 
/* 为图片添加圆角和阴影效果 */
.img-rounded {
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 
/* 为图片添加圆形效果 */
.img-circle {
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 
/* 为图片添加阴影效果 */
.img-thumbnail {
    display: inline-block;
    height: auto;
    max-width: 100%;
    border: 2px solid transparent;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 
/* 创建一个带有阴影的圆角进度条 */
.progress-bar {
    background-color: #5cb85c;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) inset;
}
 
/* 创建一个带有阴影的圆角标签 */
.label-default {
    background-color: #777;
    color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 
/* 创建一个带有阴影的圆角下拉菜单 */
.dropdown-menu {
    border-radius: 5px;
    box-shadow: 0 2px

- 阅读更多 -

【css】渐变-背景渐变、边框渐变、文字渐变

System

2024-08-07

所有,css3

背景渐变：




/* 线性渐变，从上到下 */
.background-gradient {
  background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
}
 
/* 径向渐变，从中心到边缘 */
.background-gradient {
  background: radial-gradient(circle, #ff99cc 0%, #33ccff 100%);
}

边框渐变：




/* 不同浏览器的前缀可能不一样，这里以webkit为例 */
.border-gradient {
  border: 2px solid #33ccff;
  border-image: -webkit-linear-gradient(to right, red, yellow, green);
  border-image: linear-gradient(to right, red, yellow, green);
}

文字渐变：




.text-gradient {
  background: -webkit-linear-gradient(45deg, #ff99cc, #33ccff);
  background: linear-gradient(45deg, #ff99cc, #33ccff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

以上代码实现了背景、边框和文字的渐变效果。注意，为了兼容不同浏览器，可能需要添加不同浏览器的前缀（如-webkit-）。

- 阅读更多 -

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-Grid（网格）布局

System

2024-08-07

所有,css3

CSS Grid（网格）布局是一种二维布局系统。与flexbox布局系统不同，它被设计为管理网格中的项目，而不是像flexbox那样管理线性布局。

以下是一些CSS Grid的基本使用方法：

创建一个网格容器：




.container {
  display: grid;
}

定义网格的列和行：




.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;  /* 定义三列，每列宽度为100px */
  grid-template-rows: 50px 50px 50px;       /* 定义三行，每行高度为50px */
}

使用网格间隔：




.container {
  display: grid;
  grid-column-gap: 10px;  /* 列间隔为10px */
  grid-row-gap: 10px;     /* 行间隔为10px */
}

使用命名网格线：




.container {
  display: grid;
  grid-template-columns: [first] 100px [second] 100px [third] 100px [fourth];
  grid-template-rows: [header] 50px [content] 50px [footer];
}

将项目放置在网格中：




.item1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}

使用简写属性放置项目：




.item1 {
  grid-area: 1 / 1 / 2 / 2;  /* 行开始 / 列开始 / 行结束 / 列结束 */
}

使用自动填充：




.container {
  display: grid;
  grid-template-columns: 100px auto 100px;  /* 第二列自动填充剩余空间 */
}

设置重复的网格线：




.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);  /* 三列，每列宽度为100px */
}

设置最小和最大网格大小：




.container {
  display: grid;
  grid-template-columns: 100px minmax(150px, 1fr);  /* 最小150px，最大1fr */
}

创建网格区域：




.container {
  display: grid;
  grid-template-areas: 'header header header'
                       'nav    main   sidebar'
                       'footer footer footer';
}

在实际应用中，你可以根据需要将这些属性和值组合起来，以创建灵活的网格布局。

- 阅读更多 -

css内容超出隐藏，文字只显示一半。

System

2024-08-07

所有,css3

要实现文本超出部分隐藏，并且只显示一半的文字，可以使用CSS的text-overflow属性结合overflow和white-space属性。以下是一个简单的示例：




<div class="text-ellipsis">这是一段很长的文字，我们只希望显示它的一半</div>




.text-ellipsis {
  width: 100px; /* 定义容器宽度 */
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  text-overflow: ellipsis; /* 使用ellipsis显示超出部分的文本 */
  direction: rtl; /* 文本方向从右到左 */
}
 
.text-ellipsis::before {
  content: '...'; /* 添加省略号 */
  direction: ltr; /* 确保省略号从左到右显示 */
}

在这个示例中，text-ellipsis类定义了容器的宽度，并且通过设置direction: rtl实现从右到左的文本方向，使得文本从左边开始隐藏，直到隐藏一半的文本为止。::before伪元素用于添加省略号，并通过设置direction: ltr确保省略号显示正确。这样就实现了文本超出部分隐藏，并显示省略号的效果。

- 阅读更多 -

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背景样式设置中的基础知识，对于初学者来说非常有用。

- 阅读更多 -

css如何给div添加一个条纹背景，在背景上画一条有宽度的斜线

System

2024-08-07

所有,css3

在CSS中，可以使用线性渐变（linear-gradient）来创建一个条纹背景，并使用 background 属性的特性来画一条有宽度的斜线。以下是一个示例代码：




/* 创建一个具有条纹背景的div */
.striped-background {
  background: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%), #f0f0f0;
  background-size: 100px 100px; /* 调整这个值来改变条纹的宽度 */
}
 
/* 在条纹背景上画一条有宽度的斜线 */
.striped-background::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, transparent 50%, #ff0000 50%); /* 红色斜线 */
  mix-blend-mode: multiply; /* 使斜线与条纹相互影响 */
}

在HTML中使用这个类：




<div class="striped-background"></div>

这段代码会创建一个具有条纹的背景，并且在背景上绘制一条红色的斜线。你可以通过调整 background-size 属性的值来改变条纹的宽度，从而影响斜线的粗细。

System

2024-08-07

所有,css3

CSS3 结构伪类选择器可以用来选择元素基于其父元素的位置关系。以下是三种常见的结构伪类选择器：

:first-child 选择器：选择父元素中的第一个子元素E。
:last-child 选择器：选择父元素中的最后一个子元素E。
:nth-child(n) 选择器：选择父元素中的第n个子元素E。

以下是对应的示例代码：




/* 选择每个 <p> 元素，该元素是其父元素的第一个子元素 */
p:first-child {
  color: red;
}
 
/* 选择每个 <p> 元素，该元素是其父元素的最后一个子元素 */
p:last-child {
  color: blue;
}
 
/* 选择每个 <p> 元素，该元素是其父元素的第二个子元素 */
p:nth-child(2) {
  color: green;
}

在使用 :nth-child 选择器时，可以使用更复杂的公式，如 2n 选择所有偶数项，2n+1 选择所有奇数项，n+5 选择第5个及以后的所有项，-n+5 选择前5个项等。

- 阅读更多 -