分类 css 下的文章

2024-08-10

在CSS中，可以使用多种技术来实现各种优惠券的效果。以下是一个简单的优惠券效果的实现：

HTML:




<div class="coupon">
  <div class="coupon-content">
    <div class="coupon-title">优惠券</div>
    <div class="coupon-description">
      购买任何产品得<strong>5%</strong> off
    </div>
  </div>
  <div class="coupon-code">CODE123</div>
</div>

CSS:




.coupon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f8f8f8;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
 
.coupon-content {
  flex: 1;
}
 
.coupon-title {
  color: #333;
  font-size: 18px;
  font-weight: bold;
}
 
.coupon-description {
  color: #666;
  font-size: 14px;
  margin-top: 10px;
}
 
.coupon-code {
  padding: 10px;
  background-color: #ff5353;
  color: white;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  border-radius: 5px;
}

这段代码创建了一个简单的优惠券卡片，左侧展示优惠内容，右侧展示优惠券码。通过CSS样式，我们为优惠券添加了背景颜色、边框圆角、阴影等视觉效果，以及添加了一些动感和交互，使其更加吸引人。

- 阅读更多 -

前端练习＜Html&CSS＞——悬浮抽卡片（附完整代码及实现效果）

System

2024-08-10

所有,css

以下是实现悬浮抽卡片效果的完整HTML和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>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;
  }
  .card {
    width: 200px;
    height: 260px;
    background-color: #fff;
    position: absolute;
    top: 10px;
    left: 10px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.2s ease-in-out;
  }
  .card:hover {
    transform: translateY(-10px) scale(1.05);
  }
  .card-content {
    text-align: center;
    padding: 10px;
  }
  .card-content img {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    border-radius: 50%;
    object-fit: cover;
  }
  .card-content h2 {
    font-size: 18px;
    margin: 0;
  }
  .card-content p {
    margin: 0;
    font-size: 14px;
    color: #555;
  }
</style>
</head>
<body>
<div class="container">
  <div class="card">
    <div class="card-content">
      <img src="https://randomuser.me/api/portraits/women/85.jpg" alt="Profile Photo">
      <h2>John Doe</h2>
      <p>Front-end Developer</p>
    </div>
  </div>
</div>
</body>
</html>

这段代码创建了一个简单的悬浮抽卡片效果。用户将鼠标悬停在卡片上时，卡片会上移并稍微放大，模拟一种悬浮的效果。这是一个很好的练习，可以帮助初学者熟悉CSS的动画效果和交互设计。

- 阅读更多 -

CSS技巧专栏：一日一例 4.纯CSS实现两款流光溢彩的酷炫按钮特效

System

2024-08-10

所有,css

以下是实现两款流光溢彩的炫 Button 的 CSS 代码：

解法一：




.btn-ellipse {
  position: relative;
  background: none;
  border: 2px solid #00FFE0;
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 18px;
  color: #00FFE0;
  outline: none;
  overflow: hidden;
  box-sizing: border-box;
  transition: border-color 0.3s;
}
 
.btn-ellipse:hover {
  border-color: #00FFE0;
  background: linear-gradient(45deg, #00FFE0, #00FFE0);
  background-size: 100%;
  background-repeat: no-repeat;
  animation: moveGrad 2s infinite alternate ease-in-out;
}
 
@keyframes moveGrad {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 200px 0;
  }
}

解法二：




.btn-glitch {
  position: relative;
  background: #00FFE0;
  border: 2px solid #00FFE0;
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 18px;
  color: #00FFE0;
  outline: none;
  overflow: hidden;
  box-sizing: border-box;
  transition: border-color 0.3s;
}
 
.btn-glitch:hover {
  border-color: #00FFE0;
  background: linear-gradient(45deg, #00FFE0, #00FFE0);
  background-size: 100%;
  background-repeat: no-repeat;
  animation: moveGrad 2s infinite alternate ease-in-out;
}
 
@keyframes moveGrad {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 200px 0;
  }
}

这两种解法都是使用 CSS 的 animation 属性和 @keyframes 关键字来创建流光溢彩的效果。解法一是通过改变背景位置来实现移动的视觉效果，而解法二则是通过改变背景颜色的不透明度来实现同样的效果。这两种方法都能很好地展示流光溢彩的按钮效果，并且代码简洁，易于理解。

