标签 css 下的文章

css3 背景大小background-size属性实现鼠标移入文字下划线动画效果

2024-08-07

要实现鼠标移入时的文字下划线动画效果，可以使用CSS3的background-size属性来实现。以下是一个简单的例子，展示了如何使用背景大小来实现这种效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .underline-animation {
    display: inline-block;
    position: relative;
    font-size: 24px;
    background: linear-gradient(to right, #ff6347, #ffa500);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: bottom;
    transition: background-size 0.3s;
  }
 
  .underline-animation:hover {
    background-size: 100% 2px;
  }
</style>
</head>
<body>
 
<h1 class="underline-animation">Hover over me!</h1>
 
</body>
</html>

在这个例子中，.underline-animation 类定义了一个带下划线的文本。通过调整background-size的大小，我们可以在鼠标悬停时创建一个更宽的下划线动画。background属性定义了一个颜色渐变，用来作为下划线的颜色。渐变从左到右，从红色过渡到橙色。transition属性用来平滑地过渡背景大小的变化。

System

2024-08-07

所有,css3

在CSS3中，3D转换是一种强大的工具，可以创建丰富的交互式3D效果和动画。以下是一些关键的3D转换属性：

translate3d(tx, ty, tz): 定义3D转换，其中tx, ty, tz分别代表在X, Y, Z轴上的位移。
rotate3d(x, y, z, angle): 定义3D旋转，其中x, y, z代表旋转轴的方向的因子，angle代表旋转的角度。
perspective(n): 为3D转换元素提供透视视图。n代表透视的距离，通常需要设置在转换元素的父元素上。
transform-style(flat|preserve-3d): 指定内嵌元素如何在3D空间中显示。flat为默认值，表示内嵌元素不进行3D转换；preserve-3d表示内嵌元素应该保持其3D转换。

示例代码：




/* 设置父元素的透视效果 */
.parent {
  perspective: 600px;
}
 
/* 设置子元素进行3D转换 */
.child {
  transform-style: preserve-3d;
  transform: translate3d(50px, 100px, 20px) rotate3d(1, 1, 1, 30deg);
}

在这个例子中，.child元素相对于其父元素.parent进行了3D转换，先在X轴和Y轴上移动了50px和100px，在Z轴上移动了20px，然后绕X, Y, Z轴各旋转了30度。

- 阅读更多 -

CSS3弹性布局Flex

System

2024-08-07

所有,css3

CSS3弹性布局（Flexbox）是一种现代化的布局模型，使得复杂的布局变得更加简单。Flexbox可以使容器的子项在任何方向上排列，并且可以弹性地伸缩以填充可用空间。

以下是一个简单的Flexbox布局示例：

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; /* 使用弹性布局 */
  flex-direction: row; /* 设置主轴方向为水平 */
  justify-content: space-around; /* 子项在主轴方向上分散对齐 */
  align-items: center; /* 子项在交叉轴方向上居中对齐 */
  height: 100px; /* 容器高度 */
  background-color: lightblue; /* 背景颜色 */
}
 
.flex-item {
  margin: 5px; /* 子项间隔 */
  padding: 10px; /* 子项内填充 */
  background-color: coral; /* 子项背景颜色 */
  color: white; /* 字体颜色 */
  font-size: 16px; /* 字体大小 */
}

这个例子中，.flex-container 类使用 display: flex 属性启用Flexbox布局。flex-direction 属性设置为 row 表示子项沿着水平方向排列。justify-content 属性设置为 space-around 表示子项在水平方向上分散对齐，align-items 属性设置为 center 表示子项在垂直方向上居中对齐。

- 阅读更多 -

html5和css3新增

System

2024-08-07

所有,css3

HTML5和CSS3在新版本中增加了许多新特性，以下是一些常见的新特性和示例代码：

HTML5 Canvas：

Canvas 提供了一个绘图 API，可以用来创建图表、游戏等。




<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 150, 75);
</script>

HTML5 视频和音频：

使用 <video> 和 <audio> 标签可以轻松嵌入视频和音频内容。




<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
 
<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

HTML5 新的表单输入类型：

例如，日期选择器、数字输入、邮件输入等。




