标签 css3 下的文章

[HTML]Web前端开发技术5.1（HTMLCSSJavaScript ）CSS基础，selector，properties，font，Cascading，@import——喵喵画网页

2024-08-20

在CSS中，选择器用于选定需要应用样式规则的HTML元素。属性是定义样式的值。

以下是一些基本的CSS选择器和属性示例：




/* 元素选择器，选择所有p元素 */
p {
  color: blue; /* 属性：设置文本颜色为蓝色 */
}
 
/* ID选择器，选择id为"header"的元素 */
#header {
  background-color: yellow; /* 设置背景颜色为黄色 */
}
 
/* 类选择器，选择所有class为"highlight"的元素 */
.highlight {
  font-weight: bold; /* 设置字体为粗体 */
}
 
/* 属性选择器，选择所有具有title属性的元素 */
[title] {
  border: 1px solid black; /* 设置边框 */
}
 
/* 伪类选择器，选择所有未被访问的链接 */
a:link {
  color: green; /* 设置文本颜色为绿色 */
}

在HTML中使用这些样式：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Example</title>
<style>
  /* 将上面的CSS代码放在这里 */
</style>
</head>
<body>
 
<p id="header">Header</p>
<p class="highlight" title="This is a paragraph.">This is a paragraph.</p>
<a href="https://www.example.com">Visit Example.com</a>
 
</body>
</html>

以上代码演示了如何在HTML文档中使用CSS来改变文本的颜色、设置背景色、加粗文本、为元素添加边框以及为链接设置颜色。

- 阅读更多 -

css3新增特性

System

2024-08-20

所有,css3

CSS3是CSS（层叠样式表）的一个版本，它于2011年被广泛应用于网页设计。CSS3包含许多新特性，例如：

选择器（Selector）：更加丰富和灵活，例如属性选择器、结构性伪类选择器等。
背景和边框（Background and Border）：例如圆角（border-radius）、渐变（gradient）、阴影（box-shadow）等。
文字效果（Text Effect）：例如文字阴影（text-shadow）、字体的放大缩小（font-stretch）等。
2D/3D转换（Transform）：例如旋转（rotate）、缩放（scale）、平移（translate）、倾斜（skew）等。
动画（Animation）：通过关键帧（keyframes）控制动画效果。
多列布局（Multi-column Layout）：可以创建多列的文本布局。
用户界面（User Interface）：例如更多的表单样式（radio、checkbox、select）、滚动条样式（scrollbar）等。
多媒体（Media Query）：可以使网页在不同的设备上有不同的表现。

以下是一个简单的示例，展示了如何使用CSS3中的一些特性：




/* 圆角、渐变背景、阴影 */
div {
  background: linear-gradient(to right, red, yellow);
  border-radius: 10px;
  box-shadow: 5px 5px 10px #888888;
}
 
/* 文字阴影 */
p {
  text-shadow: 2px 2px 4px #888888;
}
 
/* 2D转换：旋转 */
img {
  transform: rotate(45deg);
}
 
/* 多列布局 */
article {
  column-count: 2;
  column-gap: 20px;
}
 
/* 媒体查询：响应式设计 */
@media (max-width: 600px) {
  div {
    border-radius: 5px;
  }
}




<div>This is a div with CSS3 features.</div>
<p>This is a paragraph with CSS3 text effect.</p>
<img src="image.jpg" alt="Rotated Image">
<article>
  <p>This is an article with multi-column layout.</p>
</article>

这个示例展示了如何使用CSS3的一些特性来增强网页的视觉效果和响应式布局。

- 阅读更多 -

CSS3中Flex弹性盒子布局

System

2024-08-20

所有,css3

在CSS3中，Flex弹性盒子布局是一种新的布局模式，它能够使得容器中的子元素能够更灵活地进行排列和对齐。

以下是一个简单的Flex布局的例子：

HTML:




<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:




.flex-container {
  display: flex; /* 使用弹性盒子布局 */
  width: 100%; /* 容器宽度 */
  background-color: lightblue; /* 背景颜色 */
}
 
.flex-item {
  margin: 5px; /* 间距 */
  padding: 15px; /* 填充 */
  color: white; /* 字体颜色 */
  font-size: 16px; /* 字体大小 */
}
 
/* 这里可以添加更多的样式来定制布局 */

在这个例子中，.flex-container 类使用了 display: flex; 属性来指定这个容器使用Flex布局。这意味着其子元素（.flex-item 类）将根据一些规则进行布局，例如flex-direction（布局方向），flex-wrap（是否换行），flex-flow（以上两者的简写形式），justify-content（水平对齐方式），align-items（垂直对齐方式），align-self（单个项目的对齐方式）等属性。

- 阅读更多 -

CSS3 如何实现飘动的云朵动画

System

2024-08-20

所有,css3

