分类 css 下的文章

写一个简单的 CSS 动画

2024-08-08

以下是一个简单的 CSS 动画示例，它会使一个元素在页面上移动：




/* 首先定义一个关键帧动画 */
@keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}
 
/* 接着应用动画到一个元素上 */
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
  /* 使用动画名称和持续时间 */
  animation: moveRight 2s infinite;
}




<!-- HTML 结构 -->
<div class="box"></div>

这段代码定义了一个名为 moveRight 的关键帧动画，它将元素从原始位置向右移动 100px。然后，.box 类应用了这个动画，使得类 box 的所有元素都会无限循环地执行这个动画。

创造视觉奇迹：WebKit的CSS内容生成特性解析

2024-08-08




/* 使用CSS内容生成技术创造视觉奇迹 */
.icon-star::before {
  content: url("../img/star.png"); /* 使用图片作为图标 */
  position: absolute;
  left: -20px; /* 将图标定位到文本之前 */
  top: 5px;
}
 
.icon-heart::before {
  content: url("../img/heart.png");
  position: absolute;
  left: -20px;
  top: 5px;
  color: red; /* 更改图标颜色 */
}
 
.icon-moon::before {
  content: url("../img/moon.png");
  position: absolute;
  left: -20px;
  top: 5px;
  animation: rotate 2s infinite linear; /* 应用旋转动画 */
}
 
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

这个例子展示了如何使用CSS内容生成技术来插入图片作为图标，并通过CSS动画实现旋转效果。这里的.icon-star, .icon-heart, 和 .icon-moon 类分别表示不同的图标样式，并通过伪元素 ::before 来插入对应的图标。图标可以通过URL引用外部图片文件，并利用CSS动画进行旋转等效果的应用。这种方法提供了一种简单高效的图标解决方案，并且易于扩展和维护。

【CSS】阿里iconfont的使用方法（另附font-family引入方法）

2024-08-08

在CSS中使用阿里iconfont图标库的图标，首先需要在阿里iconfont官网上选择所需图标并生成项目，获取到的代码通常包括了一个字体文件和一个CSS样式文件。

以下是如何在CSS中使用iconfont图标的步骤：

引入字体文件：
通过@font-face规则在CSS中引入字体文件。
使用图标：
使用阿里iconfont提供的类名来应用图标。

以下是具体的CSS代码示例：




/* 引入字体文件 */
@font-face {
  font-family: 'iconfont';
  src: url('path/to/iconfont.eot'); /* IE9 */
  src: url('path/to/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('path/to/iconfont.woff') format('woff'), /* 现代浏览器 */
  url('path/to/iconfont.ttf') format('truetype'), /* Safari, Android, iOS */
  url('path/to/iconfont.svg#iconfont') format('svg'); /* 老版本IOS */
}
 
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 
/* 使用图标 */
.icon-example:before {
  content: '\e600'; /* 这里的Unicode编码需要替换为实际图标的编码 */
}

在HTML中使用：




<i class="iconfont icon-example"></i>

注意：

确保将path/to/iconfont.woff, .ttf, .eot, .svg等字体文件的路径替换为实际文件的位置。
图标的Unicode编码也需要从阿里iconfont生成的CSS文件中获取，并替换到content属性中。

uni-app配置tailwindcss

2024-08-08

要在uni-app项目中配置Tailwind CSS，你需要按照以下步骤操作：

安装PostCSS和postcss-loader：




npm install postcss postcss-loader autoprefixer --save-dev

安装Tailwind CSS：




npm install tailwindcss --save-dev

在项目根目录创建postcss.config.js文件，并配置Tailwind CSS：




module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

创建tailwind.config.js文件，并配置Tailwind CSS：




// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

在tailwind.config.js中配置purge选项，以仅包含你项目中实际使用的Tailwind类。
在<head>标签中的index.html或相应页面添加Tailwind CSS link标签：




<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

在你的组件或页面的<style>标签中使用Tailwind CSS类：




<template>
  <view class="bg-white text-gray-700">Hello Tailwind!</view>
</template>

请注意，由于uni-app的编译方式，这个配置可能需要额外的工具或者适配，以确保在不同平台（如小程序）的兼容性。如果你遇到任何特定的平台问题，请查看官方文档或相关社区获取帮助。

用CSS代码写出的各种形状图形的方法，0基础学前端开发

2024-08-08

在CSS中，我们可以使用不同的属性来绘制各种形状。以下是一些常用的方法：

使用border属性创建三角形：




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

使用border-radius属性创建圆形：




.circle {
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
}

使用transform: rotate()方法创建平行四边形：




.parallelogram {
  width: 150px;
  height: 100px;
  background-color: red;
  transform: skew(20deg);
}

使用linear-gradient创建彩色的图形：




.colorful-shape {
  width: 200px;
  height: 100px;
  background: linear-gradient(45deg, red, blue);
}

使用clip-path属性创建多边形：




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

使用before或after伪元素和border-radius创建心形：




.heart {
  width: 100px;
  height: 100px;
  position: relative;
}
 
.heart:before,
.heart:after {
  content: "";
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
  position: absolute;
  top: 0;
  left: 50px;
}
 
.heart:before {
  transform: rotate(-45deg);
}
 
.heart:after {
  transform: rotate(45deg);
}

这些方法可以创建各种形状，你可以根据自己的需求选择合适的方法。在实际开发中，你可以根据这些基本原理结合实际情况创建更复杂的形状。

前端 CSS 经典：水波进度样式

2024-08-08

以下是一个简单的水波进度条样式示例，使用了CSS3动画来实现进度条的视觉效果。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水波进度条</title>
<style>
  .wave-progress {
    position: relative;
    width: 100%;
    height: 20px;
    background-color: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
  }
 
  .wave-progress::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 50% 50%, transparent 50%, #3399ff 50%);
    background-repeat: no-repeat;
    background-size: 100% 100%, 200% 200%;
    animation: wave-animation 2s linear infinite;
  }
 
  @keyframes wave-animation {
    0% {
      transform: translateX(-100%);
      background-position: 0 0, 100% 100%;
    }
    100% {
      transform: translateX(100%);
      background-position: 0 0, 0 100%;
    }
  }
