分类 css3 下的文章

HTML5超炫酷特效【天空中白云飘动CSS3特效】HTML+CSS+JavaScript

2024-08-23

以下是实现天空中白云飘动CSS3特效的完整示例代码：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Cloud Animation</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  .clouds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
  }
  .clouds-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #c9d7f1;
    z-index: 1;
  }
  .clouds-fg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAyCAYAAACoPV+aAAAgAElEQVR4Xu3UQQ2AMAhD7+v58I3f0H9/3+D19/v39/f39/vH9/f3+Dg4GBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBg

- 阅读更多 -

元素随滚动条滚动后固定在某个地方 & JS原生滚动加载动画

System

2024-08-23

所有,css3

要实现元素随滚动条滚动后固定在某个位置，可以使用JavaScript监听滚动事件，并根据页面的滚动位置来更新元素的position属性。以下是一个简单的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Element on Scroll</title>
<style>
  body, html {
    height: 200%;
    margin: 0;
    padding: 0;
  }
  .sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 10px; /* 距顶部10px的位置固定 */
    background-color: yellow;
    padding: 50px;
    font-size: 20px;
  }
</style>
</head>
<body>
 
<div class="sticky">
  我会在滚动到顶部10px处时固定在这个位置。
</div>
 
<script>
// 如果不支持position: sticky，可以使用以下代码作为备用
/*
window.onscroll = function() {
  var sticky = document.querySelector('.sticky');
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  if (scrollTop > 10) {
    sticky.style.position = 'fixed';
    sticky.style.top = '10px';
  } else {
    sticky.style.position = '';
  }
};
*/
</script>
 
</body>
</html>

在这个例子中，.sticky 类定义了元素在滚动到顶部10像素时的固定样式。当浏览器支持position: sticky时，CSS会处理固定的逻辑，否则JavaScript会介入以实现相同的效果。注意，使用position: sticky可以更简单地实现这个效果，并且它具有更好的浏览器兼容性。

- 阅读更多 -

前端web实现（@、At、艾特）选人或引用数据

System

2024-08-23

所有,css3

在前端实现类似微博中的@、At、艾特(通常用于提及或引用某人)功能，可以使用JavaScript和相关的前端框架（如React、Vue等）来实现。以下是一个简单的React组件示例，展示了如何实现这一功能：




import React, { useState } from 'react';
 
const MentionInput = () => {
  const [text, setText] => useState('');
 
  const handleMention = (mentionedText) => {
    // 处理提及逻辑，例如将文本添加到提及列表
    console.log('Mentioned:', mentionedText);
  };
 
  const handleChange = (event) => {
    const value = event.target.value;
    const words = value.split(/\s+/);
    const mentions = words.filter(word => word.startsWith('@'));
 
    mentions.forEach(mention => {
      handleMention(mention.substring(1)); // 移除"@"
    });
 
    // 更新输入值，去除提及文本
    setText(value.replace(/@\w+/g, ''));
  };
 
  return (
    <textarea
      value={text}
      onChange={handleChange}
      placeholder="Type @ to mention someone"
    />
  );
};
 
export default MentionInput;

这个组件会监听文本输入框中的文本变化，并在用户输入以@开头的单词时，通过handleMention函数处理提及逻辑。在handleChange函数中，我们通过正则表达式找出所有以@开头的单词，并通过handleMention函数进行处理。处理逻辑可以根据实际需求进行扩展，例如将提及的用户信息添加到列表中或发送提及通知。

- 阅读更多 -

推荐开源项目：Licon - 纯CSS3图标库

System

2024-08-23

所有,css3

Licon是一个纯CSS3图标库，提供了超过2000种图标，可以直接通过CSS来使用。这意味着不需要任何图片，就可以在网页上展示出各种图标。

以下是如何使用Licon的一个基本示例：

首先，在HTML文件中引入Licon的CDN链接：




<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/licon@latest/dist/licon.min.css">

然后，在HTML元素中添加对应的图标类名：




<i class="licon-user"></i>

你可以通过修改图标的颜色和大小，来进一步定制图标：




i {
  color: #3498db;
  font-size: 3em;
}

这样，就可以在网页上显示出一个颜色为#3498db大小为3em的用户图标。

Licon提供了丰富的图标集合，并且所有图标都是矢量的，这意味着它们可以无限制地缩放而不失真，非常适合响应式设计和高分辨率的显示器。此外，Licon还支持多种方式来选择和搜索图标，使得使用者能够更加方便地找到并使用所需的图标。

- 阅读更多 -

uni-app 页面横向点击居中

System

2024-08-23

所有,css3

在uni-app中，要实现一个页面内的横向点击居中效果，可以使用flex布局。具体做法是在页面的容器元素上使用flexbox布局，并设置justify-content属性为center。

以下是一个简单的例子：




<template>
  <view class="container">
    <view class="clickable-item" @click="handleClick">点我</view>
  </view>
</template>
 
<script>
export default {
  methods: {
    handleClick() {
      console.log('Item clicked!');
    }
  }
}
</script>
 
<style>
.container {
  display: flex;
  justify-content: center;
  height: 100px; /* 设置容器的高度 */
}
 
.clickable-item {
  /* 设置点击区域的样式，如宽度、高度、背景色等 */
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #007AFF;
  color: white;
  /* 设置点击区域的边框、阴影等 */
}
</style>

在这个例子中，.container 类使用了flex布局，并将其justify-content属性设置为center以实现横向居中。.clickable-item 类定义了点击区域的样式，并且通过@click绑定了点击事件处理函数handleClick。当用户点击"点我"区域时，会触发handleClick方法。

- 阅读更多 -

探索CSS3.js：一款让JavaScript与CSS3无缝对接的库

System

2024-08-23

所有,css3

