1. 首页
  2. 标签
  3. css
纯css实现那些超炫酷的动画效果
System
2024-08-15
所有,css3

CSS可以实现各种炫酷的动画效果，以下是一些常见的超炫酷的CSS动画效果示例：

  1. 旋转加载器（Loader）:



.loader {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top: 4px solid #3498db;
  width: 40px;
  height: 40px;
  animation: spin 2s linear infinite;
}
 
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
  1. 滑入效果（Slide in）:



.slide-in {
  animation: slide-in 0.5s ease-in forwards;
}
 
@keyframes slide-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
  1. 淡入淡出效果（Fade in/out）:



.fade-in-out {
  animation: fade-in-out 2s ease-in-out infinite;
}
 
@keyframes fade-in-out {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
  1. 背景渐变动画（Background Gradient Animation）:



.gradient-animation {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400%;
  animation: gradient 15s ease infinite;
}
 
@keyframes gradient {
  0% {
    background-position: 0%;
  }
  50% {
    background-position: 100%;
  }
  100% {
    background-position: 0%;
  }
}

这些示例展示了如何使用CSS动画制作炫酷的视觉效果。开发者可以根据自己的需求调整这些代码，或者创造自己的动画。

- 阅读更多 -
html+css简单登录注册及密码重置页面
System
2024-08-15
所有,css3

以下是一个简单的HTML和CSS结合的登录注册及密码重置页面的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login & Register Form</title>
<style>
    body { font-family: Arial, sans-serif; }
    .form-container { max-width: 300px; margin: 50px auto; }
    form { display: flex; flex-direction: column; }
    form label { margin-bottom: 10px; }
    form input[type="text"], form input[type="password"] { margin-bottom: 10px; }
    form button { margin-top: 10px; }
</style>
</head>
<body>
 
<div class="form-container">
    <h2>Login</h2>
    <form id="login-form">
        <label for="login-username">Username:</label>
        <input type="text" id="login-username" required>
        <label for="login-password">Password:</label>
        <input type="password" id="login-password" required>
        <button type="submit">Login</button>
    </form>
 
    <h2>Register</h2>
    <form id="register-form">
        <label for="register-username">Username:</label>
        <input type="text" id="register-username" required>
        <label for="register-email">Email:</label>
        <input type="text" id="register-email" required>
        <label for="register-password">Password:</label>
        <input type="password" id="register-password" required>
        <button type="submit">Register</button>
    </form>
 
    <h2>Forgot Password?</h2>
    <form id="forgot-password-form">
        <label for="forgot-password-email">Email:</label>
        <input type="text" id="forgot-password-email" required>
        <button type="submit">Reset Password</button>
    </form>
</div>
 
</body>
</html>

这个示例提供了简单的登录注册及密码重置表单。CSS样式使得表单有基本的排版和对齐，提升用户体验。HTML结构清晰，容易修改和扩展。

- 阅读更多 -
CSS3 布局模型+CSS3 浮动
System
2024-08-15
所有,css3

CSS3 并没有一个正式的“布局模型”，但是CSS3引入了一些新的布局特性，比如Flexbox和Grid。这些布局特性可以用来创建更加灵活和强大的布局。

  1. Flexbox布局模型：

Flexbox布局模型提供了一种新的方式来布置容器内的项目，可以用来创建弹性布局。




.container {
  display: flex; /* 或者 inline-flex */
}
  1. Grid布局模型：

Grid布局模型是一个基于网格的二维布局系统，它使得我们能够创建更为复杂的布局。




.container {
  display: grid;
  grid-template-columns: 100px 200px auto;
  grid-template-rows: 100px 200px auto;
}

至于CSS3的浮动，可以使用float属性来实现文本环绕图像的效果。




img {
  float: left; /* 图像会浮动到左边，文本会环绕它 */
}

注意：CSS3的浮动并不是用来创建复杂的布局系统的，它主要是用来实现文字环绕图片的效果。如果你需要创建更复杂的布局，应该优先考虑使用Flexbox或Grid布局模型。

- 阅读更多 -
CSS3实现透明的气泡框
System
2024-08-15
所有,css3



/* 气泡框样式 */
.bubble {
    position: relative;
    background-color: rgba(255, 255, 255, 0.7); /* 白色背景，70% 不透明度 */
    border-radius: 10px; /* 圆角 */
    padding: 10px; /* 内边距 */
    border: 1px solid #ccc; /* 边框 */
}
 
/* 气泡箭头样式 */
.bubble:after {
    content: '';
    position: absolute;
    top: 50%; /* 位于容器的中间 */
    left: 100%; /* 位于容器右侧 */
    border-width: 10px; /* 箭头大小 */
    border-style: solid;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.7); /* 上边框透明，其余为背景颜色 */
    border-radius: 0 0 10px 10px; /* 圆角 */
}
 
