分类 css3 下的文章

2024-08-19

以下是一个简单的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>CSS3 Linear Gradient & Transform Example</title>
<style>
  .box {
    width: 100px;
    height: 100px;
    background: linear-gradient(to right, red, yellow);
    transition: transform 0.5s ease-in-out;
  }
 
  .box:hover {
    transform: rotate(360deg) scale(1.2);
  }
</style>
</head>
<body>
 
<div class="box"></div>
 
</body>
</html>

这段代码中，.box 类定义了一个宽度和高度均为100像素的方块，背景应用了从左到右的红色到黄色线性渐变。当鼠标悬停在这个方块上时，transform 属性通过旋转和缩放实现变换效果，hover 伪类在鼠标经过时生效。这个例子展示了如何结合使用CSS3的渐变和变换效果来增强网页元素的视觉效果。

- 阅读更多 -

【CSS】深入浅出BFC及其相关应用

System

2024-08-19

所有,css3

BFC（Block Formatting Context）是CSS中一个重要的概念，它用于决定块级元素如何对其内容进行布局，以及与其他元素的关系和相互作用。

BFC的特性：

内部的元素会在垂直方向一个接一个地放置。
每个元素的左外边距会与包含块的左边距相接触（对于从左到右的格式化），即使存在浮动也是如此。
一个BFC的外部元素会和BFC内部的元素进行分离，不会在布局中影响外部元素。
BFC的区域不会与float元素重叠。
计算BFC的高度时，浮动元素的高度也会被计算在内。

创建BFC的方法：

浮动元素（元素的float不是none）。
绝对定位元素（元素的position是absolute或fixed）。
inline-block元素（元素的display: inline-block）。
table-cell元素（元素的display: table-cell）。
table-caption元素（元素的display: table-caption）。
overflow值不是visible的块级元素。

应用BFC的场景：

自适应两栏布局。
清除内部浮动。
避免文字环绕图片。

示例代码：




/* 创建BFC */
.bfc-container {
  overflow: auto; /* 或者 'hidden' 或者 'scroll' */
}
 
/* 清除内部浮动 */
.clearfix {
  overflow: auto; /* 或者 'hidden' 或者 'scroll' */
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}




<!-- 自适应两栏布局 -->
<div style="width: 100%; height: 200px;">
  <div style="float: left; width: 200px; height: 100%;">左侧内容</div>
  <div class="bfc-container">
    <!-- BFC容器 -->
    <div style="height: 100%;">
      右侧内容可以自适应宽度
    </div>
  </div>
</div>
 
<!-- 清除内部浮动 -->
<div class="clearfix">
  <div style="float: left;">浮动元素</div>
  <!-- 其他内容 -->
</div>

以上代码展示了如何创建BFC以及如何利用BFC的特性来解决实际布局中的问题。

- 阅读更多 -

react 走马灯轮播图两种方法：css3动画和js定时器

System

2024-08-19

所有,css3




import React, { useState, useEffect, useRef } from 'react';
import './style.css';
 
const Carousel = ({ images }) => {
  const [current, setCurrent] = useState(0);
  const timeoutRef = useRef(null);
 
  const nextSlide = () => {
    let nextIndex = (current + 1) % images.length;
    setCurrent(nextIndex);
  };
 
  useEffect(() => {
    timeoutRef.current = setTimeout(nextSlide, 3000);
    return () => clearTimeout(timeoutRef.current);
  }, [current]);
 
  return (
    <div className="carousel">
      <div className="carousel-inner" style={{ transform: `translateX(-${current * 100}%)` }}>
        {images.map((img, index) => (
          <div key={index} className="carousel-item" style={{ backgroundImage: `url(${img})` }} />
        ))}
      </div>
    </div>
  );
};
 
export default Carousel;

这个代码实例展示了如何在React组件中实现一个基本的走马灯轮播图。它使用了Hooks API来管理状态，并通过useEffect来设置和清除定时器。图片数组作为属性传入Carousel组件，并渲染为背景图片。CSS样式需要自己定义，并且需要在./style.css文件中实现动画效果。

- 阅读更多 -

CSS3如何运用渐变与阴影效果提升UI美观度？

System

2024-08-19

所有,css3

CSS3提供了多种渐变技术，如线性渐变(linear-gradient)和径向渐变(radial-gradient)，以及阴影效果(box-shadow)。以下是使用这些技术的示例：




/* 线性渐变背景 */
.gradient-background {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}
 
