1. 首页
  2. 分类
  3. css3
用CSS3画一个三角形
System
2024-08-10
所有,css3

在CSS3中，我们可以使用边框技巧来创建一个三角形。这是通过设置一个元素的上、右、下边框为透明，而左边框为我们想要的颜色以及给定一定的宽度和高度来实现的。

解决方案1：




.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

解决方案2：

另一种方法是使用CSS3的transform属性。我们可以将一个宽度和高度为0的元素旋转45度，然后设置背景颜色。




.triangle {
  width: 0;
  height: 0;
  transform: rotate(45deg);
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

解决方案3：

使用CSS3的clip-path属性，clip-path属性使用一个几何剪裁路径来剪裁元素的可见区域。




.triangle {
  width: 100px;
  height: 100px;
  background-color: red;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

解决方案4：

使用CSS3的linear-gradient属性，linear-gradient函数创建一个线性渐变的背景图像。




.triangle {
  width: 100px;
  height: 100px;
  background-image: linear-gradient(to bottom left, transparent 50%, red 50%);
}

以上就是用CSS3画一个三角形的几种方法，你可以根据自己的需求选择合适的方法。

- 阅读更多 -
HTML5+CSS3小实例：鼠标悬停按钮发光
System
2024-08-10
所有,css3

以下是一个简单的HTML和CSS代码示例，演示了当鼠标悬停在按钮上时，如何使用CSS3为按钮添加发光效果。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Hover Glow Button</title>
<style>
  .glow-button {
    background-color: #4285F4;
    border-radius: 8px;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    transition: box-shadow 0.5s ease-in-out;
  }
 
  .glow-button:hover {
    box-shadow: 0 0 10px #4285F4, 0 0 20px #4285F4, 0 0 30px #4285F4, 0 0 40px #4285F4, 0 0 50px #4285F4, 0 0 60px #4285F4, 0 0 70px #4285F4, 0 0 80px #4285F4, 0 0 90px #4285F4, 0 0 100px #4285F4;
  }
</style>
</head>
<body>
 
<button class="glow-button">Hover Over Me!</button>
 
</body>
</html>

这段代码中，.glow-button 类定义了按钮的基本样式，而 .glow-button:hover 伪类选择器定义了鼠标悬停在按钮上时发光的效果。box-shadow 属性被用来创建一个由内到外逐渐增多的发光效果，并且通过 transition 属性为这个效果添加了平滑的过渡动画。

- 阅读更多 -
使用css3写一个轮播图带小圆点（伪类）
System
2024-08-10
所有,css3

以下是一个使用CSS3制作带有小圆点的简单轮播图的示例代码：

HTML:




<div class="slider">
  <div class="slide active">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
  <div class="slide">4</div>
  <div class="slide">5</div>
 
  <ul class="dots">
    <li class="dot active"></li>
    <li class="dot"></li>
    <li class="dot"></li>
    <li class="dot"></li>
    <li class="dot"></li>
  </ul>
</div>

CSS:




.slider {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 200px;
}
 
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 200px;
  text-align: center;
  font-size: 80px;
  opacity: 0;
  transition: opacity 0.5s;
}
 
.slide.active {
  opacity: 1;
}
 
.dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  list-style: none;
  padding: 0;
  margin: 0;
}
 
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0 5px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s;
}
 
.dot.active {
  opacity: 1;
}

JavaScript (用于轮播逻辑):




document.querySelectorAll('.dot').forEach((dot, index) => {
  dot.addEventListener('click', function() {
    const activeSlide = document.querySelector('.slide.active');
    const activeDot = document.querySelector('.dot.active');
 
    const nextSlide = document.querySelectorAll('.slide')[index];
    activeSlide.classList.remove('active');
    nextSlide.classList.add('active');
 
    activeDot.classList.remove('active');
    dot.classList.add('active');
  });
});

这段代码提供了一个简单的轮播图实现，其中包括五个幻灯片和相应的小圆点。点击小圆点可以切换到相应的幻灯片。这里没有使用定时器，因此轮播图需要手动触发切换。这个例子旨在展示如何使用CSS和JavaScript创建一个基本的轮播图效果。

- 阅读更多 -
CSS中的transform（二维变换）
System
2024-08-10
所有,css3

CSS的transform属性可以对元素进行2D或3D转换。下面是一些使用transform进行二维变换的例子：

  1. 旋转（rotate）：



.rotated {
  transform: rotate(45deg); /* 顺时针旋转45度 */
}
  1. 缩放（scale）：



.scaled {
  transform: scale(1.5, 0.8); /* 水平方向放大1.5倍，垂直方向放大0.8倍 */
}
  1. 平移（translate）：



.translated {
  transform: translate(50px, 100px); /* 水平方向平移50像素，垂直方向平移100像素 */
}
  1. 倾斜（skew）：



