标签 css 下的文章

web前端之3D标签动画、指定范围的随机数、动态设置css变量、文档片段对象、反向动画

2024-08-10

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像素时，除第一个链接外的所有链接会被隐藏，同时显示菜单图标，点击该图标可以切换导

- 阅读更多 -

html+css+js实现爱心表白树源码（分享）

System

2024-08-10

所有,html5

以下是一个简单的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>Love Tree</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #2c3e50;
  }
  .tree {
    position: relative;
    width: 150px;
    height: 200px;
    background: conic-gradient(#33cc99, #66ffff 10%, #66ffff 90%, #33cc99);
    border-radius: 50%;
    box-shadow: 0px 0px 20px rgba(0, 255, 0, 1);
  }
  .tree::before {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    background: conic-gradient(#33cc99, #66ffff 10%, #66ffff 90%, #33cc99);
    border-radius: 50%;
  }
  .tree::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    background: conic-gradient(#33cc99, #66ffff 10%, #66ffff 90%, #33cc99);
    border-radius: 50%;
  }
</style>
</head>
<body>
<div class="tree"></div>
</body>
</html>

这个示例展示了如何使用CSS创建一个简单的爱心树，你可以通过调整width、height、background等属性来自定义其尺寸和颜色。

JavaScript代码将用于添加动态特性，比如表白卡片的随机飘落，以及与树的互动。这部分将在后续的解决方案中提供。

- 阅读更多 -

Css使字符占位的宽度一致（如两个字占四个字符位置）

System

2024-08-10

所有,html5

要使文本占位的宽度保持一致，可以使用CSS的width属性或者padding-left和padding-right属性，结合:before伪元素来实现。以下是一个示例，展示如何使两个字符的宽度等同于四个字符的宽度：




<div class="char-placeholder">两字</div>




.char-placeholder {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-align: left;
}
 
.char-placeholder:before {
  content: '四字四字';
  display: inline-block;
  width: 100%;
  visibility: hidden;
}
 
.char-placeholder::after {
  content: '';
  display: inline-block;
  width: 100%;
  margin-left: -100%;
}
 
.char-placeholder::before,
.char-placeholder::after {
  position: absolute;
  pointer-events: none;
}

在这个例子中，.char-placeholder是实际显示的文本。:before伪元素用来提供占位的文本，而:after伪元素用来将文本推到视图之外。这样，两个显示字符的宽度就会和四个:before伪元素中字符的宽度一致。

System

2024-08-10

所有,html5

以下是一个使用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, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  .heart-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .heart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    animation: grow-shrink 3s infinite alternate ease-in-out;
  }
  @keyframes grow-shrink {
    from {
      transform: translate(-50%, -50%) scale(0.5);
    }
    to {
      transform: translate(-50%, -50%) scale(1.5);
    }
  }
</style>
</head>
<body>
<div class="heart-container">
  <img class="heart" src="heart.png" alt="Love Heart">
</div>
</body>
</html>

在这个示例中，.heart-container 是一个全屏的容器，用来放置爱心图片。.heart 类用来定义爱心的初始样式和动画效果。@keyframes grow-shrink 定义了一个动画，让爱心从原始大小放大到1.5倍，然后再缩小回原始大小，这个动画无限循环，并且是交替执行以产生动态效果。

请确保你有一个名为 heart.png 的爱心图片放在和HTML文件同一个目录下。如果你想要使用不同的图片或者调整动画效果，请根据需要自行修改CSS代码。

System

2024-08-10

所有,jquery




$(document).ready(function() {
    // 假设我们要选择页面上所有的段落元素，并将它们的颜色设置为蓝色
    $('p').css('color', 'blue');
 
    // 如果我们要选择id为'myDiv'的元素，并改变其背景颜色为黄色
    $('#myDiv').css('background-color', 'yellow');
 
    // 选择class为'myClass'的所有元素，并设置它们的字体大小
    $('.myClass').css('font-size', '20px');
 
    // 同时设置多个样式
    $('#myDiv').css({
        'background-color': 'green',
        'border': '1px solid black'
    });
});

这段代码演示了如何使用jQuery选择器获取页面元素，并使用css()方法来设置它们的样式。这是jQuery中非常基础且常用的功能。

- 阅读更多 -

jQuery - 获取并设置 CSS 类

System

2024-08-10

所有,jquery




// 使用jQuery获取并设置CSS类
 
// 获取元素当前的类
var currentClass = $('#element').attr('class');
 
// 添加一个新的类
$('#element').addClass('new-class');
 
// 移除一个类
$('#element').removeClass('old-class');
 
// 切换一个类（如果类存在则移除，不存在则添加）
$('#element').toggleClass('toggle-class');
 
// 检查是否有特定的类
if ($('#element').hasClass('check-class')) {
    // 有这个类的操作
} else {
    // 没有这个类的操作
}

在这个例子中，我们使用jQuery选择器$('#element')来获取ID为element的DOM元素。然后，我们使用.addClass()、.removeClass()、.toggleClass()和.hasClass()方法来操作这个元素的类。这些方法是jQuery中用于管理元素类的主要工具。

System

2024-08-10

所有,jquery

以下是一个简化的HTML结构示例，用于创建一个水果商城的成品页面：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水果商城 - 水果详情页</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <!-- 导航栏 -->
    </header>
    <main>
        <section class="product-details">
            <div class="product-image">
                <!-- 图片展示 -->
            </div>
            <div class="product-info">
                <!-- 产品信息 -->
            </div>
        </section>
        <section class="product-description">
            <!-- 产品描述 -->
        </section>
        <section class="product-reviews">
            <!-- 产品评论 -->
        </section>
    </main>
    <footer>
        <!-- 页脚信息 -->
    </footer>
    <script src="script.js"></script>
</body>
</html>

CSS样式表 styles.css 需要根据具体设计进行编写，JavaScript脚本 script.js 需要根据页面功能进行编写。以上代码仅提供了HTML结构的一个框架，并未包含具体的样式和交互逻辑。

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文件提取。

- 阅读更多 -