CSS3可以通过关键帧（keyframes）和动画（animations）属性实现飘动的云朵动画。以下是实现云朵飘动的基本步骤和示例代码：

定义关键帧（keyframes）：创建一个动画序列，描述云朵从一个状态到另一个状态的变化。
应用动画（animations）：将关键帧应用到相应的HTML元素上，并设置动画的持续时间、延迟和其他参数。

示例代码：




/* 定义关键帧 */
@keyframes float-cloud {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}
 
/* 应用动画 */
.cloud {
  width: 100px;
  height: 50px;
  background: #white;
  border-radius: 20px;
  animation: float-cloud 5s infinite alternate; /* 持续时间5秒，无限次数，交替方向 */
}




<!-- HTML结构 -->
<div class="cloud"></div>

这段代码定义了一个名为float-cloud的关键帧动画，它使云朵从当前位置向右移动100px，然后返回原位。这个动画被应用到拥有cloud类的HTML元素上，并设置为无限循环和交替方向，从而模拟云朵飘飘而过的效果。

- 阅读更多 -

CSS3动画巧妙实现轮播图效果

System

2024-08-20

所有,css3




/* 设置轮播图容器样式 */
.carousel {
  position: relative;
  width: 300px;
  height: 200px;
  margin: auto;
  overflow: hidden;
}
 
/* 设置图片列表样式，并使用3D转换初始化 */
.carousel ul {
  position: absolute;
  width: 300%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 10s;
}
 
/* 设置单个图片样式，并沿X轴排列 */
.carousel ul li {
  position: absolute;
  width: 100px;
  height: 100%;
  left: 0;
  list-style: none;
}
 
/* 图片内容样式 */
.carousel img {
  display: block;
  width: 100%;
  height: 100%;
}
 
/* JavaScript中通过改变ul的transform属性来触发动画 */

这个简单的样式表定义了一个基本的轮播图布局，并使用CSS3的transform和transition属性来实现动画效果。通过JavaScript可以控制transform属性的值来更新动画。这个例子展示了如何使用CSS3创建动态的轮播图效果，而不需要依赖JavaScript的复杂逻辑。

- 阅读更多 -

CSS3媒体查询简介与使用方法

System

2024-08-20

所有,css3

媒体查询是CSS3的一个功能，可以根据设备的不同特性（如屏幕尺寸、分辨率等）来应用不同的样式规则。

媒体查询的基本语法如下：




@media [media_type] [and | not | only] (media_feature) {
    /* CSS 样式 */
}

media_type 可以是 all, print, screen 或其他媒体类型。
media_feature 是用于检查设备特性的条件，例如 max-width, min-height 等。

下面是一个使用媒体查询的例子，它针对不同的屏幕宽度应用不同的背景颜色：




/* 默认样式 */
body {
    background-color: lightblue;
}
 
/* 屏幕宽度至少为 600px */
@media screen and (min-width: 600px) {
    body {
        background-color: pink;
    }
}
 
/* 屏幕宽度至少为 900px */
@media screen and (min-width: 900px) {
    body {
        background-color: orange;
    }
}
 
/* 屏幕宽度至少为 1200px */
@media screen and (min-width: 1200px) {
    body {
        background-color: lightgreen;
    }
}

在上述代码中，根据屏幕宽度的不同，body 的背景色会改变。当屏幕宽度小于600px时，背景色为lightblue；当宽度至少为600px且不小于900px时，背景色为pink；当宽度至少为900px且不小于1200px时，背景色为orange；当宽度至少为1200px时，背景色为lightgreen。

- 阅读更多 -

css3文字环绕旋转

System

2024-08-20

所有,css3

CSS3可以使文字环绕旋转，通过transform属性的rotate函数和animation属性实现动态效果。以下是一个简单的例子：

HTML:




<div class="text-rotator">
  <div class="text-wrapper">
    <h1>文字环绕旋转效果</h1>
  </div>
</div>

CSS:




.text-rotator {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 50px;
}
 
.text-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 
.text-rotator h1 {
  font-size: 20px;
  color: #333;
  margin: 0;
  animation: rotate 5s linear infinite;
}
 
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

这段代码会使得.text-rotator中的h1标签文字不断旋转，形成一个环绕的动画效果。可以通过调整animation属性中的时长和其他参数来改变旋转的速度和行为。

- 阅读更多 -

CSS3实现轮播效果

System

2024-08-20

所有,css3




/* 设置轮播容器样式 */
.carousel {
  width: 600px;
  height: 300px;
  position: relative;
  overflow: hidden;
}
 
/* 设置图片列表样式 */
.carousel ul {
  position: absolute;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 3000px; /* 假设有3张图片，每张图片宽度600px，总宽度3000px */
  animation: slide 10s infinite; /* 动画名称为slide，持续时间10秒，无限循环 */
}
 