/* 气泡内文本样式 */
.bubble p {
    margin: 0; /* 重置边距 */
    color: #333; /* 文本颜色 */
}

这段代码定义了一个气泡框的基本样式，并使用伪元素 :after 来创建一个三角形的箭头，使得气泡看起来像是指向某个方向。气泡框具有圆角和透明背景，并且可以通过调整 border-radius、background-color 和 border 属性来自定义它的样式。

- 阅读更多 -
CSS圆角 border-radius属性详解:
System
2024-08-15
所有,css3

CSS的border-radius属性用于设置元素的圆角。它可以接受1到4个值，分别对应一个或多个圆角。

基本语法如下：




border-radius: 1-4 length | percentage;

其中，length是一个长度值，比如像素(px)或em，percentage是相对于元素的宽度或高度的百分比。

示例代码：




/* 所有圆角都是10像素 */
div {
  border-radius: 10px;
}
 
/* 水平圆角为10像素，垂直圆角为5像素 */
div {
  border-radius: 10px 5px;
}
 
/* 左上角和右下角是10像素，右上角和左下角是5像素 */
div {
  border-radius: 10px 5px 15px 20px; /* 顺时针方向 */
}
 
/* 使用百分比 */
div {
  border-radius: 50%;
}

border-radius可以设置为一个值（正圆形）、两个值（横向和纵向圆角分别设置）、三个值（一个四边形）或四个值（独立设置每个角）。当设置为50%时，会形成一个完美的圆形。

- 阅读更多 -
CSS实现按钮边框动画效果
System
2024-08-15
所有,css3



/* 定义按钮的基本样式 */
.button {
  border: 2px solid #1e90ff; /* 设置初始边框颜色和宽度 */
  padding: 10px 20px; /* 设置内边距 */
  border-radius: 5px; /* 设置边框圆角 */
  background-color: transparent; /* 设置背景颜色为透明 */
  color: #1e90ff; /* 设置文本颜色 */
  font-size: 16px; /* 设置字体大小 */
  cursor: pointer; /* 设置鼠标光标为指针形状 */
  outline: none; /* 去除点击按钮时产生的默认边框 */
  transition: border-color 0.3s ease-in-out; /* 设置边框颜色过渡动画 */
}
 
/* 当按钮处于悬浮状态时改变边框颜色 */
.button:hover {
  border-color: #000000; /* 设置悬浮时的边框颜色 */
}
 
/* 当按钮被点击时改变边框颜色 */
.button:active {
  border-color: #ffd700; /* 设置点击时的边框颜色 */
}

这段代码定义了一个按钮的基本样式，并且通过:hover和:active伪类选择器添加了悬浮和点击时的样式变化。通过transition属性还添加了一个边框颜色变化的平滑过渡效果。这是一个简单的CSS按钮边框颜色动画示例。

- 阅读更多 -
通过css div 制作手机端 卡片左右滑动效果
System
2024-08-15
所有,css3

要使用CSS创建一个手机端卡片左右滑动的效果，可以使用HTML结构，结合CSS动画和touch事件来实现。以下是一个简单的示例：

HTML:




<div class="container">
  <div class="card">
    <div class="card-content">
      <!-- 卡片内容 -->
      卡片内容
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <!-- 卡片内容 -->
      卡片内容
    </div>
  </div>
</div>

CSS:




.container {
  display: flex;
  overflow-x: auto; /* 使容器可滚动 */
  -webkit-overflow-scrolling: touch; /* 适用于移动设备的流畅滚动 */
}
 
