1. 首页
  2. 标签
  3. css
两种方式实现CSS动画，html实体字符
System
2024-08-15
所有,html

以下是使用HTML实体字符实现CSS动画的一个简单示例：

HTML:




<div class="loading">
  <!-- 使用HTML实体字符来创建加载动画 -->
  <span>加载中</span>
  <span class="dot">
    &#8226;
    &#8226;
    &#8226;
  </span>
</div>

CSS:




.loading {
  text-align: center;
}
 
.dot {
  display: inline-block;
  animation: blink 1.4s infinite both;
}
 
.dot:nth-child(2) {
  animation-delay: 0.2s;
}
 
.dot:nth-child(3) {
  animation-delay: 0.4s;
}
 
@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

这段代码会创建一个简单的点状动画，类似于传统加载器，每个点以不同的延迟开始闪烁。

- 阅读更多 -
HTML5+CSS3+移动web——HTML 基础
System
2024-08-15
所有,html

HTML5是HTML的最新标准，在原有的基础上添加了新的元素和功能，同时废弃了一些旧的元素。CSS3是CSS的最新标准，增加了许多新的特性，比如阴影、渐变、变换等。

HTML5的基础结构如下：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <header>页头内容</header>
 
    <nav>导航内容</nav>
 
    <section>
        <article>
            <h1>文章标题</h1>
            <p>这里是文章的内容。</p>
        </article>
    </section>
 
    <aside>侧边内容</aside>
 
    <footer>页脚内容</footer>
 
</body>
</html>

在这个例子中，我们使用了HTML5提供的新元素，如<header>, <nav>, <section>, <article>, <aside>, 和 <footer>等。这些元素有助于开发者写出更具语义化的代码，有利于搜索引擎的爬取和页面内容的理解，也有助于后期的维护和更新。

CSS3的基础使用示例：




/* 添加阴影效果 */
.shadow {
    box-shadow: 5px 5px 5px #888888;
}
 
/* 线性渐变背景 */
.gradient {
    background: linear-gradient(to right, red , yellow);
}
 
/* 3D旋转动画 */
.rotate {
    animation: rotate 5s infinite linear;
}
 
@keyframes rotate {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }
    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

在这个例子中，我们使用CSS3的box-shadow属性给元素添加了阴影，使用linear-gradient创建了一个线性渐变的背景，并且使用@keyframes创建了一个简单的3D旋转动画。这些新的特性提升了页面的视觉效果和用户体验。

- 阅读更多 -
html简单网页代码——火影忍者动漫7页面带特效带轮播(HTML+CSS+JavaScript)
System
2024-08-15
所有,html

以下是一个简单的HTML页面代码示例，包含了轮播图特效。请注意，为了简洁，这里只给出了页面的骨架结构和轮播图部分的代码。CSS和JavaScript的完整实现需要根据实际需求编写。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火影忍者动漫-第七页</title>
    <!-- 引入轮播图插件的CSS文件 -->
    <link rel="stylesheet" href="path/to/carousel.css">
    <style>
        /* 在这里写入页面的CSS样式 */
    </style>
</head>
<body>
    <!-- 轮播图容器 -->
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <!-- 指示点 -->
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <!-- 轮播图项 -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="path/to/slide1.jpg" alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="path/to/slide2.jpg" alt="Second slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="path/to/slide3.jpg" alt="Third slide">
            </div>
        </div>
        <!-- 控制按钮 -->
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
 
    <script>
        // 在这里写入页面的JavaScript代码，例如轮播图的初始化
        $(document).ready(function(){
            $('#carouselExampleIndicators').carousel({
                interval: 2000
            });
        });
    </script>
</body>
</html>

在这个示例中，轮播图使用了Bootstrap的组件。你需要引入相应的CSS和JavaScript文件，并初始化轮播图。这里的JavaScript代码使用了jQuery，确保在使用前已经引入了jQuery库。

- 阅读更多 -
three.js CSS2DRenderer、CSS2DObject渲染HTML标签
System
2024-08-15
所有,css

CSS2DRenderer 和 CSS2DObject 是 Three.js 中用于将 2D HTML元素渲染到3D场景中的工具。以下是如何使用这两个工具来渲染 HTML 标签的简单示例：




import * as THREE from 'three';
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
 
// 设置场景、摄像机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建CSS2DRenderer
const cssRenderer = new CSS2DRenderer();
cssRenderer.setSize(window.innerWidth, window.innerHeight);
cssRenderer.domElement.style.position = 'absolute';
cssRenderer.domElement.style.top = 0;
document.body.appendChild(cssRenderer.domElement);
 
