分类 css3 下的文章

2024-08-22

Flexbox（弹性布局）是CSS3中的一种布局模型，可以在不同方向上对元素进行排列、对齐和分配空间。

以下是一些基本的Flexbox布局样式属性：

display: flex; - 将一个元素指定为弹性容器。
flex-direction - 定义项目的方向，可以是行内的（row, row-reverse）或块的（column, column-reverse）。
flex-wrap - 定义如果项目不能一次性放置在一行/列中时如何换行。
justify-content - 定义项目在主轴方向上的对齐方式（例如：flex-start, flex-end, center, space-between, space-around）。
align-items - 定义项目在交叉轴方向上的对齐方式。
align-self - 允许单个项目有与其他项目不一样的对齐方式。
flex-grow - 定义项目的放大比例。
flex-shrink - 定义项目的缩小比例。
flex-basis - 定义在分配多余空间之前，项目占据的主轴空间（类似于width/height属性）。
flex - 是flex-grow, flex-shrink, flex-basis的简写。

下面是一个简单的Flexbox布局的HTML和CSS示例：




<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
 
.flex-item {
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item" style="background-color: cyan;">1</div>
  <div class="flex-item" style="background-color: magenta;">2</div>
  <div class="flex-item" style="background-color: yellow;">3</div>
  <div class="flex-item" style="background-color: green;">4</div>
</div>
 
</body>
</html>

在这个例子中，.flex-container 是一个弹性容器，它拥有六个 .flex-item 作为子元素。这个容器被设置为水平方向上的项目排列，并且如果项目不能一次性放置在一行中，则允许换行，并且在主轴方向上（即水平方向）项目沿着容器居中对齐，在交叉轴方向上项目在垂直方向上居中对齐。每个项目被设置为100像素宽和高，并有10像素的外边距。

System

2024-08-22

所有,css3




/* Banner 栏右侧课程盒子测量及样式 */
.banner .course-box {
    width: 224px; /* 宽度 */
    height: 300px; /* 高度 */
    background-color: #fff; /* 背景颜色 */
    border: 1px solid #e5e5e5; /* 边框 */
    box-sizing: border-box; /* box-sizing 属性用于设置盒模型的大小，内容区域的宽高计算在内 */
}
 
/* 图片样式 */
.banner .course-box img {
    width: 100%; /* 宽度 */
    height: 150px; /* 高度 */
    object-fit: cover; /* 对象填充模式，保持宽高比缩放图片 */
}
 
/* 标题样式 */
.banner .course-box .title {
    font-size: 16px; /* 字体大小 */
    font-weight: 500; /* 字体加粗 */
    line-height: 24px; /* 行高 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 文本溢出显示省略标记 */
    white-space: nowrap; /* 文本不换行 */
}
 
/* 价格样式 */
.banner .course-box .price {
    font-size: 14px; /* 字体大小 */
    color: #ff6700; /* 字体颜色 */
    font-weight: 500; /* 字体加粗 */
    margin-bottom: 10px; /* 下边距 */
}
 
/* 按钮样式 */
.banner .course-box .btn {
    width: 100%; /* 宽度 */
    height: 30px; /* 高度 */
    background-color: #ff6700; /* 背景颜色 */
    color: #fff; /* 字体颜色 */
    font-size: 14px; /* 字体大小 */
    border: none; /* 无边框 */
    outline: none; /* 无轮廓 */
    cursor: pointer; /* 鼠标样式为指针 */
}
 
/* 按钮:hover 伪类样式 */
.banner .course-box .btn:hover {
    background-color: #ff4800; /* 鼠标悬浮时背景颜色 */
}

这段代码为 Banner 栏右侧的课程盒子定义了宽度、高度、背景颜色、边框以及内部图片和文本的样式。同时，它还包括了按钮的样式和鼠标悬浮时的样式变化。这样的代码可以帮助开发者学习如何使用 CSS 进行网页布局和样式设计。

- 阅读更多 -

练手小案例：用js实现二级导航

System

2024-08-22

所有,css3

以下是一个简单的二级导航菜单的实现，使用JavaScript和CSS完成。

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二级导航菜单</title>
<style>
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
 
  li {
    float: left;
  }
 
  li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
 
  li a:hover, .dropdown:hover .dropbtn {
    background-color: #111;
  }
 
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
 
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
 
  .dropdown-content a:hover {background-color: #f1f1f1;}
 
  .dropdown:hover .dropdown-content {
    display: block;
  }
</style>
</head>
<body>
 
<ul>
  <li><a href="#home">首页</a></li>
  <li><a href="#news">新闻</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">更多</a>
    <div class="dropdown-content">
      <a href="#">链接1</a>
      <a href="#">链接2</a>
      <a href="#">链接3</a>
    </div>
  </li>
</ul>
 
<script>
// 这里可以添加更多的JavaScript代码来增强导航的功能，比如点击事件处理等
</script>
 
</body>
</html>

CSS:




ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
 
li {
  float: left;
}
 
li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
li a:hover, .dropdown:hover .dropbtn {
  background-color: #111;
}
 
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
 
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
 
.dropdown-content a:hover {background-color: #f1f1f1;}
 
.dropdown:hover .dropdown-content {
  display: block;
}

这个例子中，我们使用了一个简单的二级下拉菜单，当用户将鼠标悬停在“更多”选项上时，会展开显示链接。通过CSS我们定义了导

- 阅读更多 -

CSS3 新增属性（边框，背景，web前端自学

System

2024-08-22

所有,css3

CSS3 中有许多新增的属性，以下是一些常见的：

border-radius: 用于创建圆角。
box-shadow: 用于添加阴影。
border-image: 用于设置边框图片。
background-size: 用于调整背景图片的大小。
background-origin: 用于设置背景图片的定位区域。
transform: 用于应用2D或3D转换。
transition: 用于创建过渡效果。
animation: 用于创建复杂的动画。
text-shadow: 用于在文本上添加阴影。
rgba() 和 hsla(): 用于设置颜色和透明度。

示例代码：




/* 圆角 */
div {
  border-radius: 10px;
}
 
/* 阴影 */
div {
  box-shadow: 5px 5px 10px #888888;
}
 
/* 背景图片 */
div {
  background-image: url('image.jpg');
  background-size: cover;
  background-origin: border-box;
}
 
/* 2D转换 */
div {
  transform: translate(50px, 100px) rotate(45deg);
}
 
/* 过渡效果 */
div {
  transition: all 0.3s ease-in-out;
}
 
/* 动画 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
div {
  animation: example 5s infinite;
}
 
/* 文本阴影 */
p {
  text-shadow: 2px 2px 4px #888888;
}
 
/* 颜色透明度 */
p {
  color: rgba(255, 0, 0, 0.5);
}

这些新属性和方法可以极大地增强网页设计的视觉效果和交互体验。

- 阅读更多 -

分享一组纯css动态好看的天气图标

System

2024-08-22

所有,css3

以下是一些使用纯CSS创建的动画天气图标的例子。这些例子展示了如何使用CSS动画和伪元素来创造特殊的形状和动画效果，从而模拟天气图标。




/* 太阳图标 */
.weather-sun {
  width: 100px;
  height: 100px;
  background-color: #f6d967;
  border-radius: 50%;
  position: relative;
  animation: rotate 5s linear infinite;
}
 
/* 太阳中心 */
.weather-sun::before {
  content: '';
  width: 20px;
  height: 20px;
  background-color: #f6d967;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 
/* 旋转动画 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}




/* 下雨图标 */
.weather-rain {
  position: relative;
  width: 100px;
  height: 120px;
  margin: 50px;
}
 
/* 雨滴 */
.weather-rain::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 10px;
  background-color: #3399ff;
  bottom: 10px;
  animation: rain 1s linear infinite;
}
 
/* 雨滴下落动画 */
@keyframes rain {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(50px) translateY(100px);
  }
}

这些例子展示了如何使用伪元素和CSS动画来创建复杂的图形和动画效果。每个例子都是独立的，可以直接复制粘贴到HTML文件中，并通过CSS进行样式化和动画定义。

- 阅读更多 -

CSS实现文字扫光特效

System

2024-08-22

所有,css3

要在CSS中实现文字的扫光效果，可以使用@keyframes动画结合text-stroke属性（或text-shadow）来创建出闪烁的效果。以下是一个简单的实现示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Glow Effect</title>
<style>
  .glow-text {
    color: transparent;
    text-stroke: 1px #fff;
    font-size: 48px;
    font-weight: bold;
    animation: glow 1s ease-in-out infinite alternate;
  }
 
  @keyframes glow {
    from {
      text-stroke-color: #fff;
      text-fill-color: #fff;
    }
    to {
      text-stroke-color: #ff0000; /* Change this to your desired color */
      text-fill-color: #ff0000; /* Change this to your desired color */
    }
  }
</style>
</head>
<body>
 
<div class="glow-text">扫光文字效果</div>
 
</body>
</html>

在这个例子中，.glow-text 类定义了文字的样式，包括动画效果。@keyframes glow 定义了文字颜色从白色变到指定颜色的过渡，可以通过修改to段中的颜色来改变扫光的颜色。这个动画将无限次数地开始和结束，alternate使得动画交替执行，从而创建出持续的扫光效果。

- 阅读更多 -

CSS 系列 -- 块级元素靠右的实现方式

System

2024-08-22

所有,css3

要使一个块级元素靠右，可以使用CSS的float属性或者text-align属性，或者利用flexbox布局。以下是几种实现方式的示例代码：

使用float属性：




.block-right {
  float: right;
}




<div class="block-right">这个块将会浮动到右边</div>

使用text-align属性（适用于块级元素内的内联内容或者内联块级内容）：




.container {
  text-align: right;
}




<div class="container">
  <div>这个块将会靠右边</div>
</div>

使用flexbox布局：




.flex-container {
  display: flex;
  justify-content: flex-end; /* 使子元素靠右 */
}




<div class="flex-container">
  <div>这个块将会靠右边</div>
</div>

在实际应用中，可以根据具体情况选择最适合的方法。

- 阅读更多 -

用xpath取出属性值的文本

System

2024-08-22

所有,css3

在XPath中，可以使用@符号来获取元素的属性值。例如，如果你想获取HTML中<a>标签的href属性值，可以使用以下XPath表达式：




//a/@href

这将会选取所有<a>标签的href属性。

如果你正在使用Python，并且想要使用lxml库来获取属性值，可以这样做：




from lxml import etree
 
html = """
<a href="https://www.example.com">Example Link</a>
"""
 
tree = etree.HTML(html)
 
# 获取href属性值
href_values = tree.xpath('//a/@href')
 
for href in href_values:
    print(href)

这段代码会输出所有<a>标签的href属性值。

- 阅读更多 -

vue3 + css动画实现元素翻转效果

System

2024-08-22

所有,css3




<template>
  <div class="flip-container" @click="toggle">
    <div class="flipper">
      <div class="front" v-show="!isFlipped">正面</div>
      <div class="back" v-show="isFlipped">背面</div>
    </div>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const isFlipped = ref(false);
 
    function toggle() {
      isFlipped.value = !isFlipped.value;
    }
 
    return { isFlipped, toggle };
  }
};
</script>
 
