1. 首页
  2. 分类
  3. css3
CSS高级篇——HSL颜色
System
2024-08-15
所有,css3

HSL色彩模型（Hue, Saturation, Lightness）是基于人类对颜色的感知，与RGB颜色模型相比更易于使用和理解。HSL的颜色由色调（Hue）、饱和度（Saturation）和亮度（Lightness）定义。

在CSS中，可以使用hsl()函数来指定HSL颜色。

例如，创建一个具有特定色调、饱和度和亮度的背景色：




/* 设置一个颜色为蓝色，饱和度为100%，亮度为50% */
.element {
  background-color: hsl(240, 100%, 50%);
}

在这个例子中，.element的背景色将是一个深蓝色调的颜色，因为它具有最高的饱和度，但亮度被降低了50%。

另外，你也可以使用百分比来表示色调、饱和度和亮度：




/* 使用百分比来设置颜色 */
.element {
  background-color: hsl(240deg, 100%, 50%);
}

在这个例子中，色调是240度（蓝色），饱和度和亮度都是最大值。

HSL颜色模型提供了更多的可能性和灵活性，使得颜色的调整和控制更加直观和简单。

- 阅读更多 -
CSS3技巧37：JS+CSS3 制作旋转图片墙
System
2024-08-15
所有,css3

以下是一个使用JavaScript和CSS3制作旋转图片墙的简单示例：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Image Wall</title>
<style>
  .container {
    perspective: 1000px;
  }
  .image-wall {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    animation: rotate 5s infinite linear;
  }
  .image-wall img {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  @keyframes rotate {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(360deg);
    }
  }
</style>
</head>
<body>
<div class="container">
  <div class="image-wall">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
    <img src="image4.jpg">
    <img src="image5.jpg">
    <img src="image6.jpg">
  </div>
</div>
<script>
  const imageWall = document.querySelector('.image-wall');
  const images = Array.from(document.querySelectorAll('img'));
 
  function cloneImages() {
    images.forEach((img, index) => {
      const clone = img.cloneNode();
      clone.style.position = 'absolute';
      clone.style.zIndex = images.length - index;
      imageWall.appendChild(clone);
    });
  }
 
  function calculateRotation() {
    const angle = 360 / images.length;
    images.forEach((img, index) => {
      img.style.transform = `rotateY(${angle * index}deg) translateZ(200px)`;
    });
  }
 
  cloneImages();
  calculateRotation();
</script>
</body>
</html>

在这个示例中，我们创建了一个包含6张图片的图片墙，通过CSS3的3D转换和动画来实现它们的旋转。JavaScript用于克隆图片并计算每个图片的旋转角度。注意，为了使旋转更加真实，每个图片需要是一个独立的元素，这样它们才能独立地旋转。

- 阅读更多 -
开启Three之旅 射线、拾取模型、解决鼠标点击、Hover以及CSS3Renderer点击穿透问题
System
2024-08-15
所有,css3



// 初始化场景、相机和渲染器
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 添加灯光
var ambientLight = new THREE.AmbientLight(0xcccccc);
scene.add(ambientLight);
 
// 加载模型
var loader = new THREE.GLTFLoader();
loader.load('models/drum.gltf', function (gltf) {
    scene.add(gltf.scene);
 
    // 更新场景尺寸以适应模型
    var box = new THREE.Box3().setFromObject(gltf.scene);
    var size = box.getSize(new THREE.Vector3()).length();
    var center = box.getCenter(new THREE.Vector3());
 
    // 将相机位置设置为模型中心的特定距离
    camera.position.copy(center.clone().add(new THREE.Vector3(0, size, size * 10)));
    camera.lookAt(center);
 
    // 更新渲染器
    renderer.render(scene, camera);
}, undefined, function (error) {
    console.error(error);
});
 