.card {
  flex-shrink: 0; /* 防止卡片缩小以适应空间 */
  width: 300px; /* 卡片宽度 */
  margin-right: 10px; /* 卡片之间的间隔 */
  touch-action: pan-y; /* 允许仅垂直滚动 */
}
 
.card-content {
  padding: 20px; /* 卡片内填充 */
  text-align: center; /* 文本居中 */
  background-color: #fff; /* 卡片背景色 */
  border: 1px solid #ddd; /* 卡片边框 */
}

这段代码创建了一个容器，其中包含多个卡片。卡片可以通过左右滑动在手机端进行浏览。使用overflow-x: auto;和-webkit-overflow-scrolling: touch;可以在移动设备上提供流畅的滚动体验。

请注意，这只是一个基础示例，您可能需要根据实际需求进行样式调整和功能添加。

- 阅读更多 -
CSS3相比CSS有哪些变化
System
2024-08-15
所有,css3

CSS3是CSS（级别4）的更新版本，引入了许多新特性，包括更强大的选择器、阴影、变换、动画、图像过滤等。

主要的变化包括：

  1. 选择器：包括属性选择器、结构性伪类选择器等。
  2. 阴影和图像效果：box-shadow、text-shadow、border-image等。
  3. 变换和动画：transform、transition、animation等。
  4. 多列布局：multi-column layout。
  5. 颜色：增加了更多的颜色值和方式（如RGBA和HSLA）。
  6. 字体：@font-face规则允许网页下载字体，而不是使用用户系统中的字体。
  7. 媒体查询：可以根据设备特性（如屏幕尺寸、分辨率等）应用不同的样式。
  8. 边框和轮廓：border-radius、border-image等。
  9. 渐进增强和优雅降级：更好地支持不支持CSS3的浏览器。

示例代码：




/* CSS3 阴影效果 */
div {
  box-shadow: 10px 10px 5px #888888;
  border-radius: 10px; /* 圆角边框 */
}
 
/* CSS3 动画 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
div {
  animation-name: example;
  animation-duration: 4s;
}
 
/* CSS3 多列布局 */
article {
  column-count: 3;
  column-gap: 20px;
}

这些新特性使得网页设计师和开发者能创建更为生动和复杂的页面效果。

- 阅读更多 -
[CSS]CSS3 多列
System
2024-08-15
所有,css3

CSS3 的多列布局特性允许您创建自动分列的布局，使得文本可以横向流动。这是通过 column-width、column-count 和其他相关属性来实现的。

以下是一些基本的CSS3多列属性：

  • column-count: 定义列的数量。
  • column-gap: 定义列与列之间的间隙。
  • column-rule: 定义列之间的分隔线（类似于边框的样式）。

示例代码：




.multi-column {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3;    /* Firefox */
  column-count: 3;
  
  -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
  -moz-column-gap: 20px;    /* Firefox */
  column-gap: 20px;
  
  -webkit-column-rule: 1px solid #ccc; /* Chrome, Safari, Opera */
  -moz-column-rule: 1px solid #ccc;    /* Firefox */
  column-rule: 1px solid #ccc;
}

HTML 使用该样式的示例：




<div class="multi-column">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales consectetur purus, at blandit nulla egestas nec. Donec vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla velit. Sed vel nulla vel
- 阅读更多 -
用 CSS3 实现切换按钮
System
2024-08-15
所有,css3

在CSS3中，可以使用transition属性和伪类:checked来创建一个简单的切换按钮。以下是一个例子：

HTML:




<label class="switch">
  <input type="checkbox" />
  <span class="slider"></span>
</label>

CSS:




/* 切换按钮的样式 */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
 
/* 隐藏默认的选择框 */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
 
/* 滑块 */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}
 
/* 当选择框被选中时，滑块的样式 */
.switch input:checked + .slider {
  background-color: #2196F3;
}
 
/* 点击选择框时，滑块移动位置 */
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}
 
/* 当选择框被选中时，小圆点的位置 */
.switch input:checked + .slider:before {
  left: 54px;
}

这段代码创建了一个简单的切换按钮，当用户点击时，滑块会移动到另一侧，并且小圆点的颜色会改变。这个例子使用了伪类:checked来检测复选框是否被选中，并使用CSS过渡效果(transition)来平滑地改变样式。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号