标签 css3 下的文章

2024-08-23

CSS3 新增了许多属性，以下是一些常见的 CSS3 新增属性及其用法的简单示例：

圆角（border-radius）:




div {
  border: 2px solid #a1a1a1;
  border-radius: 25px; /* 圆角的半径 */
}

阴影（box-shadow）:




div {
  box-shadow: 10px 10px 5px #888888; /* 水平偏移 垂直偏移 模糊半径 颜色 */
}

文字阴影（text-shadow）:




p {
  text-shadow: 2px 2px 2px #888888; /* 水平偏移 垂直偏移 模糊半径 颜色 */
}

线性渐变（linear-gradient）:




div {
  background: linear-gradient(to right, red , yellow); /* 方向 颜色1 颜色2 */
}

旋转（transform: rotate）:




div {
  transform: rotate(45deg); /* 旋转的角度 */
}

转换原点（transform-origin）:




div {
  transform-origin: bottom left; /* 转换的原点位置 */
}

旋转轴点（transform-origin）:




div {
  perspective-origin: bottom left; /* 视觉的原点位置 */
}

过渡效果（transition）:




div {
  transition: width 2s, height 2s, transform 2s; /* 过渡的属性 持续时间 */
}

自定义动画（@keyframes）:




@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
div {
  animation-name: example; /* 使用 @keyframes 动画名称 */
  animation-duration: 4s; /* 动画时长 */
}

多列布局（column-width/column-gap）:




div {
  column-width: 100px; /* 列宽 */
  column-gap: 10px; /* 列间隙 */
}

这些只是 CSS3 新增属性的一小部分，CSS3 还包含了许多其他的特性，如伪元素（::before, ::after）、媒体查询（@media）、字体图标（@font-face）等。

- 阅读更多 -

【CSS3】flex布局实践篇 | 7种常见网页布局方案

System

2024-08-23

所有,css3




/* 通用样式 */
.container {
  display: flex;
  flex-direction: column; /* 默认为纵向排列 */
}
 
/* 布局一：顶部固定，底部固定，中间自适应 */
.header {
  height: 50px;
  background-color: lightblue;
}
 
.footer {
  height: 50px;
  background-color: lightcoral;
}
 
.main {
  flex: 1; /* 占据剩余空间 */
  background-color: lightgreen;
}
 
/* 布局二：侧边固定，主内容自适应 */
.sidebar {
  width: 200px; /* 固定宽度 */
  background-color: lightblue;
}
 
.content {
  flex: 1; /* 占据剩余空间 */
  background-color: lightgreen;
}
 
/* 布局三：1:2:1三等分 */
.container > div {
  flex: 1;
}
 
/* 布局四：主内容占据一定宽度，侧边自适应 */
.main-content {
  width: 80%; /* 主内容宽度 */
  background-color: lightgreen;
}
 
.side {
  flex: 1; /* 占据剩余宽度 */
  background-color: lightblue;
}
 
/* 布局五：顶部固定，底部固定，中间1:2分配 */
.header {
  height: 50px;
  background-color: lightblue;
}
 
.footer {
  height: 50px;
  background-color: lightcoral;
}
 
.main-content {
  flex: 2; /* 分配2/3空间 */
  background-color: lightgreen;
}
 
.side {
  flex: 1; /* 分配1/3空间 */
  background-color: lightcoral;
}
 
/* 布局六：上下结构，侧边固定，主内容自适应 */
.container {
  flex-direction: row; /* 改为横向排列 */
}
 
.sidebar {
  width: 200px;
  background-color: lightblue;
}
 
.content {
  flex: 1;
  background-color: lightgreen;
}
 
/* 布局七：上下结构，主内容占据一定宽度，侧边自适应 */
.main-content {
  width: 80%;
  background-color: lightgreen;
}
 
.side {
  flex: 1;
  background-color: lightblue;
}

这段代码展示了如何使用CSS Flexbox布局来创建7种常见的网页布局。每种布局都有其特定的应用场景，比如固定头尾和主内容的自适应布局，固定侧边和主内容的宽度占比布局等。通过这些实例，开发者可以快速掌握Flexbox布局的应用，提高页面布局的灵活性和可维护性。

- 阅读更多 -

HTML5 CSS3 专题：诱人的实例 3D旋转木马效果相册

System

2024-08-23

所有,css3