// 处理鼠标事件
function onMouseClick(event) {
    // 将鼠标位置转换为three.js的坐标系
    var mouse = new THREE.Vector2();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
 
    // 创建射线
    var raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, camera);
 
    // 计算物体和射线的交点
    var intersects = raycaster.intersectObjects(scene.children);
 
    // 如果有交点，输出交点的信息
    if (intersects.length > 0) {
        console.log('Clicked object:', intersects[0].object);
    }
}
 
// 监听鼠标点击事件
document.body.addEventListener('click', onMouseClick);
 
// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

这段代码示例展示了如何加载一个GLTF模型，并在加载完成后将其添加到场景中。同时，它演示了如何使用鼠标事件来检测模型的点击，并且使用射线检测（Raycaster）来确定鼠标点击的位置在3D场景中的具体对象。这个例子简洁而完整，适用于初学者学习Three.js的基础知识。

- 阅读更多 -
[HTML]Web前端开发技术26（HTMLCSSJavaScript ）JavaScript基础——喵喵画网页
System
2024-08-15
所有,css3

以下是一个简单的示例，展示了如何使用JavaScript和CSS创建一个简单的喵喵画网页版本。




<!DOCTYPE html>
<html>
<head>
    <title>喵喵画网</title>
    <style>
        body {
            background-color: #f7f7f7;
            font-family: Arial, sans-serif;
        }
        .container {
            width: 600px;
            margin: 100px auto;
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .title {
            text-align: center;
            color: #333;
            padding: 20px;
        }
        .input-container {
            text-align: center;
            padding: 20px 0;
        }
        input[type="text"] {
            width: 80%;
            padding: 10px;
            margin: 0 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        input[type="button"] {
            padding: 10px 20px;
            background-color: #5883d3;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        input[type="button"]:hover {
            background-color: #3d66a7;
        }
        #poem {
            text-align: center;
            padding: 20px;
            color: #333;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="title">喵喵画网</div>
        <div class="input-container">
            <input type="text" id="text" placeholder="请输入内容" />
            <input type="button" value="生成喵喵" onclick="generatePoem()" />
        </div>
        <div id="poem"></div>
    </div>
    <script>
        function generatePoem() {
            var text = document.getElementById('text').value;
            var poem = text.split('').join('<br>') + '<br>哞哞哞';
            document.getElementById('poem').innerHTML = poem;
        }
    </script>
</body>
</html>

这段代码展示了如何使用JavaScript获取用户输入，并通过简单的字符串操作生成“喵喵”（即通过换行分隔每个字符来模拟），最后将生成的喵喵和用户输入的内容显示在网页上。这个示例简单易懂，适合作为学习前端开发的入门项目。

- 阅读更多 -
[HTML]Web前端开发技术29（HTMLCSSJavaScript ）JavaScript基础——喵喵画网页
System
2024-08-15
所有,css3

以下是一个简单的示例，展示了如何使用JavaScript和CSS创建一个简单的喵喵画网页版本。




<!DOCTYPE html>
<html>
<head>
    <title>喵喵画网</title>
    <style>
        body {
            background-color: #f7f7f7;
            font-family: Arial, sans-serif;
        }
        #container {
            width: 600px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        #title {
            text-align: center;
            color: #333;
        }
        #drawing-area {
            margin-top: 10px;
            text-align: center;
        }
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="container">
        <h1 id="title">喵喵画网</h1>
        <div id="drawing-area">
            <canvas id="drawing-canvas" width="500" height="500"></canvas>
        </div>
    </div>
 
    <script>
        const canvas = document.getElementById('drawing-canvas');
        const context = canvas.getContext('2d');
 
        // 绘制图形的函数
        function drawShape(shape) {
            context.beginPath();
            context.arc(250, 250, 200, 0, Math.PI * 2); // 圆形
            context.strokeStyle = 'blue';
            context.stroke();
        }
 
        // 清除画布
        function clearCanvas() {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }
 
        // 用户交互逻辑
        function handleInteraction(event) {
            clearCanvas();
            drawShape();
        }
 
        // 监听鼠标移动事件
        canvas.addEventListener('mousemove', handleInteraction);
    </script>
