分类 css3 下的文章

2024-08-19

要实现CSS边框流光效果，可以使用CSS动画和box-shadow属性来创建流光效果。以下是一个简单的示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 边框流光效果</title>
<style>
  .glowing-border {
    width: 200px;
    height: 200px;
    background-color: #fff;
    border: 2px solid #333;
    margin: 50px;
    animation: glow 1s ease-in-out infinite alternate;
  }
 
  @keyframes glow {
    from {
      box-shadow: 0 0 10px #333;
    }
    to {
      box-shadow: 0 0 20px #333;
    }
  }
</style>
</head>
<body>
<div class="glowing-border"></div>
</body>
</html>

在这个例子中，.glowing-border 类定义了一个带有白色背景和黑色边框的方形盒子。@keyframes glow 关键帧动画会在1秒内改变box-shadow属性，从10px扩展到20px，产生边缘发光效果。animation 属性设置了动画的名称、持续时间、时间函数、循环次数和方向。这里使用infinite循环次数和alternate方向，以便动画无限次数地来回播放。

- 阅读更多 -

CSS3 转换，深入理解Flutter动画原理，前端基础图形

System

2024-08-19

所有,css3




/* 定义一个简单的动画 */
@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}
 
/* 应用动画到一个元素上 */
div {
  width: 100px;
  height: 100px;
  animation-name: example; /* 指定使用的动画名称 */
  animation-duration: 4s; /* 指定动画完成一个周期所需的时间 */
  animation-timing-function: linear; /* 动画的速度曲线 */
  animation-iteration-count: infinite; /* 动画无限次数播放 */
  animation-direction: alternate; /* 动画在每次迭代中反向播放 */
}

在Flutter中，我们可以使用AnimationController和Tween来实现类似的动画效果。以下是一个简单的示例：




import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
 
class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<Color> animation;
 
  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      duration: const Duration(seconds: 4),
      vsync: this,
    )..repeat(reverse: true);
 
    animation = ColorTween(begin: Colors.red, end: Colors.yellow).animate(controller);
  }
 
  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedBuilder(
        animation: controller,
        builder: (context, child) {
          return Container(
            width: 100,
            height: 100,
            color: animation.value,
          );
        },
      ),
    );
  }
}

在这个示例中，我们创建了一个AnimationController，设置了动画的时长和重复方式。然后，我们使用ColorTween来创建一个颜色的变化动画，并将其应用到一个Container上。AnimatedBuilder则负责在动画每次更新时重新构建widget，以反映当前动画的状态。这个例子展示了如何在Flutter中实现和CSS3转换类似的动画效果。

- 阅读更多 -

css修改滚动条样式

System

2024-08-19

所有,css3

在 CSS 中，可以使用 ::-webkit-scrollbar 选择器来修改滚动条的样式。以下是几种不同的实现方法：

使用 ::-webkit-scrollbar 修改滚动条的宽度、高度、颜色和背景：




/* 修改垂直滚动条 */
::-webkit-scrollbar {
  width: 10px; /* 修改宽度 */
}
 
/* 修改滚动条轨道背景色 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
 
/* 修改滚动条滑块颜色 */
::-webkit-scrollbar-thumb {
  background-color: #888;
}
 
/* 修改滚动条滑块悬停时的颜色 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

使用 ::-webkit-scrollbar 修改滚动条的样式，同时使用伪类 :hover 修改滚动条滑块悬停时的样式：




/* 修改垂直滚动条 */
::-webkit-scrollbar {
  width: 10px; /* 修改宽度 */
}
 
/* 修改滚动条轨道背景色 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
 
/* 修改滚动条滑块颜色 */
::-webkit-scrollbar-thumb {
  background-color: #888;
}
 
/* 修改滚动条滑块悬停时的颜色 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}
 
/* 修改滚动条滑块移动时的颜色 */
::-webkit-scrollbar-thumb:active {
  background-color: #333;
}
 
/* 修改滚动条滑块的圆角 */
::-webkit-scrollbar-thumb {
  border-radius: 5px;
}

使用 ::-webkit-scrollbar 修改垂直滚动条的样式，并通过 ::-webkit-scrollbar-thumb 自定义滑块的样式：