/* 径向渐变背景 */
.gradient-background-radial {
  background: radial-gradient(circle, #ff9a9e, #fad0c4);
}
 
/* 文本阴影效果 */
.shadow-text {
  color: #d1d1d1;
  text-shadow: 2px 2px 4px #000000;
}
 
/* 盒模型阴影效果 */
.shadow-box {
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
}
 
/* 伪元素添加边框阴影 */
.shadow-border::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
  background: #fff;
  border: 2px solid #f2f2f2;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

将这些类应用到HTML元素上，可以实现渐变效果和阴影装饰，从而提升界面的美观度。

- 阅读更多 -

vue3 + elment-plus实现后台布局

System

2024-08-19

所有,css3

要使用Vue 3和Element Plus创建后台布局，你可以遵循以下步骤：

创建一个新的Vue 3项目。
安装Element Plus。
在Vue组件中使用Element Plus组件。

以下是一个简单的例子：

首先，确保你有Node.js和npm/yarn安装。

创建一个新的Vue 3项目：




# 使用npm
npm create vue@latest
 
# 或者使用yarn
yarn create vue

在创建过程中选择Vue 3。

接下来，安装Element Plus：




# 使用npm
npm install element-plus --save
 
# 或者使用yarn
yarn add element-plus

在main.js中引入Element Plus：




import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
 
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

然后，在App.vue中使用Element Plus组件，例如<el-button>：




<template>
  <el-button type="primary">点击我</el-button>
</template>
 
<script>
export default {
  name: 'App',
  setup() {
    // 这里可以写组件的逻辑
  },
};
</script>
 
<style>
/* 这里可以写全局样式 */
</style>

运行项目：




npm run serve

这样，你就有了一个基于Vue 3和Element Plus的后台布局示例。根据需要，你可以添加更多的Element Plus组件和自己的样式来完善布局。

- 阅读更多 -

CSS实现动态水位球效果（纯CSS3样式）

System

2024-08-19

所有,css3




/* 水位球效果样式 */
.liquidFillGauge {
    width: 200px; height: 160px;
    position: relative;
    font-family: 'Tahoma';
    text-align: center;
    font-size: 10px;
    float: left;
    margin: 5px;
}
.liquidFillGauge .liquidFillGaugeText {
    position: absolute;
    text-align: center;
    width: 100%;
    font-size: 10px;
    color: #000000;
    line-height: 160px;
    z-index: 10;
}
.liquidFillGauge .liquidFillGaugeOutline {
    position: absolute;
    border: 1px solid #000000;
    width: 100%;
    height: 100%;
    z-index: 5;
    background-color: #ffffff;
    background-image: -moz-radial-gradient(50% 50%, circle, rgba(220,220,220,0.5) 90%, rgba(128,128,128,0) 100%), -moz-linear-gradient(top, #ff6500, #ff6500 40%, rgba(255,101,0,0));
    background-image: -webkit-radial-gradient(50% 50%, circle, rgba(220,220,220,0.5) 90%, rgba(128,128,128,0) 100%), -webkit-linear-gradient(top, #ff6500, #ff6500 40%, rgba(255,101,0,0));
    background-image: -o-radial-gradient(50% 50%, circle, rgba(220,220,220,0.5) 90%, rgba(128,128,128,0) 100%), -o-linear-gradient(top, #ff6500, #ff6500 40%, rgba(255,101,0,0));
    background-image: -ms-radial-gradient(50% 50%, circle, rgba(220,220,220,0.5) 90%, rgba(128,128,128,0) 100%), -ms-linear-gradient(top, #ff6500, #ff6500 40%, rgba(255,101,0,0));
    background-image: radial-gradient(50% 50%, circle, rgba(220,220,220,0.5) 90%, rgba(128,128,128,0) 100%), linear-gradient(to bottom, #ff6500, #ff6500 40%, rgba(255,101,0,0));
    background-repeat: no-repeat;
    box-shadow: 0 0 0 1px #000000 inset;
}
.liquidFillGauge .liquidFillGaugeMask {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 6;
    background-image: -moz-linear-gradient(top, #ff6500, #ff6500 40%, rgba(255,101,0,0));
    background-image: -webkit-linear-gradient(top, #ff6500, #ff6500 40%, rgba(255,101,0,0));
    background-image: -o-linear-gradient(top, #ff6500, #ff6500 40%, rgba(255,101,0,0));
    background-image: -ms-linear-gradient(

- 阅读更多 -

WEB前端静态网页（div+css）

System

2024-08-19

所有,css3

为了创建一个简单的WEB前端静态页面，我们可以使用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>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .container {
            width: 80%;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>欢迎来到我的静态页面</h1>
        <p>这是一个简单的静态页面示例，展示了如何使用HTML、CSS和JavaScript创建一个静态的网站部分。</p>
    </div>
</body>
</html>

这个例子展示了如何使用HTML定义页面结构，使用CSS进行样式设计，并且保持了JavaScript的简单性。这是创建静态网页的基本方法，适用于教育目的和简单的展示性页面。

- 阅读更多 -

利用css实现视差滚动和抖动效果

System

2024-08-19

所有,css3

视差滚动和抖动效果可以通过CSS的background-attachment: fixed属性来实现，该属性会让背景图像固定，不会随着页面的其余部分滚动。

以下是一个简单的实现视差滚动效果的例子：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax Scrolling</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  .parallax {
    background-image: url('background.jpg'), url('foreground.jpg');
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, scroll;
    background-size: cover, contain;
    height: 100%;
  }
</style>
</head>
<body>
<div class="parallax">
  <div class="content">
    <!-- 内容 -->
  </div>
</div>
</body>
</html>

在这个例子中，.parallax 类的元素拥有两个不同的背景图像，一个是固定的（视差滚动效果），另一个是可滚动的。

抖动效果可以通过使用CSS的@keyframes规则和animation属性来实现。以下是一个简单的实现抖动效果的例子：




@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  75% { transform: translateX(-10px); }
  100% { transform: translateX(10px); }
}
 
.shake-animation {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

在这个例子中，.shake-animation 类的元素将会不断地左右抖动。

- 阅读更多 -

CSS3内容知识

System

2024-08-19

所有,css3

CSS3是CSS（层叠样式表）的一个版本，引入了许多新特性，包括更强大的选择器、阴影、渐变、变换等。以下是一些CSS3的内容知识点：

阴影（Box Shadow 和 Text Shadow）




div {
  box-shadow: 10px 10px 5px #888888;
}
 
span {
  text-shadow: 2px 2px 2px #888888;
}

渐变（线性渐变和径向渐变）




div {
  background: linear-gradient(to right, red , yellow);
}
 
div {
  background: radial-gradient(circle, red, yellow, green);
}

变换（位置变换、旋转、缩放、倾斜）




div {
  transform: translate(50px, 100px);
}
 
div {
  transform: rotate(30deg);
}
 
div {
  transform: scale(1.5, 1.5);
}
 
div {
  transform: skew(30deg, 20deg);
}

动画（创建动画效果）




@keyframes mymove {
  from {top:0px;}
  to {top:200px;}
}
 
@-webkit-keyframes mymove /* Safari 与 Chrome */
{
  from {top:0px;}
  to {top:200px;}
}
 
div {
  animation: mymove 5s infinite;
  -webkit-animation: mymove 5s infinite; /* Safari 与 Chrome */
}

圆角（创建圆形元素）




div {
  border-radius: 25px;
}

多列布局（实现文本的多列显示）




div {
  column-count: 3;
  column-gap: 20px;
}

用户界面（更改滚动条样式）




/* 设置滚动条的宽度和颜色 */
::-webkit-scrollbar {
  width: 12px;
}
 
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
 
::-webkit-scrollbar-thumb {
  background-color: #888;
}
 
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

这些是CSS3的一些基本特性，CSS3还有许多其他的特性，如过渡、3D变换、4. 画布（Canvas）和 5. SVG（可缩放矢量图形）等。

- 阅读更多 -

CSS 3D动画【大小可开合正方体】，阿里出品

System

2024-08-19

所有,css3




/* 设置基础样式 */
.container {
  perspective: 1000px; /* 创建3D空间 */
}
 
.cube {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d; /* 设置子元素在3D空间中显示 */
  animation: rotate 5s infinite linear; /* 应用旋转动画 */
}
 
/* 定义正方体的每一个面 */
.cube div {
  position: absolute;
  width: 100px;
  height: 100px;
  opacity: 0.8;
  transition: all 0.4s ease-in-out; /* 平滑过渡效果 */
}
 
/* 设置正方体各面的背景色 */
.cube .face1 {
  background: rgba(255, 0, 0, 0.5);
}
 
.cube .face2 {
  background: rgba(0, 255, 0, 0.5);
}
 
.cube .face3 {
  background: rgba(0, 0, 255, 0.5);
}
 
.cube .face4 {
  background: rgba(255, 255, 0, 0.5);
}
 
.cube .face5 {
  background: rgba(255, 0, 255, 0.5);
}
 
.cube .face6 {
  background: rgba(0, 255, 255, 0.5);
}
 
/* 定义旋转动画 */
@keyframes rotate {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
 
/* 设置鼠标悬浮时放大动画 */
.cube:hover {
  animation-play-state: paused;
}
 
.cube:hover div {
  transform: translateZ(50px);
}

这段代码展示了如何使用CSS 3D转换创建一个旋转的正方体动画。它包括了设置3D空间、定义每一个面的背景色、应用旋转动画以及在鼠标悬浮时放大动画的效果。这个例子可以教会开发者如何利用CSS创建复杂的交互动画效果。

- 阅读更多 -