</body>
</html>

这段代码创建了一个简单的喵喵画网页，用户将在画布上绘制一个蓝色的圆形图案，当鼠标移动时触发重绘事件。这个示例主要用于演示如何使用JavaScript和HTML5的<canvas>元素进行基本的交互式绘图。

- 阅读更多 -
css3实现动态滚动播放列表
System
2024-08-15
所有,css3

CSS3可以用来制作动态滚动播放列表，但是CSS本身不支持动画逻辑，这通常需要结合HTML和JavaScript。以下是一个简单的HTML和CSS3结合JavaScript的例子：

HTML:




<div class="scroll-container">
  <ul class="playlist">
    <li>歌曲1</li>
    <li>歌曲2</li>
    <li>歌曲3</li>
    <!-- 更多歌曲 -->
  </ul>
</div>

CSS:




.scroll-container {
  width: 200px;
  height: 100px;
  overflow: hidden;
}
 
.playlist {
  list-style: none;
  padding: 0;
  width: 100%;
  animation: scroll 10s linear infinite;
}
 
.playlist li {
  line-height: 100px;
  text-align: center;
  font-size: 24px;
}
 
@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

JavaScript (用于计算歌曲数量并设置动画时长):




window.onload = function() {
  var playlist = document.querySelector('.playlist');
  var listItems = playlist.querySelectorAll('li');
  var listHeight = 0;
 
  // 计算列表总高度
  for (var i = 0; i < listItems.length; i++) {
    listHeight += listItems[i].offsetHeight;
  }
 
  // 设置动画时长
  playlist.style.animationDuration = (listHeight / 10) + 's';
};

这个例子中，.scroll-container 是一个固定高度的容器，.playlist 是一个无限滚动的列表。CSS @keyframes 规则定义了滚动动画，JavaScript 代码用于计算动画时长，以确保列表能够滚动完整个播放列表的内容。

- 阅读更多 -
CSS3-综合案例2-五色导航
System
2024-08-14
所有,css3



/* 设置基本的HTML元素样式 */
html, body, h1, h2, h3, h4, h5, h6, div, p, ul, li, a {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
}
 
/* 设置整个页面的背景 */
body {
    background: #f0f0f0 url('../img/bg_pattern.png') repeat;
}
 
/* 设置导航栏的基本样式 */
nav ul {
    list-style: none;
    background-color: #333;
}
 
/* 设置导航栏中的链接样式 */
nav ul li {
    float: left;
    width: 20%;
    text-align: center;
}
 
/* 设置导航栏中的链接颜色和背景颜色 */
nav ul li a {
    display: block;
    line-height: 50px; /* 设置行高以垂直居中文本 */
    color: white;
    text-decoration: none;
    background-color: #555; /* 默认的背景颜色 */
}
 
/* 设置鼠标悬停在导航链接上的样式 */
nav ul li a:hover {
    background-color: #777; /* 鼠标悬停时的背景颜色 */
}
 
/* 设置不同导航栏状态下的五种颜色 */
nav ul li a.color1:link,
nav ul li a.color1:visited {
    background-color: #ef4836; /* 红色 */
}
 
nav ul li a.color1:hover {
    background-color: #c32c1a; /* 红色 */
}
 
nav ul li a.color2:link,
nav ul li a.color2:visited {
    background-color: #f57900; /* 橙色 */
}
 
nav ul li a.color2:hover {
    background-color: #e75403; /* 橙色 */
}
 
nav ul li a.color3:link,
nav ul li a.color3:visited {
    background-color: #3498db; /* 蓝色 */
}
 
nav ul li a.color3:hover {
    background-color: #297fb1; /* 蓝色 */
}
 
nav ul li a.color4:link,
nav ul li a.color4:visited {
    background-color: #1abc9c; /* 绿色 */
}
 
nav ul li a.color4:hover {
    background-color: #16a085; /* 绿色 */
}
 
nav ul li a.color5:link,
nav ul li a.color5:visited {
    background-color: #9b59b6; /* 紫色 */
}
 
