标签 css 下的文章

【CSS】课程网站 Banner 制作 ③ ( Banner 栏右侧课程盒子测量及样式 | Banner 版心盒子模型右侧课程栏代码示例 )

2024-08-22




/* 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 进行网页布局和样式设计。

- 阅读更多 -

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>

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

- 阅读更多 -

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 */
}

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

- 阅读更多 -

CSS3中伪元素::before和::after 制作按钮的开关门效果

System

2024-08-22

所有,css3




/* 开关门效果 */
.toggle-switch {
  position: relative;
  width: 120px;
  height: 60px;
  background-color: #e9e9e9;
  border-radius: 30px;
  transition: background-color 0.3s;
}
 
.toggle-switch::before,
.toggle-switch::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50%;
  height: 80%;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s;
  content: '';
}
 
.toggle-switch::before {
  left: 20px;
}
 
.toggle-switch::after {
  right: 20px;
}
 
/* 开启状态 */
.toggle-switch.on {
  background-color: #4caf50;
}
 
.toggle-switch.on::before {
  left: 5%;
}
 
.toggle-switch.on::after {
  right: 5%;
}

这段代码定义了一个简单的开关门效果，当.toggle-switch元素有.on类时，门会打开，展示出背景色#4caf50的样式。::before和::after伪元素分别代表门的左右半部分，当有.on类时，它们会向外扩展，从而模拟门打开的效果。

- 阅读更多 -

CSS3-补充-伪元素

System

2024-08-22

所有,css3

CSS3中的伪元素和伪类可以让我们向某些选择器添加特殊的效果。伪元素使用::开头，而伪类使用:开头。

伪元素 ::before 和 ::after

伪元素 "::before" 和 "::after" 创建一个元素，这个元素在内容之前或之后插入。这两个伪元素是行内元素。




div::before {
  content: "开始";
}
 
div::after {
  content: "结束";
}

伪类 :first-child, :last-child, :nth-child()

伪类 ":first-child", ":last-child", ":nth-child()" 选择器用于选择指定的元素。




p:first-child {
  color: blue;
}
 
p:last-child {
  color: red;
}
 
p:nth-child(2) {
  color: green;
}

伪类 :first-letter, :first-line

伪类 ":first-letter", ":first-line" 选择器用于选定文本的首字母或首行。




p:first-letter {
  font-size: 200%;
}
 
p:first-line {
  font-weight: bold;
}

伪类 :link, :visited, :hover, :active

伪类 ":link", ":visited", ":hover", ":active" 选择器用于设置超链接的状态样式。




a:link {
  color: blue;
}
 
a:visited {
  color: purple;
}
 
a:hover {
  color: red;
}
 
a:active {
  color: yellow;
}

伪类 :focus

伪类 ":focus" 选择器用于选择获得焦点的元素。




input:focus {
  background-color: yellow;
}

伪类 :checked, :disabled, :empty

伪类 ":checked", ":disabled", ":empty" 选择器用于选择特定状态的元素。




input:checked {
  background-color: green;
}
 
input:disabled {
  background-color: gray;
}
 
p:empty {
  display: none;
}

伪类 :not()

伪类 ":not()" 选择器用于选择不符合条件的元素。




p:not(.exclude) {
  color: red;
}

伪类 :target

伪类 ":target" 选择器用于选择当前的目标元素。




#target {
  color: red;
}

伪类 :lang()

伪类 ":lang()" 选择器用于选择具有特定语言的元素。




p:lang(en) {
  color: blue;
}

伪类 :root

伪类 ":root" 选择器用于选择根元素。




:root {
  background-color: yellow;
}

伪类 :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type()

伪类 ":nth-child()", ":nth-last-child()", ":nth-of-type()", ":nth-last-of-type()" 选择器用于选择特定位置的元素。




p:nth-child(2) {
  color: red;
}
 
p:nth-last-child(2) {
  color: blue;
}
 
p:nth-of-type(even) {
  color: green;
}
 
p:nth-last-of-type(odd) {
  color: purple;
}

伪类 :only-child, :only-of-

- 阅读更多 -

CSS3技巧36：backdrop-filter 背景滤镜

System

2024-08-22

所有,css3




/* 添加背景滤镜以实现模糊效果 */
.blur-background {
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.5); /* 设置半透明背景色 */
}
 
/* 应用于元素的样式 */
.my-element {
  width: 300px;
  height: 200px;
  position: relative;
  z-index: 10;
}
 
/* 父容器样式 */
.parent-container {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden; /* 确保过滤效果不会超出容器范围 */
}
 
/* HTML结构 */
<div class="parent-container">
  <div class="my-element">这里是内容</div>
  <div class="blur-background"></div>
</div>

这个例子展示了如何使用backdrop-filter属性为元素添加背景模糊效果。.blur-background类创建了一个半透明的背景，并且利用backdrop-filter实现了模糊效果。.my-element类是需要展示在模糊背景上的内容，而.parent-container类确保模糊效果不会超出设定的容器范围。

- 阅读更多 -