分类前端技术下的文章

2024-08-17

DivSugar是一个用于创建3D图形的库，它使用CSS3的特性来创建3D图形。以下是一个使用DivSugar创建3D立方体的简单示例：




<!DOCTYPE html>
<html>
<head>
    <title>3D立方体示例</title>
    <script src="https://cdn.jsdelivr.net/npm/divsugar@0.3.0/dist/divsugar.min.js"></script>
    <style>
        .cube {
            width: 100px;
            height: 100px;
            transform-style: preserve-3d;
            perspective: 500px;
        }
        .face {
            position: absolute;
            width: 100%;
            height: 100%;
            background: #f0f0f0;
            border: 1px solid #ccc;
        }
        .front {
            background: #ffcccc;
        }
        .back {
            background: #ccccff;
            transform: rotateY(180deg);
        }
        .left {
            background: #ccffcc;
            transform: rotateY(90deg) rotateZ(90deg);
        }
        .right {
            background: #ccffcc;
            transform: rotateY(-90deg) rotateZ(90deg);
        }
        .top {
            background: #ffccff;
            transform: rotateX(90deg);
        }
        .bottom {
            background: #ffccff;
            transform: rotateX(-90deg);
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="face front"></div>
        <div class="face back"></div>
        <div class="face left"></div>
        <div class="face right"></div>
        <div class="face top"></div>
        <div class="face bottom"></div>
    </div>
</body>
</html>

这段代码展示了如何使用DivSugar和CSS3创建一个简单的3D立方体。每个面都有不同的背景颜色，以便于区分。CSS中的transform-style: preserve-3d;属性使得子元素应用3D转换时能保持其3D位置，而perspective: 500px;属性为3D立方体添加了透视效果。每个面都通过不同的transform属性进行旋转以形成完整的立方体结构。

- 阅读更多 -

使用flex布局实现一个简单的文字在页面居中效果

System

2024-08-17

所有,css3

以下是使用Flex布局实现文字在页面居中的简单代码示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex 居中示例</title>
<style>
  .centered-text {
    display: flex;         /* 启用Flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    height: 100vh;          /* 高度设置为视口高度 */
    margin: 0;
    padding: 0;
  }
</style>
</head>
<body>
<div class="centered-text">
  文字内容居中
</div>
</body>
</html>

这段代码会创建一个全屏的div容器，并使用Flex布局将其中的文字水平和垂直居中。

- 阅读更多 -

小程序渐变轮播图两种实现方式

System

2024-08-17

所有,css3

在小程序中实现渐变轮播图，可以通过使用CSS样式来实现渐变效果，并结合小程序的轮播图组件。以下是两种实现方式：

方式一：使用CSS3的线性渐变(linear-gradient)功能。




<!-- wxml文件 -->
<view class="swiper-container">
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{backgroundImages}}" wx:key="*this">
      <swiper-item class="swiper-item" style="background-image: {{item}}">
        <!-- 这里可以放置轮播图的内容，如图片、视频等 -->
      </swiper-item>
    </block>
  </swiper>
</view>




/* wxss文件 */
.swiper-container {
  height: 300rpx;
  width: 100%;
}
 
.swiper-item {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 30px;
  background-size: cover;
  background-position: center;
}




// js文件
Page({
  data: {
    indicatorDots: true,
    autoplay: true,
    interval: 2000,
    duration: 500,
    backgroundImages: [
      'linear-gradient(to right, red , yellow)',
      'linear-gradient(to right, blue , green)',
      'linear-gradient(to right, purple , pink)'
    ]
  }
})

方式二：使用图像处理软件（如Photoshop）创建带渐变效果的图片，然后在小程序中通过轮播组件展示。




<!-- wxml文件 -->
<view class="swiper-container">
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imageUrls}}" wx:key="*this">
      <swiper-item class="swiper-item">
        <image src="{{item}}" class="slide-image"/>
      </swiper-item>
    </block>
  </swiper>
</view>




/* wxss文件 */
.swiper-container {
  height: 300rpx;
  width: 100%;
}
 
.swiper-item {
  height: 100%;
}
 
.slide-image {
  width: 100%;
  height: 100%;
}




// js文件
Page({
  data: {
    indicatorDots: true,
    autoplay: true,
    interval: 2000,
    duration: 500,
    imageUrls: [
      'http://example.com/gradient1.jpg',
      'http://example.com/gradient2.jpg',
      'http://example.com/gradient3.jpg'
    ]
  }
})