CSS3.js 是一个用于在JavaScript和CSS3之间创建更紧密集成的库。这样做可以简化代码并提高开发效率。以下是一个简单的示例，展示了如何使用 CSS3.js 来操作元素的 CSS 属性。

首先，确保你已经引入了 CSS3.js 库。你可以通过 CDN 或者下载库文件到本地来引入。




<script src="https://cdnjs.cloudflare.com/ajax/libs/css3js/1.3.0/css3.min.js"></script>

然后，你可以使用 CSS3.js 来操作元素的 CSS 属性，例如改变元素的颜色或者执行动画：




<div id="myElement">Hello, World!</div>
 
<script>
  // 获取元素
  var element = document.getElementById('myElement');
 
  // 使用 CSS3.js 设置背景颜色
  CSS3.set(element, 'backgroundColor', 'blue');
 
  // 使用 CSS3.js 执行动画
  CSS3.transition(element, {
    opacity: 0,
    duration: 2 // 2 秒钟的动画
  });
</script>

在这个例子中，我们首先获取了一个页面元素。然后，我们使用 CSS3.set 方法设置了该元素的背景颜色。最后，我们使用 CSS3.transition 方法创建了一个淡出效果，使元素的不透明度逐渐减少到 0，动画持续时间为 2 秒。这样，我们就可以在不修改 HTML 的情况下直接通过 JavaScript 操作元素的样式。

- 阅读更多 -

HTML5与CSS3实现动态网页

System

2024-08-23

所有,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, html {
            height: 100%;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            background-color: #f7f7f7;
        }
        .clock {
            text-align: center;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .clock-time {
            font-size: 48px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="clock">
            <div class="clock-time"></div>
        </div>
    </div>
 
    <script>
        function updateClock() {
            var now = new Date();
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();
            minutes = minutes < 10 ? '0' + minutes : minutes;
            seconds = seconds < 10 ? '0' + seconds : seconds;
            timeString = hours + ':' + minutes + ':' + seconds;
            document.querySelector('.clock-time').textContent = timeString;
        }
 
        setInterval(updateClock, 1000);
        updateClock();
    </script>
</body>
</html>

这段代码使用了CSS3的Flexbox布局来居中容器，并通过JavaScript设置了一个简单的动态时钟。它展示了如何结合使用HTML5和CSS3来创建一个动态的网页，并且代码保持简洁。

- 阅读更多 -

介绍H5新晋级的标签

System

2024-08-23

所有,css3

HTML5 引入了许多新的标签，以下是一些常见的：

section - 定义文档中的一个区块，比如章节、头部、内容或侧边栏。
article - 定义独立的内容，可以独立于页面其余部分。
aside - 定义与页面主内容相关的侧边内容。
header - 定义一个区块的头部。
hgroup - 将对标题的引用和描述组合在一起。
footer - 定义一个区块的底部。
nav - 定义导航链接。
figure - 定义一个独立的流内容，如图片、图表、照片等。
main - 定义文档的主要内容。
time - 定义一个日期或时间。

示例代码：




<section>
  <h1>章节标题</h1>
  <p>这是章节的内容。</p>
</section>
 
<article>
  <h2>文章标题</h2>
  <p>这是独立文章的内容。</p>
</article>
 
<aside>
  <p>这是侧边内容。</p>
</aside>
 
<header>
  <hgroup>
    <h1>网站标题</h1>
    <h2>副标题</h2>
  </hgroup>
</header>
 
<footer>
  <p>这是底部信息。</p>
</footer>
 
<nav>
  <ul>
    <li><a href="#">主页</a></li>
    <li><a href="#">关于</a></li>
  </ul>
</nav>
 
<figure>
  <img src="image.jpg" alt="描述性文本">
  <figcaption>这是图片的标题。</figcaption>
</figure>
 
<main>
  <p>这里是主要内容。</p>
</main>
 
<time datetime="2023-01-01">2023年1月1日</time>

- 阅读更多 -

纯 HTML + CSS 实现圆形 loading 动画效果

System

2024-08-23

所有,css3




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆形 Loading 动画</title>
<style>
  .loading-container {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(#3498db, #3498db) no-repeat center center;
    animation: spin 2s linear infinite;
    margin: 100px auto;
  }
  .loading-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, transparent 50%, #3498db 50%, #3498db);
    background-size: 200% 200%;
    animation: slide 2s linear infinite;
    border-radius: 50%;
  }
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes slide {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 100% 0;
    }
  }
</style>
</head>
<body>
<div class="loading-container"></div>
</body>
</html>

这段代码使用了CSS3的@keyframes动画和conic-gradient来创建一个圆形的loading动画效果。.loading-container是动画的主要部分，它使用conic-gradient创建旋转的圆环，并通过animation属性应用无限循环的旋转动画。.loading-container::before伪元素用于创建一个旋转的条纹效果，它的background属性被设置为线性渐变，并且通过background-size属性使渐变重复，实现条纹的动态效果。

- 阅读更多 -

简单的通过css 实现文字提示tooltip效果

System

2024-08-23

所有,css3

要通过CSS实现简单的文字提示（tooltip）效果，可以使用伪元素来创建一个浮动的tooltip。以下是实现这种效果的示例代码：

HTML:




<div class="tooltip">悬浮我看提示 <span class="tooltiptext">这是一个简单的提示文本</span></div>

CSS:




.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;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120px/2 = 60px) */
  
  /* 淡入效果 */
  opacity: 0;
  transition: opacity 0.3s;
}
 
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

这段代码定义了一个.tooltip类用于包裹需要显示tooltip的文本，以及一个.tooltiptext类用于包裹tooltip的文本内容。当鼠标悬停在.tooltip元素上时，.tooltiptext的可见性变为可见，并通过透明度变化显示出来。

- 阅读更多 -