/* 设置单个图片样式 */
.carousel ul li {
  float: left;
  width: 600px;
  height: 300px;
}
 
/* 设置图片轮播动画 */
@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-600px); /* 每次动画结束，向左移动一张图片的宽度 */
  }
}
 
/* 样式应用于HTML结构 */
<div class="carousel">
  <ul>
    <li><img src="image1.jpg" alt="Image 1"></li>
    <li><img src="image2.jpg" alt="Image 2"></li>
    <li><img src="image3.jpg" alt="Image 3"></li>
  </ul>
</div>

这个代码实例展示了如何使用CSS3的@keyframes规则创建一个简单的图片轮播效果。.carousel是轮播容器，.carousel ul是所有图片的列表，.carousel ul li是单个图片的容器。@keyframes slide定义了图片从左至右移动的动画效果。这个例子中，图片每10秒向左移动一张宽度的距离，形成轮播效果。

- 阅读更多 -

CSS3新增的语法

System

2024-08-20

所有,css3

在CSS3中，新增了许多的特性，包括选择器、伪类、渐变、阴影、变换等等。以下是一些常见的CSS3新增语法的示例：

圆角（border-radius）: 可以用来创建圆形的按钮或者是圆角的框。




.button {
  border-radius: 50px; /* 创建一个圆形的按钮 */
}

阴影（box-shadow）: 可以给元素添加阴影效果。




.box {
  box-shadow: 10px 10px 5px grey; /* 添加阴影 */
}

文字阴影（text-shadow）: 可以给文字添加阴影效果。




.text {
  text-shadow: 2px 2px 2px grey; /* 文字阴影 */
}

线性渐变（linear-gradient）: 可以创建一个由两个或多个指定颜色的直线段过渡的视觉效果。




.gradient-box {
  background: linear-gradient(to right, red , yellow); /* 创建一个渐变背景 */
}

旋转（transform: rotate）: 可以让元素旋转指定的角度。




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

转换（transform）: 可以包括旋转、缩放、移动以及倾斜等多种操作。




.transformed-box {
  transform: translate(50px,100px) rotate(180deg) scale(1.5); /* 移动、旋转、并缩放 */
}

过渡（transition）: 可以在属性改变时产生动画效果。




.transition-box {
  transition: all 0.5s ease-in-out; /* 所有属性变化都会有动画效果 */
}

自定义动画（@keyframes）: 可以创建自定义的动画效果。




@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
@-moz-keyframes example /* Firefox */ {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
@-webkit-keyframes example /* Safari 和 Chrome */ {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
.animated-box {
  animation-name: example; /* 使用动画 */
  animation-duration: 4s; /* 动画时间 */
}

多列（column-count）: 可以将文本内容分割成多列。




.multi-column-text {
  column-count: 3; /* 分成3列 */
}

用户界面（cursor）: 可以改变鼠标悬停在元素上时的光标形状。




.hand-cursor {
  cursor: pointer; /* 将光标改为手形 */
}

这些只是CSS3中一部分的新增语法，实际上CSS3提供了更多强大而灵活的功能，如3D变换、动画、多列布局、媒体查询等，这些都可以用来创建更加丰富和动态的网页界面。

System

2024-08-20

所有,css3

HTML5 提供了许多新的语义化标签和多媒体标签，以及一些新的表单和表单属性。

新的语义化标签：

HTML5 引入了许多新的语义化标签，例如 <header>, <nav>, <section>, <article>, <aside>, <footer> 等，这些标签可以让页面的结构更清晰，有利于搜索引擎的爬取和页面的重构。

示例代码：




<header>头部信息</header>
<nav>导航链接</nav>
<section>一个章节</section>
<article>一篇文章</article>
<aside>侧边内容</aside>
<footer>底部信息</footer>

新的多媒体标签：

HTML5 引入了 <audio> 和 <video> 标签用于音频和视频的播放。

示例代码：




<!-- 音频 -->
<audio src="music.mp3" controls></audio>
 
<!-- 视频 -->
<video src="movie.mp4" controls></video>

新的 input 表单：

HTML5 引入了很多新的 input 类型，例如 email, url, number, range, date, time 等，这些新的类型可以提高输入验证的准确性，并且提供了更好的输入控制。

示例代码：




<form>
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username">
  
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email">
  
  <label for="age">年龄:</label>
  <input type="number" id="age" name="age" min="0" max="100">
  
  <input type="submit">
</form>

新的表单属性：

HTML5 为表单元素提供了很多新的属性，例如 required, pattern, min, max 等，这些属性可以提高表单的验证功能。

示例代码：




<form>
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" required>
  
  <label for="email">邮箱:</label>
  <input type="text" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  
  <input type="submit">
</form>

以上就是 HTML5 中的一些新特性，这些新特性有助于开发者更好地构建更加语义化、功能更加丰富的网页。

- 阅读更多 -