在这两种方式中，第一种方式使用CSS样式直接在轮播项上应用渐变效果，第二种方式则是预先准备好带渐变效果的图片，并在小程序中使用image组件展示。两种方式都可以实现渐变轮播图的效果，你可以根据实际情况选择使用。

- 阅读更多 -

uniapp 设置底部不被覆盖

System

2024-08-17

所有,css3

在uniapp中，如果你想要设置底部不被其他内容覆盖，可以使用CSS的定位属性。你可以为底部设置固定定位或者固定在底部。以下是一个示例代码：




<template>
  <view class="container">
    <!-- 页面的主体内容 -->
    <view class="content">
      <!-- 这里是你的页面内容 -->
    </view>
    <!-- 固定在底部的底部内容 -->
    <view class="footer">
      <!-- 这里是你的底部内容 -->
    </view>
  </view>
</template>
 
<style>
  .container {
    position: relative;
    height: 100%;
    padding-bottom: 50px; /* 保证底部内容不被内容覆盖 */
  }
  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px; /* 底部内容的高度 */
  }
</style>

在这个例子中，.footer 类代表了底部内容，它被设置为fixed定位，并且始终固定在视口的底部。.container 类的padding-bottom属性保证了内容区不会与.footer重叠。

- 阅读更多 -

HTML创意动画代码

System

2024-08-17

所有,css3

HTML创意动画可以通过多种方式实现，以下是一个使用HTML和CSS创建简单旋转动画的示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Box</title>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: #f09;
    margin: 50px;
    /* 动画名称和持续时间 */
    animation: rotate 5s linear infinite;
  }
 
  /* 定义关键帧 */
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

这段代码创建了一个类名为 .box 的正方形盒子，它会无限循环地旋转。通过CSS @keyframes 规则定义了一个名为 rotate 的动画，使元素从0度旋转到360度。动画使用线性曲线进行变化，并持续5秒钟。这是一个简单的旋转动画示例，你可以根据需要添加更多复杂的动画效果。

- 阅读更多 -

vue 列表鼠标滑过悬浮样式改变

System

2024-08-17

所有,css3

在Vue中，可以使用事件绑定来改变鼠标滑过列表项时的样式。以下是一个简单的例子：




<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index" @mouseenter="changeStyle(index)" @mouseleave="resetStyle">
        {{ item }}
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      hoverIndex: null
    };
  },
  methods: {
    changeStyle(index) {
      this.hoverIndex = index;
    },
    resetStyle() {
      this.hoverIndex = null;
    }
  }
};
</script>
 
<style>
.hover-style {
  background-color: #f0f0f0; /* 悬浮时的背景色 */
}
</style>

在这个例子中，mouseenter 事件绑定了 changeStyle 方法，它会更新 hoverIndex 的值为当前项的索引。mouseleave 事件绑定了 resetStyle 方法，它会将 hoverIndex 重置为 null。然后在列表项使用 v-bind:class 来根据 hoverIndex 的值来动态绑定样式类 .hover-style。当鼠标滑过列表项时，该项将应用悬浮样式。

- 阅读更多 -

HTML5 & CSS3常见新特性

System

2024-08-17

所有,css3

HTML5 和 CSS3 的常见新特性包括：

语义化标签：如 <header>, <nav>, <section>, <article>, <aside>, <footer> 等。
画布（Canvas）：使用 JavaScript 进行图形绘制。
视频和音频：<video> 和 <audio> 标签。
表单控件增强：如数值输入、日期输入、时间输入、颜色选择器等。
CSS3 特效和变换：如阴影、渐变、边框、圆角、变换等。
CSS3 布局：如弹性盒子（Flexbox）、网格（Grid）布局。
媒体查询：响应式设计。

以下是一些简单的示例代码：

HTML5 示例：




<header>头部信息</header>
<nav>导航链接</nav>
<section>
  <article>
    <h1>文章标题</h1>
    <p>这是一个段落。</p>
  </article>
</section>
<aside>侧边内容</aside>
<footer>底部信息</footer>

CSS3 示例：




/* 圆角边框和阴影效果 */
div {
  border-radius: 10px;
  box-shadow: 5px 5px 10px #888888;
}
 
/* 渐变背景 */
div {
  background: linear-gradient(to right, red, yellow);
}
 