/* 修改滚动条的宽度和颜色 */
::-webkit-scrollbar {
  width: 10px;
  background-color: #f1f1f1;
}
 
/* 修改滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px; /* 修改滑块圆角 */
}
 
/* 修改滚动条滑块悬停时的样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

这些方法可以应用于大多数支持 WebKit 内核的浏览器，如 Chrome、Safari 等。请根据实际需求选择适合的方法进行滚动条样式的修改。

- 阅读更多 -

(已更新)2023春节倒计时新款HTML单页源码

System

2024-08-19

所有,css3




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>春节倒计时</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #2e3440;
            font-family: Arial, sans-serif;
            color: #d7dae0;
        }
        .countdown {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .timer {
            font-size: 3em;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="countdown">
        <div class="timer">
            <!-- 倒计时显示 -->
        </div>
        <button onclick="countdown()">开始倒计时</button>
    </div>
 
    <script>
        function countdown() {
            const newYear = new Date('2023-02-02T00:00:00'); // 假设为2023年春节
            const timer = document.querySelector('.timer');
 
            function updateClock() {
                const now = new Date();
                const distance = newYear - now;
 
                if (distance < 0) {
                    clearInterval(intervalId);
                    timer.innerHTML = '已经过春节！';
                    return;
                }
 
                const days = Math.floor(distance / (1000 * 60 * 60 * 24));
                const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((distance % (1000 * 60)) / 1000);
 
                timer.innerHTML = `剩余时间: <strong>${days} 天 ${hours} 小时 ${minutes} 分 ${seconds} 秒</strong>`;
            }
 
            updateClock(); // 首次运行
            const intervalId = setInterval(updateClock, 1000);
        }
    </script>
</body>
</html>

这个代码实例提供了一个简单的HTML页面，其中包含了一个倒计时器。当用户点击按钮时，页面上会显示春节剩余的天数、小时、分钟和秒数。代码使用了JavaScript来计算时间差异，并通过CSS为页面元素设置样式。这个实例可以作为创建类似功能

- 阅读更多 -

CSS3浮动定位float理解及浮动高度坍塌的解决方法

System

2024-08-19

所有,css3

浮动定位float是CSS中的一个属性，用于创建浮动框，实现文本环绕效果。浮动框可以是左浮动(float: left;)或右浮动(float: right;)。当元素浮动之后，会脱离正常的文档流，从而导致父元素的高度塌陷（也称为浮动高度坍塌问题）。

解决浮动高度坍塌的方法有很多种，以下是几种常用的解决方法：

使用clearfix技术：在父元素的末尾添加一个:after伪元素，并设置clear: both;。




.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

使用overflow: auto;或overflow: hidden;：在父元素中设置这个属性可以清除内部浮动造成的影响。




.parent {
  overflow: auto;
}

使用display: flex;：在父元素中使用Flexbox布局可以避免浮动高度坍塌问题。




.parent {
  display: flex;
}

使用display: inline-block;：在子元素中使用这个属性可以避免浮动造成的高度坍塌问题。




.child {
  display: inline-block;
}

使用<br style="clear: both;">：在父元素的末尾添加这个标签，可以清除内部浮动造成的影响。




<div class="parent">
  <!-- 浮动元素 -->
  <br style="clear: both;">
</div>

选择哪种方法取决于具体情况，如果需要兼容更多的浏览器或者使用Flexbox等现代布局技术不是选择，则可能需要考虑使用clearfix技术或者overflow属性。

- 阅读更多 -

CSS3媒体查询实现不同宽度的下不同内容的展示

System

2024-08-19

所有,css3




/* 设置默认样式 */
.content {
  background-color: #f9f9f9;
  padding: 20px;
  font-size: 16px;
}
 
/* 当屏幕宽度小于或等于600px时，修改.content的样式 */
@media screen and (max-width: 600px) {
  .content {
    background-color: #ddd;
    font-size: 14px;
  }
}
 
/* 当屏幕宽度在400px到600px之间时，修改.content的样式 */
@media screen and (min-width: 400px) and (max-width: 600px) {
  .content {
    background-color: #bbb;
    padding: 10px;
  }
}
 
/* 当屏幕宽度小于400px时，修改.content的样式 */
@media screen and (max-width: 400px) {
  .content {
    background-color: #999;
    padding: 5px;
  }
}