// 创建一个2D对象
const label = document.createElement('div');
label.style.color = 'white';
label.style.background = 'red';
label.style.padding = '2px 6px';
label.style.borderRadius = '4px';
label.textContent = 'Hello, CSS2DObject!';
 
const labelObject = new CSS2DObject(label);
labelObject.position.set(0, 0, 0); // 设置在3D场景中的位置
scene.add(labelObject);
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
 
  renderer.render(scene, camera);
  cssRenderer.render(scene, camera);
}
 
animate();

在这个例子中，我们首先创建了一个新的 div HTML元素，并给它添加了一些样式。然后我们使用这个 div 元素作为参数创建了一个 CSS2DObject。最后，我们将这个 CSS2DObject 添加到了我们的3D场景中。在渲染循环中，我们调用 cssRenderer.render 方法来确保2D元素与3D场景同步更新。

- 阅读更多 -
HTML CSS3动画
System
2024-08-15
所有,html

在HTML和CSS3中创建一个简单的动画，你可以使用@keyframes规则来定义动画，然后将其应用到一个元素上。以下是一个示例：

HTML:




<div class="animated-box"></div>

CSS:




.animated-box {
  width: 50px;
  height: 50px;
  background-color: red;
  position: relative;
  animation: moveBox 2s infinite alternate;
}
 
@keyframes moveBox {
  0% {
    left: 0;
    top: 0;
  }
  100% {
    left: 200px; /* 修改为你希望动画停止的位置 */
    top: 200px; /* 修改为你希望动画停止的位置 */
  }
}

在这个例子中，.animated-box元素将沿着页面向右下角移动，动画将无限次数地执行，并且每次动画结束时它会反向播放。你可以通过调整@keyframes中的百分比来控制动画的开始和结束状态。

- 阅读更多 -
css学习：轮播图
System
2024-08-15
所有,css3

创建一个简单的CSS轮播图可以通过使用@keyframes动画和animation属性来实现。以下是一个基本的例子：

HTML:




<div class="slider">
  <div class="slide active">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
</div>

CSS:




.slider {
  position: relative;
  overflow: hidden;
  height: 300px;
}
 
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
  animation-name: slideShow;
  animation-duration: 3s;
  animation-timing-function: steps(1);
  animation-iteration-count: infinite;
}
 
.slide.active {
  display: block;
  animation-play-state: running;
}
 
/* 动画 */
@keyframes slideShow {
  0% {
    transform: translateY(0);
  }
  33% {
    transform: translateY(-100%);
  }
  66% {
    transform: translateY(-200%);
  }
  100% {
    transform: translateY(-300%);
  }
}

这个例子中，.slider是包含轮播图的容器，.slide是每张幻灯片的类。通过animation-name引用@keyframes定义的动画，每张幻灯片会平行移动显示。这个例子使用了steps(1)来实现幻灯片的切换效果，每次只移动一个单位。这个例子中假设有三张幻灯片，实际使用时可以根据需要添加更多的幻灯片。

- 阅读更多 -
【CSS3】重点知识内容，快速上手
System
2024-08-15
所有,css3

在CSS3中，有许多重要的新特性，包括选择器、盒模型、背景和边框、文字效果、2D/3D转换、动画、多列布局等。以下是一些关键点和示例代码：

  1. 选择器：

    • 属性选择器（例如，[type="text"]匹配所有type属性为text的元素）
    • 结构性伪类选择器（例如，:nth-child(2)匹配其父元素的第二个子元素）

  2. 盒模型：

    • box-sizing属性（border-box使元素的宽高包含边框和内边距）

  3. 背景和边框：

    • 圆角（border-radius）
    • 阴影（box-shadow）
    • 渐变（线性linear-gradient和径向radial-gradient）

  4. 文字效果：

    • 文字阴影（text-shadow）
    • 字体变化（font-variant）

  5. 2D/3D转换：

    • 转换（transform，包括translate, rotate, scale, skew）

  6. 动画：

    • @keyframes规则（定义动画序列）
    • animation属性（应用动画到元素上）

  7. 多列布局：

    • column-count和column-gap控制列数和间隙

示例代码：




/* 圆角边框 */
div {
  border: 1px solid #000;
  border-radius: 10px;
}
 
/* 文字阴影 */
h1 {
  text-shadow: 2px 2px 2px #000;
}
 
/* 渐变背景 */
div {
  background: linear-gradient(to right, red, yellow);
}
 
/* CSS动画 */
@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}
 
div {
  animation-name: example;
  animation-duration: 4s;
}
 
/* 多列布局 */
article {
  column-count: 3;
  column-gap: 20px;
}

CSS3提供了丰富的样式和动画功能，使得网页设计师和开发者能创建更加引人入胜的网页。上述代码是CSS3的一些简单应用，可以作为学习和入门的示例。