</style>
</head>
<body>
<div class="wave-progress"></div>
</body>
</html>

这段代码定义了一个.wave-progress类，它创建了一个带有圆形渐变的伪元素（::after），通过@keyframes定义的动画使得水波效果不断循环。这个示例提供了一个简单的水波进度条样式，可以根据实际需求进行样式定制和功能扩展。

纯CSS实现动态炫酷按钮

2024-08-08

以下是一个使用纯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>
  .button {
    position: relative;
    background-color: #4CAF50;
    border: none;
    font-size: 28px;
    color: white;
    padding: 20px;
    width: 200px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    transition: transform 0.2s;
  }
 
  .button:active {
    transform: scale(0.95);
  }
 
  .button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    mix-blend-mode: multiply;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }
 
  .button:hover::before {
    opacity: 1;
  }
 
  .button::after {
    content: '►';
    position: absolute;
    top: 35%;
    right: 30%;
    color: white;
    font-size: 30px;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }
 
  .button:hover::after {
    opacity: 1;
  }
</style>
</head>
<body>
 
<button class="button">点击我</button>
 
</body>
</html>

这段代码定义了一个带有动画效果的按钮，当鼠标悬停时，按钮本身会缩小，同时按钮上的“►”符号和透明遮罩会显示出来。这个示例展示了CSS的强大功能，可以创建出吸引人的用户界面元素。

2024-08-08




// 导入Vite API
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// 导入处理CSS的插件，例如sass和less
import styleImport from 'vite-plugin-style-import'
 
// 导入获取CSS代码字符串的插件
import css from 'rollup-plugin-css-bundle'
 
// 配置Vite插件
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'ant-design-vue',
          esModule: true,
          resolveStyle: (name) => {
            return `ant-design-vue/es/${name}/style/index`
          },
        },
      ],
    }),
    css({ output: 'bundle.css' }),
  ],
  // CSS预处理器配置
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      },
      less: {
        additionalData: `@import "@/styles/variables.less";`
      }
    }
  }
})

在这个配置中，我们使用了vite-plugin-style-import插件来自动导入所需的ant-design-vue组件的样式。同时，我们通过css配置项指定了SCSS和LESS的预处理器选项，并通过additionalData导入了全局样式变量文件。最后，我们使用了rollup-plugin-css-bundle插件来获取打包后的CSS代码字符串，并可以将其输出到指定的文件中。

CSS实现三栏自适应布局（两边固定，中间自适应）

2024-08-08

可以使用CSS的Flexbox布局来实现这种三栏自适应布局。具体代码如下：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三栏自适应布局</title>
<style>
  .container {
    display: flex;
  }
 
  .side {
    flex: 0 0 100px; /* 固定宽度 */
    background: #ddd;
    text-align: center;
  }
 
  .middle {
    flex-grow: 1; /* 占据剩余空间 */
    background: #f3f3f3;
    min-width: 0; /* 防止内部内容过小导致middle变窄 */
  }
</style>
</head>
<body>
<div class="container">
  <div class="side">左边栏</div>
  <div class="middle">中间自适应区域</div>
  <div class="side">右边栏</div>
</div>
</body>
</html>

在这个例子中，.container 是一个flex容器。.side 类代表两边固定宽度的栏，使用 flex: 0 0 100px; 定义，意味着这两个侧边栏的宽度是100px，不会缩放也不会增长。.middle 类代表中间自适应的部分，使用 flex-grow: 1; 定义，意味着它会占据所有剩余的空间。