.skewed {
  transform: skew(30deg, 20deg); /* 水平方向倾斜30度，垂直方向倾斜20度 */
}

使用transform时，你可以将多个变换组合在一起，例如：




.multiple-transforms {
  transform: rotate(45deg) scale(1.5) translate(100px, 200px);
}

以上代码将先旋转45度，然后缩放，最后平移。

- 阅读更多 -
如何使用Vue实现卡片翻转效果
System
2024-08-10
所有,css3

要在Vue中实现卡片翻转效果，你可以使用CSS3的transform属性以及Vue的动画系统。以下是一个简单的例子：

  1. 创建一个Vue组件，例如FlipCard.vue。
  2. 使用data属性来跟踪卡片状态（例如翻转状态）。
  3. 使用计算属性或者方法来为卡片设置翻转的类和样式。
  4. 使用Vue的<transition>元素来包裹卡片，以便在状态改变时平滑过渡。



<template>
  <div class="flip-card-container">
    <transition name="flip">
      <div v-if="isFlipped" class="flip-card flip-card-back">
        <!-- 背面内容 -->
        Back Content
      </div>
      <div v-else class="flip-card flip-card-front">
        <!-- 正面内容 -->
        Front Content
      </div>
    </transition>
    <button @click="isFlipped = !isFlipped">翻转卡片</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isFlipped: false,
    };
  },
};
</script>
 
<style scoped>
.flip-card-container {
  perspective: 1000px;
}
 
.flip-card {
  backface-visibility: hidden;
  transition: transform 0.6s;
  border: 1px solid #ccc;
  margin: 10px;
  padding: 10px;
  display: inline-block;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
 
.flip-card-front {
  position: absolute;
  backface-visibility: hidden;
}
 
.flip-card-back {
  position: absolute;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}
 
.flip-enter-active, .flip-leave-active {
  transition: transform 0.6s;
}
 
.flip-enter, .flip-leave-to /* .flip-leave-active for <2.1.8 */ {
  transform: rotateY(180deg);
}
</style>

在这个例子中，我们创建了一个卡片容器，其中包含了一个<transition>元素。这个元素会在卡片的状态改变时（即点击翻转按钮时）平滑地过渡。CSS中的.flip-card类定义了卡片的样式，而.flip-card-front和.flip-card-back类分别代表卡片的正反面。Vue的数据属性isFlipped用来跟踪卡片是否应该显示为翻转状态。

当你点击翻转按钮时，isFlipped的值会被切换，Vue的<transition>元素会处理过渡效果，使得卡片以3D翻转动画呈现给用户。

- 阅读更多 -
css 点击按钮旋转
System
2024-08-10
所有,css3

要使用CSS实现点击按钮后旋转的效果，你可以使用:active伪类来定义按钮在被激活（即点击）时的样式。以下是一个简单的例子：

HTML:




<button class="rotate-button">Click Me</button>

CSS:




.rotate-button {
  transition: transform 0.3s ease-in-out; /* 添加过渡动画 */
  transform: rotate(0deg); /* 初始旋转角度 */
}
 
.rotate-button:active {
  transform: rotate(360deg); /* 点击时旋转360度 */
}

这段代码中，按钮初始时不旋转。当按钮被点击时，:active伪类被激活，transform属性将按钮旋转360度。transition属性确保旋转有一个动画过渡效果。

- 阅读更多 -
CSS3渐变及2D转换
System
2024-08-10
所有,css3

CSS3 渐变可以用来设置元素的背景色，通过渐变可以创建从一种颜色平滑过渡到另一种颜色的效果。2D转换可以用来移动、旋转和缩放元素。

以下是一个简单的例子，展示了如何使用CSS3渐变和2D转换：




<!DOCTYPE html>
<html>
<head>
<style>
/* 创建一个线性渐变，从红色过渡到蓝色 */
.gradient-box {
  width: 200px;
  height: 200px;
  background: linear-gradient(red, blue);
  /* 应用2D转换：旋转45度，然后向右移动50像素，向下移动30像素 */
  transform: rotate(45deg) translate(50px, 30px);
  /* 为了看到转换效果，不使用背景透明 */
  background-clip: border-box;
}
</style>
</head>
<body>
 
<div class="gradient-box"></div>
 
</body>
</html>

在这个例子中，.gradient-box 类定义了一个具有线性渐变背景的方形盒子。transform 属性应用了一个先旋转45度，然后是平移的2D转换。background-clip 属性确保背景颜色应用在元素的边框盒上，而不会受到转换的影响。

- 阅读更多 -
【CSS3】CSS3 3D 转换 ⑤ ( 3D 呈现效果 - transform-style 属性 | transform-style 属性语法 | 设置 透视视图 效果 | 结构伪类选择器 )
System
2024-08-10
所有,css3

在 CSS3 中，transform-style 属性用于指定嵌套元素如何在 3D 空间中呈现。它的主要目的是定义子元素是否需要保持 3D 位置，还是在 2D 平面上进行。

transform-style 属性可以接受两个值：

  1. flat：默认值，子元素将不保留其 3D 位置。它们将被当作 2D 元素处理，就像其父元素的平面一样。
  2. preserve-3d：子元素将保留其 3D 位置，父元素将创建一个 3D 空间。

使用 transform-style 属性时，需要将其放在父元素上。

示例代码：




/* 定义父元素为 3D 空间 */
.parent {
  transform-style: preserve-3d;
}
 
/* 定义子元素在 2D 平面上呈现 */
.child {
  transform-style: flat;
}

在这个例子中，.parent 是一个 3D 空间，其子元素将保持其 3D 位置。而 .child 是一个 2D 平面，其子元素不会保持其 3D 位置，而是在 2D 平面上进行变换。

- 阅读更多 -
vue2路由跳转页面
System
2024-08-10
所有,css3

在Vue 2中，可以使用vue-router进行页面的路由跳转。以下是一个简单的例子：

首先，确保你已经安装并设置了vue-router。

  1. 安装vue-router（如果你使用的是Vue CLI创建的项目，这一步骤通常已经完成）:



npm install vue-router
  1. 在你的Vue项目中设置vue-router。在src目录下创建一个router文件夹，并在该文件夹中创建index.js文件:



// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import HomePage from '@/components/HomePage';
import AboutPage from '@/components/AboutPage';
 
Vue.use(Router);
 
const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomePage,
    },
    {
      path: '/about',
      name: 'about',
      component: AboutPage,
    },
  ],
});
 