- 阅读更多 -
CSS鼠标悬浮图片模糊切换效果
System
2024-08-15
所有,css3

要实现鼠标悬浮图片模糊切换效果，可以使用CSS的filter属性来实现模糊效果，并结合:hover伪类来实现悬浮切换。以下是一个简单的示例：

HTML:




<div class="image-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
</div>

CSS:




.image-container {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}
 
.image-container img {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: filter 0.5s ease;
  filter: blur(3px);
}
 
.image-container img:first-child {
  filter: blur(0);
}
 
.image-container:hover img {
  filter: blur(3px);
}
 
.image-container:hover img:first-child {
  filter: blur(0);
}

这段代码会创建一个容器，其中包含两张图片。默认情况下，第一张图片没有模糊效果，而其他图片有3像素的模糊效果。当鼠标悬浮在容器上时，图片会切换，触发模糊效果的变化。

- 阅读更多 -
CSS基础——CSS3新增样式
System
2024-08-15
所有,css3

CSS3 在 CSS2.1 的基础上增加了许多新特性，包括了更加丰富的选择器、阴影、渐变、动画等功能。

  1. 选择器
  • 属性选择器：可以根据元素的属性来选择元素。



/* 选择所有 title 属性的元素 */
[title] { color: blue; }
 
/* 选择 title="test" 的元素 */
[title=test] { color: green; }
 
/* 选择 title 属性值开始为 test 的所有元素 */
[title^=test] { color: purple; }
 
/* 选择 title 属性值结束为 test 的所有元素 */
[title$=test] { color: orange; }
 
/* 选择 title 属性值包含 test 的所有元素 */
[title*=test] { color: red; }
  • 结构性伪类选择器：根据元素在文档中的位置来选择元素。



/* 选择第一个 <p> 元素 */
p:first-child { color: yellow; }
 
/* 选择最后一个 <p> 元素 */
p:last-child { color: pink; }
 
/* 选择第 n 个子元素，n 从 1 开始 */
p:nth-child(2) { color: black; }
 
/* 选择所有 <p> 元素，这些 <p> 元素是其父级的第一个子元素 */
p:first-of-type { color: grey; }
 
/* 选择所有 <p> 元素，这些 <p> 元素是其父级的最后一个子元素 */
p:last-of-type { color: brown; }
 
/* 选择所有 <p> 元素，这些 <p> 元素是其父级的第 n 个子元素，n 从 1 开始 */
p:nth-of-type(3) { color: cyan; }
  • 伪元素选择器：可以在元素的内容前后插入新内容。



/* 在每个 <p> 元素的内容前插入文本 "Start" */
p::before { content: 'Start '; }
 
/* 在每个 <p> 元素的内容后插入文本 "End" */
p::after { content: ' End'; }
  1. 阴影和渐变
  • 阴影：可以给元素添加阴影效果。



/* 给元素添加阴影 */
div {
  box-shadow: 10px 10px 5px grey;
}
  • 线性渐变：可以设置元素的背景为线性渐变。



/* 设置元素背景为线性渐变 */
div {
  background: linear-gradient(to right, red, yellow);
}
  1. 动画
  • 使用 @keyframes 创建动画，然后通过 animation 属性应用到元素上。



/* 定义一个名为 move 的动画 */
@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}
 
/* 应用动画到元素 */
div {
  animation: move 2s infinite alternate;
}
  1. 圆角和边框图片
  • 圆角：可以设置元素的角为圆角。



/* 设置元素角为圆角 */
div {
  border-radius: 20px;
}
  • 边框图片：可以设置元素的边框为图片。



/* 设置元素边框为图片 */
div {
  border-image-source: url(border.png);
  border-
- 阅读更多 -
【CSS详解】一文掌握CSS基础用法
System
2024-08-15
所有,css3

在CSS中，有几个基本概念需要理解和掌握：

  1. 选择器：选择器用于指定CSS样式的HTML标签。
  2. 声明：声明由属性和值组成，以分号结束。
  3. 规则集：由选择器和声明块组成，以花括号包围。

下面是一个简单的CSS示例，它将为所有<h1>标签设置红色文本和24px的字体大小：




h1 {
  color: red;
  font-size: 24px;
}

在HTML中使用时，这将使得所有<h1>标签显示为红色并且24像素大小的文本。

CSS还可以用来更改背景颜色、创建布局、处理链接等等。下面是一个更复杂的例子，它将为一个带有class="highlight"的<div>设置黄色背景和居中文本：




.highlight {
  background-color: yellow;
  text-align: center;
}

在HTML中使用时，这将使得所有具有class="highlight"的<div>居中对齐并具有黄色背景。

CSS是前端开发的基础技术，理解和掌握它对于创建美观、响应式的网页非常重要。

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