- 阅读更多 -

React 应用的 CSS 样式模块化

System

2024-08-10

所有,css




// 引入React和相关组件
import React from 'react';
import { Button } from 'antd';
import 'antd/dist/antd.css'; // 引入Ant Design的样式
import './App.css'; // 引入应用特有的样式
 
// 定义组件
const App = () => {
  return (
    <div className="App">
      <h1>欢迎来到我的React应用</h1>
      <Button type="primary">点击我</Button>
    </div>
  );
};
 
// 导出组件
export default App;

这个例子展示了如何在React应用中引入和使用Ant Design组件库，并且如何通过模块化的方式引入它的CSS样式和应用特有的CSS样式。这种方法可以帮助开发者管理复杂的样式依赖，并确保样式的可维护性。

- 阅读更多 -

toFixed 函数引起的 bug，CSS常用五类选择器

System

2024-08-10

所有,css

toFixed 函数通常用于格式化数字，确保小数点后有固定的位数，并且返回字符串表示形式。如果你在使用 toFixed 函数时遇到了问题，可能是因为传入了无法转换为数字的值，或者是因为内部的处理溢出了。

例如，在 JavaScript 中使用 toFixed 函数：




var num = 123.456;
var fixedNum = num.toFixed(2); // "123.46" 返回字符串

如果你遇到了错误，可能是因为 num 不是数字类型，或者你尝试将 toFixed 应用在一个非数字值上。

解决方法：

确保传递给 toFixed 的值是数字类型。
如果值可能是字符串，请先使用 parseFloat 将其转换为数字。
检查是否有任何意外的全局变量或未定义的变量导致 toFixed 被应用在非数字类型上。




var num = "123.456"; // 假设这是一个字符串
var fixedNum = parseFloat(num).toFixed(2); // "123.46"

注意：如果 num 原本就是数字，则不需要 parseFloat。

CSS常用的五类选择器包括：

元素选择器（例如 p 选择所有段落元素）
类选择器（例如 .classname 选择所有 class 为 classname 的元素）
ID选择器（例如 #idname 选择所有 ID 为 idname 的元素）
属性选择器（例如 [href] 选择所有具有 href 属性的元素）
伪类选择器（例如 :hover 选择鼠标悬停的元素）

CSS选择器示例代码：




p { color: blue; } /* 元素选择器 */
.highlight { background-color: yellow; } /* 类选择器 */
#footer { text-align: center; } /* ID选择器 */
a[href] { color: red; } /* 属性选择器 */
ul li:first-child { font-weight: bold; } /* 伪类选择器 */

- 阅读更多 -

使用CSS Flexbox 构建可靠实用的网站 Header

System

2024-08-10

所有,css




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox 实践</title>
<style>
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    background-color: #333;
    color: #fff;
  }
  .header .logo {
    flex: 1;
    text-align: left;
    padding-left: 10px;
  }
  .header .nav {
    flex: 2;
    text-align: right;
    padding-right: 10px;
  }
  .header a {
    color: #fff;
    text-decoration: none;
    padding: 0 10px;
  }
</style>
</head>
<body>
<header class="header">
  <div class="logo">
    <a href="/">
      <img src="logo.png" alt="Logo" height="30">
    </a>
  </div>
  <nav class="nav">
    <a href="/">首页</a>
    <a href="/about">关于我们</a>
    <a href="/contact">联系我们</a>
  </nav>
</header>
</body>
</html>

这个代码实例展示了如何使用Flexbox来创建一个包含logo和导航链接的header。使用了flexbox布局，logo部分被赋予了flex: 1，导航链接部分被赋予了flex: 2，以确保在不同的屏幕尺寸下都能保持良好的用户体验。同时，示例中的CSS使用了合理的缩进和注释，使得代码结构清晰，易于阅读和维护。

System

2024-08-10

所有,css

3D标签动画：




// 创建3D动画
function create3DTagAnimation(element) {
    const animation = element.animate({
        transform: [
            'perspective(600px) rotateX(0deg) rotateY(0deg)',
            'perspective(600px) rotateX(360deg) rotateY(360deg)'
        ]
    }, {
        duration: 5000,
        direction: 'alternate',
        iterations: Infinity,
        easing: 'ease-in-out'
    });
    return animation;
}