这段代码定义了一个.content类，并使用媒体查询定义了在不同屏幕宽度下该类应用的不同样式。这是响应式设计的一个基本示例，可以根据实际需求进行扩展和应用。

- 阅读更多 -

css 改变下划线长度，伪元素模拟border-bottom

System

2024-08-19

所有,css3

在CSS中，我们可以使用伪元素来模拟border-bottom，并通过调整伪元素的宽度来改变下划线的长度。以下是一个示例：




.underline-container {
  position: relative;
  display: inline-block; /* 或者 block 根据需求 */
}
 
.underline-container::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 1px solid black; /* 设置下划线的样式 */
  width: 100%; /* 默认长度为100% */
}
 
.custom-length::after {
  width: 50%; /* 示例：设置为父容器宽度的一半 */
}

HTML部分：




<div class="underline-container">默认长度下划线</div>
<div class="underline-container custom-length">自定义长度下划线</div>

在这个例子中，.underline-container 类定义了一个容器，该容器的文本下方会有一个模拟的下划线。.underline-container::after 伪元素用来创建下划线，并且可以通过调整.custom-length::after中的width属性来改变下划线的长度。

- 阅读更多 -

H5+CSS3+JS逆向前置——HTMLtable表格标签

System

2024-08-19

所有,css3

在HTML中，<table>标签用于创建表格布局。以下是一个简单的HTML表格示例，使用了HTML、CSS和JavaScript（简称H5+CSS3+JS）：




<!DOCTYPE html>
<html>
<head>
<style>
  table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
  }
  th, td {
    padding: 5px;
    text-align: left;
  }
</style>
</head>
<body>
 
<h2>HTML Table</h2>
 
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Smith</td>
    <td>25</td>
  </tr>
</table>
 
</body>
</html>

这段代码创建了一个具有标题行和两行数据的表格。CSS用于设置表格的样式，包括边框、内边距和文本对齐方式。这个示例展示了如何使用HTML创建表格结构，并通过CSS进行样式化，这是学习Web开发的基础知识。

- 阅读更多 -

CSS打造图片翻转立体3D效果

System

2024-08-19

所有,css3

要使用CSS创建图片翻转的3D效果，你可以使用transform属性中的rotateY函数来实现Y轴的旋转，以及使用perspective和transform-style来创建3D效果。以下是一个简单的例子：

HTML:




<div class="flip-container">
  <div class="flipper">
    <div class="front">
      <img src="image-front.jpg" alt="Front Image">
    </div>
    <div class="back">
      <img src="image-back.jpg" alt="Back Image">
    </div>
  </div>
</div>

CSS:




.flip-container {
  perspective: 1000px; /* 创建3D效果的视距 */
}
 
.flipper {
  transition: transform 0.6s;
  transform-style: preserve-3d; /* 让子元素在3D空间中呈现 */
  position: relative;
}
 
.front, .back {
  backface-visibility: hidden; /* 隐藏翻转的背面 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
 
.front {
  z-index: 2;
}
 
.back {
  transform: rotateY(180deg); /* 翻转180度 */
  z-index: 1;
}
 
/* 鼠标悬浮时翻转 */
.flip-container:hover .flipper {
  transform: rotateY(180deg);
}

这段代码会创建一个容器，其中包含一个带有前后两个面的元素。当鼠标悬停在容器上时，.flipper会旋转180度，显示出背面的图片。通过设置backface-visibility: hidden;，可以在翻转时隐藏不可见的背面，给用户一种看起来像是图片翻转的效果。

- 阅读更多 -

CSS 高频按钮样式

System

2024-08-19

所有,css3

以下是一个简单的CSS样式，用于创建一个具有基本交互反馈的按钮：




.button {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 5px;
  box-shadow: 0 9px #999;
}
 
.button:hover { background-color: #3e8e41 }
.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

这段代码定义了一个.button类，它可以被应用到HTML中的任何按钮元素上。当鼠标悬停在按钮上时，会改变背景颜色；当按钮被激活（即按下去）时，会有一个阴影下沉并且按钮向下移动。这个样式非常基础，但是提供了一个交互的开始，可以根据需要进行扩展和定制。

- 阅读更多 -