<style scoped>
.flip-container {
  perspective: 1000;
}
 
.flipper {
  position: relative;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
 
.front, .back {
  backface-visibility: hidden;
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
 
.front {
  z-index: 2;
}
 
.back {
  transform: rotateY(180deg);
}
 
.flip-container:hover .flipper {
  transform: rotateY(180deg);
}
</style>

这个例子中，我们创建了一个可以点击翻转的容器，通过Vue的响应式数据绑定和CSS动画实现了元素的翻转效果。用户点击.flip-container后，.flipper的transform属性从rotateY(0)变为rotateY(180deg)，从而触发CSS动画使得.front和.back分别显示和隐藏，实现翻转效果。

- 阅读更多 -

css中实现元素居中的方式

System

2024-08-22

所有,css3

在CSS中，实现元素居中可以通过不同的属性来实现，取决于你是要水平居中、垂直居中，还是两者都要。以下是一些常用的居中方法：

水平居中 - 行内元素或文本




.center-text {
  text-align: center;
}

水平居中 - 块级元素




.center-block {
  margin-left: auto;
  margin-right: auto;
  width: 50%; /* or any other value */
}

垂直居中 - 单行文本




.center-vertical-text {
  height: 100px;
  line-height: 100px; /* same as height to vertically center text */
}

水平和垂直居中 - 使用flexbox




.center-flex {
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
  height: 200px; /* or any other value */
}

水平和垂直居中 - 使用定位和转换




.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

垂直居中 - 使用CSS Grid




.center-grid {
  display: grid;
  place-items: center;
  height: 200px; /* or any other value */
}

选择合适的方法取决于你的具体需求和上下文。

- 阅读更多 -