nav ul li a.color5:hover {
    background-color: #8e44ad; /* 紫色 */
}

这段代码为导航栏中的链接提供了不同的颜色，当用户用鼠标悬停在链接上时，链接的背景颜色会变深，从而为用户提供更好的视觉反馈。代码中使用了CSS选择器的优先级来确定链接的默认颜色和悬停颜色。这是一个简单的导航栏样式设计，但是在实际应用中可以根据需要添加更多的样式和动画效果。

- 阅读更多 -
Vue之动画的实现
System
2024-08-14
所有,css3

在Vue中，可以使用<transition>元素包裹动画元素，并通过CSS来定义动画效果。以下是一个简单的示例：




<template>
  <div id="app">
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">Hello, Vue!</p>
    </transition>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>
 
<style>
/* 定义动画 */
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active for <=2.1.8 */ {
  opacity: 0;
}
</style>

在这个例子中，当按钮被点击时，show 的值会被切换，从而触发 <transition> 内部元素的进入和离开过渡。CSS 定义了两个关键帧：.fade-enter-active 和 .fade-leave-active，指定了动画的持续时间和效果。当元素被插入或删除时，会应用相应的动画效果。

- 阅读更多 -
css 如何控制文字换行、省略
System
2024-08-14
所有,css3

在CSS中，可以使用以下属性来控制文字的换行和省略：

  1. white-space: 控制如何处理元素内的空白。
  2. word-break: 控制如何在单词内换行。
  3. overflow-wrap (或 word-wrap): 控制长单词或URL内部是否应该换行。
  4. text-overflow: 当文本溢出包含它的元素时，如何显示省略（...）。

换行




/* 当需要保留换行时 */
p {
  white-space: pre-wrap; /* 保留空白符序列，但是允许文本换行 */
}
 
/* 强制在边界处换行 */
p {
  word-break: break-all; /* 可以在任意字符之间换行 */
}

省略




/* 当文本溢出容器时显示省略符号 */
p {
  text-overflow: ellipsis; /* 使用省略符号来表示文本被截断 */
  overflow: hidden; /* 确保溢出的文本会被隐藏 */
  white-space: nowrap; /* 不允许换行 */
}

使用多行文本省略




/* 多行文本省略 */
p {
  display: -webkit-box; /* 使用弹性盒子布局模型 */
  -webkit-box-orient: vertical; /* 垂直排列子元素 */
  -webkit-line-clamp: 3; /* 限制在3行 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 使用省略符号 */
}

注意：-webkit-line-clamp 属性是非标准属性，主要用于WebKit引擎的浏览器，如Chrome、Safari。其他浏览器可能需要其他解决方案。

- 阅读更多 -
css3卡片前后无限循环翻转效果
System
2024-08-14
所有,css3

要实现CSS3卡片前后无限循环翻转效果，可以使用CSS动画结合:hover伪类触发。以下是一个简单的示例：

HTML:




<div class="card-container">
  <div class="card">
    <div class="card-face card-face-front">
      Front
    </div>
    <div class="card-face card-face-back">
      Back
    </div>
  </div>
</div>

CSS:




.card-container {
  perspective: 1000px;
}
 
.card {
  width: 200px;
  height: 260px;
  transform-style: preserve-3d;
  transition: transform 1s;
}
 
.card-face {
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  border: 1px solid #000;
}
 
.card-face-front {
  background-color: red;
}
 
.card-face-back {
  background-color: blue;
  transform: rotateY(180deg);
}
 
.card:hover {
  transform: rotateY(180deg);
}

这段代码实现了一个简单的卡片容器，卡片有两个面。当用户将鼠标悬停在卡片上时，卡片翻转180度显示背面。使用backface-visibility: hidden;确保卡片背面在翻转时不可见。CSS中的perspective属性增加了3D效果。这个示例是基于前后翻转的简单效果，可以根据需要添加更复杂的动画和逻辑。

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