/* 媒体查询实现响应式设计 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

画布（Canvas）示例：




<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green';
  ctx.beginPath();
  ctx.arc(70, 40, 30, 0, 2 * Math.PI);
  ctx.fill();
</script>

视频和音频示例：




<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
 
<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

- 阅读更多 -

css3背景渐变

System

2024-08-17

所有,css3

CSS3 背景渐变可以使用 linear-gradient() 创建线性渐变或者 radial-gradient() 创建径向渐变。

线性渐变：




.linear-gradient {
  background: linear-gradient(direction, color-stop1, color-stop2, ...);
}

径向渐变：




.radial-gradient {
  background: radial-gradient(shape size at position, start-color, ..., last-color);
}

例子：

线性渐变从上到下，从红色到蓝色：




div {
  height: 100px;
  background: linear-gradient(to bottom, red, blue);
}

径向渐变从中心开始，由蓝色向透明色过渡：




div {
  height: 100px;
  background: radial-gradient(circle at center, blue, transparent);
}

- 阅读更多 -

css实现炫酷充电动画

System

2024-08-17

所有,css3

以下是一个简单的充电动画实例，使用了CSS动画和关键帧来创建该效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>充电动画</title>
<style>
  .battery {
    width: 100px; height: 200px;
    border: 4px solid #333;
    border-radius: 10px;
    position: relative;
    background: conic-gradient(#32cd32 0%, #32cd32 50%, #fc4a1a 50%, #fc4a1a 100%);
    animation: charge 4s infinite ease-in-out;
  }
 
  .battery:before {
    content: '';
    position: absolute;
    top: -10px; left: 30px;
    width: 40px; height: 10px;
    background: #333;
    border-radius: 5px 5px 0 0;
  }
 
  .battery:after {
    content: '';
    position: absolute;
    bottom: 10px; left: 30px;
    width: 40px; height: 10px;
    background: #333;
    border-radius: 0 0 5px 5px;
  }
 
  @keyframes charge {
    0%, 100% {
      background-position: 0 0, 0 0;
    }
    50% {
      background-position: 300px 0, 100px 0;
    }
  }
</style>
</head>
<body>
<div class="battery"></div>
</body>
</html>

这段代码创建了一个类似于手机电池的样式，并通过CSS动画来实现充电动画效果。通过调整.battery类的background属性中的conic-gradient的颜色和位置，我们可以控制充电动画的颜色变化。@keyframes charge定义了背景图像如何随时间变化而移动。

System

2024-08-17

所有,css3




/* 设置文本的对齐方式 */
p.text-align {
  text-align: center; /* 文本居中对齐 */
}
 
/* 设置文本的装饰样式 */
p.text-decoration {
  text-decoration: underline; /* 文本下划线 */
}
 
/* 设置文本的缩进 */
p.text-indent {
  text-indent: 2em; /* 文本首行缩进2个字体大小 */
}
 
/* 设置文本的 Shadow 效果 */
p.text-shadow {
  text-shadow: 2px 2px 2px #000; /* 文本阴影，水平偏移2px，垂直偏移2px，模糊半径2px，颜色为黑色 */
}
 
/* 设置文本的样式 */
p.font-style {
  font-style: italic; /* 文本斜体 */
}
 
/* 设置文本的变体 */
p.font-variant {
  font-variant: small-caps; /* 小型大写字母 */
}
 
/* 设置文本的加粗 */
p.font-weight {
  font-weight: bold; /* 文本加粗 */
}
 
/* 设置文本的大小 */
p.font-size {
  font-size: 16px; /* 文本大小为16像素 */
}
 
/* 设置文本的字体系列 */
p.font-family {
  font-family: 'Times New Roman', Times, serif; /* 文本字体为'Times New Roman'，若无该字体则使用Times字体，最后为衬线字体 */
}
 
/* 设置文本行高，即行间距 */
p.line-height {
  line-height: 1.5; /* 行高为字体大小的1.5倍 */
}
 
/* 设置文本的空白处理方式 */
p.white-space {
  white-space: nowrap; /* 文本不换行 */
}
 
/* 设置文本的溢出处理方式 */
p.text-overflow {
  overflow: hidden; /* 文本溢出隐藏 */
  text-overflow: ellipsis; /* 文本溢出显示为省略号 */
}

这段代码展示了如何使用CSS3中的各种文本样式属性来对段落（<p>标签）进行样式设置，包括文本对齐、装饰、缩进、阴影、样式、变体、加粗、大小、字体系列、行高、空白处理和文本溢出处理。这些属性可以帮助开发者创建更加丰富多样的文本格式和布局。

- 阅读更多 -