以下是实现3D旋转相册的核心HTML和CSS代码。这里只展示了实现相册的基本框架，实际应用中可能需要结合JavaScript来实现更复杂的动态效果。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D旋转相册</title>
<style>
  .carousel {
    width: 300px;
    height: 300px;
    perspective: 600px;
    margin: 50px auto;
  }
  .carousel-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate 10s infinite linear;
  }
  .carousel-item {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
  }
  .carousel-item img {
    width: 100%;
    height: 100%;
    display: block;
  }
  @keyframes rotate {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
  }
</style>
</head>
<body>
<div class="carousel">
  <div class="carousel-inner">
    <div class="carousel-item"><img src="image1.jpg" alt="Image 1"></div>
    <div class="carousel-item"><img src="image2.jpg" alt="Image 2"></div>
    <div class="carousel-item"><img src="image3.jpg" alt="Image 3"></div>
    <!-- 更多相册项 -->
  </div>
</div>
</body>
</html>

这段代码定义了一个名为.carousel的容器，其中包含.carousel-inner用于放置旋转的相册项。.carousel-item代表每一个旋转的相册项，其中包含一个图片。CSS中定义了@keyframes rotate动画来实现持续的旋转效果。这只是一个基础的实现，实际使用时可能需要结合JavaScript来处理用户交互和更复杂的动画逻辑。

- 阅读更多 -

HTML5 + CSS3 基础知识梳理

System

2024-08-23

所有,css3

HTML5和CSS3是现代网页设计和开发的核心技术。以下是HTML5和CSS3的基础知识点：

HTML5:

新的语义元素：<header>, <nav>, <section>, <article>, <aside>, <footer>。
表单控件增强：日期、时间、电话、邮件、URL、范围、数字输入。
媒体回放：<video> 和 <audio> 元素。
Canvas绘图：绘制图形、图表和动画。
地理定位API。
离线应用程序缓存。
存储机制：localStorage和sessionStorage。

CSS3:

边框、阴影、圆角。
渐变：线性、径向。
字体 @font-face。
转换：2D转换。
动画、变换。
多列布局。
多媒体查询。
盒模型：宽度、高度、边距、填充。

示例代码：

HTML5:




<header>
  <h1>我的网站</h1>
</header>
<nav>
  <ul>
    <li><a href="#home">主页</a></li>
    <li><a href="#about">关于</a></li>
  </ul>
</nav>
<section id="home">
  <h2>欢迎来到主页</h2>
  <p>这里是主页内容...</p>
</section>
<footer>
  <p>版权所有 &copy; 2023</p>
</footer>

CSS3:




body {
  background-color: #f2f2f2;
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
}
 
header {
  background-color: #333;
  color: #fff;
  padding: 1em;
}
 
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
nav li {
  display: inline;
  margin-right: 10px;
}
 
nav a {
  text-decoration: none;
  color: #fff;
}
 
section {
  margin: 10px 0;
  padding: 10px;
  background-color: #fff;
}
 
footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1em;
}

这个示例展示了HTML5和CSS3的基本用法，包括语义元素、媒体元素、布局和样式。

- 阅读更多 -

css3实现动画无限循环

System

2024-08-23

所有,css3

在CSS3中，可以使用animation-iteration-count属性设置动画无限循环。将其值设置为infinite即可实现无限循环的动画效果。

以下是一个简单的例子，演示如何使用CSS3创建一个无限循环的动画：




/* 定义关键帧 */
@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}
 
/* 应用动画到元素上 */
.element {
  animation-name: example;         /* 使用上面定义的关键帧名称 */
  animation-duration: 2s;          /* 动画时长为2秒 */
  animation-iteration-count: infinite; /* 动画无限循环 */
}




<div class="element">我会持续改变背景色！</div>

在这个例子中，.element类将会应用一个名为example的动画，该动画会在2秒内从红色过渡到黄色，并且这个动画会无限循环。

System

2024-08-23

所有,css3

在JavaScript中，可以使用alert()函数来创建一个简单的消息对话框。这个函数可以接受一个字符串作为参数，该字符串将显示在对话框中。

以下是一个使用alert()函数的例子：




// 显示一个简单的消息对话框
alert("这是一个消息对话框!");

当你在网页中运行这段代码时，浏览器会弹出一个对话框，对话框中会显示文本“这是一个消息对话框!”。用户只能点击“确定”按钮来关闭对话框。

- 阅读更多 -

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);
}

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

- 阅读更多 -

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类确保模糊效果不会超出设定的容器范围。

- 阅读更多 -