<form>
  Email: <input type="email" name="user_email">
  Birthday: <input type="date" name="user_birthday">
  Age: <input type="number" name="user_age" min="0" max="100">
</form>

HTML5 新的语义标签：

如 <header>, <nav>, <section>, <article>, <aside>, <footer> 等，有利于搜索引擎和开发者理解页面内容。




<header>
  <h1>My First HTML5 Document</h1>
</header>
<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>
<section>
  <h2>W3C</h2>
  <p>The World Wide Web Consortium (W3C) is a community of companies, governments, and individuals that work together to build open, universal standards for the World Wide Web.</p>
</section>
<footer>
  <p>© 2023 W3C. All Rights Reserved.</p>
</footer>

CSS3 动画、变换和过渡：

使得页面的效果更加丰富和生动。




/* 关键帧动画 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
/* 应用动画 */
.example {
  animation-name: example;
  animation-duration: 4s;
}
 
/* 3D 变换 */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotateY(45deg);
}
 
/* 圆角边框 */
.rounded-border {
  border: 2px solid #000;
  border-radius: 25px;
}

CSS3 媒体查询：

可以根据设备的屏幕大小和分辨率提供不同的样式规则。




/* 针对宽度在 600px 以下的屏幕 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

这些新特性和示例代码只是HTML5和CSS3中的

- 阅读更多 -

前端之css层叠样式表一

System

2024-08-07

所有,css

CSS层叠样式表（Cascading Style Sheets, CSS）是一种用来描述HTML或XML（包括各种XML方言，如SVG，MathML等）文档样式的语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS的主要目的是确定页面元素如何展示，包括颜色、布局、字体、边距、宽度、高度等。

CSS的基本语法规则包括选择器和声明，其中每条声明由一个属性和一个值组成。

以下是一些CSS的基本使用示例：

改变文本颜色和字体：




p {
  color: red;
  font-family: Arial, sans-serif;
}

设置元素的宽度和高度：




div {
  width: 100px;
  height: 100px;
  background-color: blue;
}

添加边框和边距：




h1 {
  border: 1px solid black;
  margin: 20px;
}

设置元素的显示类型：




span {
  display: block;
}

设置背景图片：




body {
  background-image: url('background.jpg');
}

CSS可以通过多种方式应用到HTML文档中，包括外部样式表、内部样式表和内联样式。

例如，外部样式表可以通过以下方式链接：




<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

内部样式表可以直接在HTML的<head>部分编写：




<head>
  <style>
    p { color: red; }
  </style>
</head>

内联样式直接在元素的style属性中设置：




<p style="color: blue;">This is a paragraph.</p>

CSS是前端开发中一个非常重要的部分，可以实现页面的样式和布局，提高用户的体验。

- 阅读更多 -

css-img图像同比缩小

System

2024-08-07

所有,css

为了在CSS中使图像同比缩小，你可以使用width或height属性，并设置一个百分比值，或者直接设置一个具体的像素值。如果你想要图像同时在宽度和高度上同比缩小，你可以设置width和height属性为相同的百分比值，或者直接设置一个新的像素值。

以下是几种使用CSS缩小图像的方法：

使用百分比值来缩小图像：




img {
  width: 50%; /* 缩小到原来的50% */
  height: 50%; /* 同时缩小高度 */
}

使用具体的像素值来缩小图像：




img {
  width: 200px; /* 缩小到200像素宽 */
  height: 150px; /* 同时缩小到150像素高 */
}

如果你想保持图像的宽高比，只设置width或height中的一个：




img {
  width: 50%; /* 只设置宽度，高度将自动保持比例 */
}

确保你的HTML代码中有相应的<img>标签，并且已经引入了CSS。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
  img {
    width: 50%; /* 或者使用具体的像素值，如：width: 200px; */
    height: auto; /* 高度自动保持比例 */
  }
</style>
</head>
<body>
  <img src="path/to/your/image.jpg" alt="Responsive Image">
</body>
</html>

在这个例子中，图像会同比缩小到原来的50%，而且高度会自动保持相应的比例。如果你设置了具体的像素值，记得同时设置height: auto以保持图像的宽高比。