指定范围内的随机数：




// 获取指定范围内的随机数
function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min; // 返回介于min和max之间的一个随机整数
}

动态设置CSS变量：




// 设置CSS变量的值
function setCSSVariable(element, name, value) {
    element.style.setProperty('--' + name, value);
}

文档片段对象：




// 创建并返回一个新的DocumentFragment
function createDocumentFragment() {
    return document.createDocumentFragment();
}

反向动画：




// 反向播放动画
function playAnimationInReverse(animation) {
    animation.pause();
    animation.effect.reverse().applyForwards();
    animation.play();
}

- 阅读更多 -

CSS核心样式-01-字体属性与文本属性

System

2024-08-10

所有,css




/* 设置字体族 */
p {
  font-family: "Helvetica", "Arial", sans-serif;
}
 
/* 设置字体大小 */
p {
  font-size: 16px;
}
 
/* 设置字体粗细 */
strong {
  font-weight: bold; /* 或者使用数值 400, 600 (正常或粗体) */
}
 
/* 设置字体样式（斜体） */
em {
  font-style: italic;
}
 
/* 设置行间距 */
p {
  line-height: 1.5; /* 这里可以是无单位的数值或者具体的长度值 */
}
 
/* 设置文本的水平对齐方式 */
p {
  text-align: center; /* 可选值：left, right, center, justify */
}
 
/* 设置文本修饰（下划线） */
a {
  text-decoration: underline; /* 可选值：none, underline, overline, line-through, inherit */
}
 
/* 设置文本缩写（使用省略号） */
p {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

这段代码展示了如何使用CSS来设置文本的字体属性，如字体族、大小、粗细、样式、行间距以及对齐方式，还包括了链接文本的修饰和文本的缩写。

- 阅读更多 -

css折叠的导航栏

System

2024-08-10

所有,css

要创建一个简单的CSS折叠的导航栏，你可以使用HTML和CSS。以下是一个基本的例子：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Collapsible Navigation Bar</title>
<style>
  body {
    font-family: Arial, sans-serif;
  }
  .navbar {
    overflow: hidden;
    background-color: #333;
  }
  .navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  .navbar a:hover {
    background-color: #ddd;
    color: black;
  }
  .navbar .icon {
    display: none;
  }
  @media screen and (max-width: 600px) {
    .navbar a:not(:first-child) {display: none;}
    .navbar a.icon {
      float: right;
      display: block;
    }
  }
  @media screen and (max-width: 600px) {
    .navbar.responsive {position: relative;}
    .navbar.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .navbar.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }
</style>
</head>
<body>
 
<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
</div>
 
<script>
function myFunction() {
  var x = document.querySelector(".navbar");
  if (x.className === "navbar") {
    x.className += " responsive";
  } else {
    x.className = "navbar";
  }
}
</script>
 
</body>
</html>

CSS:




body {
  font-family: Arial, sans-serif;
}
 
.navbar {
  overflow: hidden;
  background-color: #333;
}
 
.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
.navbar a:hover {
  background-color: #ddd;
  color: black;
}
 
.navbar .icon {
  display: none;
}
 
@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {display: none;}
  .navbar a.icon {
    float: right;
    display: block;
  }
}
 
@media screen and (max-width: 600px) {
  .navbar.responsive {position: relative;}
  .navbar.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

这段代码包括了一个简单的水平导航栏，以及一个可以折叠/展开的菜单图标。当屏幕宽度小于600像素时，除第一个链接外的所有链接会被隐藏，同时显示菜单图标，点击该图标可以切换导

System

2024-08-10

所有,css




const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';
 
module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.(scss|css)$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      }
      // ...
    ]
  },
  plugins: [
    // ...
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
    // ...
  ]
  // ...
};

这段代码根据环境变量NODE_ENV的值来决定是使用style-loader还是MiniCssExtractPlugin.loader。如果NODE_ENV不是production，意即开发环境，通常会使用style-loader将样式以<style>标签的形式直接注入到页面，便于开发调试。如果是生产环境，则使用MiniCssExtractPlugin.loader将样式提取为独立的.css文件。同时，在plugins数组中加入了MiniCssExtractPlugin实例，用于生产环境下的CSS文件提取。

- 阅读更多 -