export default router;
  1. 在main.js中引入并使用router:



// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
 
new Vue({
  router,
  render: h => h(App),
}).$mount('#app');
  1. 在你的Vue组件中，可以使用编程式导航或者声明式导航进行路由跳转。

编程式导航示例：




// 在Vue组件中
export default {
  methods: {
    goToAboutPage() {
      this.$router.push({ name: 'about' });
    }
  }
}

声明式导航示例：




<!-- 在Vue模板中 -->
<template>
  <div>
    <router-link to="/about">About</router-link>
  </div>
</template>

以上代码展示了如何在Vue 2应用中设置和使用vue-router进行页面的路由跳转。

- 阅读更多 -
HTML5 CSS3 经典案例：无插件拖拽上传图片 （支持预览与批量）
System
2024-08-10
所有,css3

以下是一个简化的HTML和JavaScript代码示例，用于实现一个基本的拖拽上传图片功能，包括对文件预览的支持。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and Drop Image Upload</title>
<style>
    #drop_area {
        width: 300px;
        height: 200px;
        border: 2px dashed #aaa;
        border-radius: 5px;
        margin: 10px;
        padding: 50px;
        text-align: center;
        font: 20pt bold;
        color: #bbb;
    }
    #preview {
        width: 300px;
        height: 200px;
        border: 2px solid #000;
        margin: 10px;
        display: none;
    }
    #preview img {
        width: 100%;
        height: 100%;
    }
</style>
</head>
<body>
 
<div id="drop_area">Drag images here</div>
<div id="preview"></div>
 
<script>
    const dropArea = document.getElementById('drop_area');
    const preview = document.getElementById('preview');
 
    dropArea.addEventListener('dragover', function(e) {
        e.stopPropagation();
        e.preventDefault();
        e.dataTransfer.dropEffect = 'copy';
    });
 
    dropArea.addEventListener('drop', function(e) {
        e.stopPropagation();
        e.preventDefault();
 
        const files = e.dataTransfer.files;
        for(let i = 0; i < files.length; i++) {
            const file = files[i];
            if (!file.type.startsWith('image/')) {
                continue;
            }
 
            const img = document.createElement('img');
            img.file = file;
            preview.style.display = 'block';
 
            const reader = new FileReader();
            reader.onload = (function(aImg) {
                return function(e) {
                    aImg.src = e.target.result;
                };
            })(img);
            reader.readAsDataURL(file);
 
            // 这里可以添加上传逻辑
            // uploadImage(file);
        }
    });
</script>
 
</body>
</html>

这段代码实现了基本的拖拽上传图片的功能，并在用户拖拽文件到指定区域时显示图片预览。用户可以通过拖拽操作选择图片文件并将它们放入页面指定的区域。代码中的FileReader对象用于读取被拖放的图片文件，并利用其readAsDataURL方法将文件转换为Base64编码的字符串，以便在页面上显示图片。

注意：实际应用中，你需要根据自己的需求和后端API来实现图片的上传逻辑。上传代码被注释掉了，你可以根据实际情况添加上传逻辑。

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