- 阅读更多 -

用HTML和CSS实现提示工具（tooltip）及HTML元素的定位

System

2024-08-07

所有,css




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tooltip Example</title>
<style>
  .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* 可选的下划线提示 */
  }
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
 
    /* 位置 */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px; /* 使用负的宽度来居中 */
  
    /* 动画效果 */
    opacity: 0;
    transition: opacity 0.3s;
  }
  .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }
</style>
</head>
<body>
 
<p>悬停鼠标在文本上查看工具提示：
<span class="tooltip">悬停显示工具提示
  <span class="tooltiptext">工具提示文本</span>
</span>
</p>
 
</body>
</html>

这段代码展示了如何使用HTML和CSS创建一个简单的工具提示（tooltip）。.tooltip 类用于定义一个包含工具提示文本的元素，.tooltiptext 类用于定义工具提示的样式，并在鼠标悬停时显示。通过使用position属性和transition属性，实现了平滑的显示效果。

- 阅读更多 -

CSS颜色：RGB颜色/HEX颜色/HSL颜色（网页颜色完全总结）

System

2024-08-07

所有,css3

CSS中表示颜色的方法有多种，包括RGB、HEX（十六进制）和HSL（色相、饱和度、亮度）。以下是各种颜色表示法的示例代码：

RGB颜色：




p {
  color: rgb(255, 0, 0); /* 红色 */
}

HEX颜色：




p {
  color: #FF0000; /* 红色 */
}

HSL颜色：




p {
  color: hsl(0, 100%, 50%); /* 红色 */
}

在网页中使用这些颜色，只需将上述代码中的 p 选择器替换为你想要设置颜色的元素即可。

- 阅读更多 -

css导航栏，侧边栏

System

2024-08-07

所有,css3

要创建一个CSS导航栏和侧边栏，你可以使用HTML和CSS来实现。以下是一个简单的例子：

HTML:




<div class="navigation">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</div>
 
<div class="sidebar">
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</div>

CSS:




.navigation {
  background-color: #333;
  overflow: hidden;
}
 
.navigation li {
  float: left;
}
 
.navigation li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
.navigation li a:hover {
  background-color: #111;
}
 
.sidebar {
  background-color: #f2f2f2;
  position: fixed;
  height: 100%;
  width: 200px; /* Adjust width as needed */
  top: 0;
  left: 0;
}
 
.sidebar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
 
.sidebar li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}
 
.sidebar li a:hover {
  background-color: #555;
  color: white;
}

这个例子包括了一个水平导航栏和一个固定宽度的侧边栏。导航栏有背景颜色，并且链接在悬停时改变颜色。侧边栏固定在页面左侧，可以通过调整宽度来适应设计。

- 阅读更多 -

CSS-定位算法

System

2024-08-07

所有,css

CSS定位算法主要是指通过CSS属性来控制元素在页面中的位置，常用的定位属性包括position, top, right, bottom, left, 以及 z-index。

position属性：
- static：默认值，无定位。
- relative：相对定位，相对于其正常位置进行定位。
- absolute：绝对定位，相对于最近的非static定位父元素进行定位。
- fixed：固定定位，相对于浏览器窗口进行定位。
- sticky：粘性定位，根据用户的滚动位置在相对和固定定位之间切换。
top, right, bottom, left属性：
用来指定元素相对于其最近的定位父元素的偏移量。
z-index属性：
用来控制元素的堆叠顺序，值大的元素将会覆盖值小的元素。

实例代码：




/* 相对定位 */
.relative-box {
  position: relative;
  top: 10px;
  left: 20px;
}
 
/* 绝对定位 */
.absolute-box {
  position: absolute;
  top: 50px;
  right: 30px;
}
 
/* 固定定位 */
.fixed-box {
  position: fixed;
  bottom: 0;
  left: 0;
}
 
/* 粘性定位 */
.sticky-box {
  position: sticky;
  top: 0;
}

HTML结构：




<div class="relative-box">相对定位</div>
<div class="absolute-box">绝对定位</div>
<div class="fixed-box">固定定位</div>
<div class="sticky-box">粘性定位</div>

- 阅读更多 -