标签 css 下的文章

HTML5七夕情人节表白网页制作【HTML5庆祝生日蛋糕烟花特效】HTML+CSS+JavaScript

2024-08-09

以下是一个简单的HTML5七夕情人节表白网页示例，包含了一个生日蛋糕的特效。




<!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 {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
  }
  .birthday-cake {
    position: relative;
    width: 100%;
    height: 100%;
    background: #f2e9e4;
    overflow: hidden;
  }
  .cake {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('cake.png') no-repeat;
    animation: rotate 5s linear infinite;
  }
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
</style>
</head>
<body>
<div class="birthday-cake">
  <div class="cake"></div>
</div>
<script>
  // 此处可以添加自定义的JavaScript代码，比如添加烟花特效等
</script>
</body>
</html>

在这个示例中，.birthday-cake 是一个容器，用来放置生日蛋糕的图像，.cake 是一个绝对定位的元素，背景图片是一个静态的生日蛋糕。通过CSS的 @keyframes 规则创建了一个无限循环的旋转动画。

你可以将 cake.png 替换为你自己的生日蛋糕图片，并在 <script> 标签内添加你想要的特效，比如表白的文字，烟花特效等。这个示例提供了一个简单的起点，你可以在此基础上根据自己的创意和需求进行自定义和拓展。

System

2024-08-09

所有,jquery

jQuery.transition.js 是一个用于简化CSS3过渡效果应用的jQuery插件。以下是一个使用该插件的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Transition Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="path/to/jquery.transition.js"></script>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            transition: all 1s ease;
            -webkit-transition: all 1s ease;
            /* For Safari */
        }
        .box.large {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button id="enlarge">Enlarge Box</button>
 
    <script>
        $(document).ready(function() {
            $('#enlarge').click(function() {
                $('.box').addClass('large', 'easeInOutQuad');
            });
        });
    </script>
</body>
</html>

在这个例子中，我们定义了一个带有过渡效果的 .box 类，并在样式表中指定了改变大小时的动画过渡。jQuery.transition.js 插件允许我们通过 .addClass() 方法应用这个过渡，只需要在第二个参数中指定过渡效果的函数名即可。这个例子演示了如何使用这个插件来简化CSS3过渡的应用，并使其在现代浏览器中更加高效和用户友好。

System

2024-08-09

所有,jquery

以下是一个简单的图书管理系统的前端部分示例，包括增,删,改,查的功能。使用了HTML, CSS, JavaScript, jQuery 和 axios 库。

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Book Manager</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
  <h2>Books</h2>
  <input type="text" v-model="newBook" placeholder="Add book">
  <button @click="addBook">Add</button>
  <ul>
    <li v-for="(book, index) in books" :key="index">
      {{ book }}
      <button @click="removeBook(index)">Delete</button>
      <button @click="editBook(index)">Edit</button>
    </li>
  </ul>
  <div v-if="editIndex !== null">
    <input type="text" v-model="editBookValue">
    <button @click="updateBook(editIndex)">Update</button>
    <button @click="cancelEdit">Cancel</button>
  </div>
</div>
 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@next"></script>
<script src="main.js"></script>
</body>
</html>

CSS (style.css):




#app {
  max-width: 600px;
  margin: 30px auto;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 
input[type="text"] {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  box-sizing: border-box;
}
 
button {
  padding: 10px 15px;
  background-color: #5cb85c;
  color: white;
  border: none;
  margin: 10px 0;
  cursor: pointer;
}
 
button:hover {
  background-color: #4cae4c;
}
 
ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

JavaScript (main.js):




const { createApp, ref } = Vue;
 
createApp({
  setup() {
    const books = ref([]);
    const newBook = ref('');
    const editIndex = ref(null);
    const editBookValue = ref('');
 
    const fetchBooks = async () => {
      // 假设有一个API可以获取图书列表
      const response = await axios.get('/api/books');
      books.value = response.data;
    };
 
    fetchBooks();
 
    const addBook = () => {
      books.value.push(newBook.value);
      newBook.value = '';
    };
 
    const removeBook = (index) => {
      books.value.splice(index, 1);
    };
 
    const editBook = (index) => {
      editIndex.value = index;
      editBookValue.value = books.value[index];
    };
 
    const updateBook = (index) => {
      books.value[index] = editBookValue.value;
      editIndex.value = null;

- 阅读更多 -

学习使用js和jquery修改css路径，实现html页面主题切换功能

System

2024-08-09

所有,jquery




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主题切换示例</title>
    <link id="theme-link" rel="stylesheet" href="default.css">
</head>
<body>
    <button id="theme-toggle">切换主题</button>
 
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#theme-toggle').click(function() {
                var currentTheme = $('#theme-link').attr('href');
                var themeToSwitch = (currentTheme === 'default.css') ? 'dark.css' : 'default.css';
                $('#theme-link').attr('href', themeToSwitch);
            });
        });
    </script>
</body>
</html>

在这个例子中，我们有一个按钮和一个链接元素，链接元素指向当前使用的CSS样式表。页面加载完成后，我们绑定点击事件到按钮上，当按钮被点击时，会检查当前的CSS样式表，并根据需要切换到另一个样式表。这个功能可以通过jQuery库来简化DOM操作。

- 阅读更多 -

使用CSS、JavaScript、jQuery三种方式实现手风琴效果

System

2024-08-09

所有,css

以下是实现手风琴效果的简单示例代码。这个示例使用了HTML结构、CSS样式和jQuery来控制手风琴的打开和关闭。

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Accordion</title>
<style>
  .accordion {
    overflow: hidden;
    border: 1px solid #777;
  }
  .accordion-item {
    padding: 10px;
    background-color: #f0f0f0;
    transition: background-color 0.3s;
  }
  .accordion-item:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  .accordion-item:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  .accordion-item.active {
    background-color: #e0e0e0;
  }
</style>
</head>
<body>
 
<div class="accordion">
  <div class="accordion-item active">Item 1</div>
  <div class="accordion-item">Item 2</div>
  <div class="accordion-item">Item 3</div>
</div>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
  $('.accordion-item').click(function() {
    $(this).toggleClass('active').siblings().removeClass('active');
  });
});
</script>
 
</body>
</html>

这个示例中的手风琴效果非常基础，只有打开和关闭的功能，没有滑动动画效果。实际应用中可以根据需要添加更多的交互细节。

- 阅读更多 -

CSS自定义弹窗如何禁用遮罩层滚动条？用CSS禁用滚动穿透。

System

2024-08-09

所有,css

要在CSS中禁用遮罩层的滚动条，可以为遮罩层设置overflow: hidden;属性。这样，即使遮罩层内容超出了其设定的大小，也不会显示滚动条。

以下是实现这一功能的CSS代码示例：




.mask-layer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明遮罩层 */
  overflow: hidden; /* 禁用滚动 */
  z-index: 1000; /* 确保遮罩层在其他内容之上 */
}

这段CSS会创建一个全屏的遮罩层，并且不会因内容溢出而显示滚动条。这样做可以防止滚动事件穿透到底层的页面内容上。

- 阅读更多 -

关于HTML、CSS和JS如何变成页面

System

2024-08-09

所有,html

HTML、CSS和JS组合起来可以创建一个完整的网页。

HTML (Hypertext Markup Language) 负责定义网页的结构。

CSS (Cascading Style Sheets) 负责定义网页的样式，即外观。

JS (JavaScript) 负责定义网页的行为，即交互。

以下是一个简单的HTML页面示例，它包含了基本的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>My First Page</title>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        .header {
            background-color: #35495e;
            color: #ffffff;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
 
<div class="header">
    <h1>Welcome to My Page</h1>
</div>
 
<p>This is a paragraph.</p>
 
<script>
    // JavaScript code here
    function showMessage() {
        alert('Hello, World!');
    }
    showMessage();
</script>
 
</body>
</html>

在这个例子中，HTML定义了页面的结构，CSS定义了页面的样式，而JavaScript通过showMessage函数弹出一个警告框，展示了页面的交互行为。

- 阅读更多 -

[前端开发] HTML CSS JavaScript 深入学习 - 防抖和节流

System

2024-08-09

所有,html

防抖和节流是优化函数执行频率的两种技巧，用以改善用户体验。

防抖（Debounce）: 指触发事件后，在指定的时间内，若再次触发事件，则重新计时。直到指定时间内没有再次触发事件时，事件处理函数才会执行一次。




function debounce(fn, wait) {
    let timeout = null;
    return function() {
        let context = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout);
        let callNow = !timeout;
        timeout = setTimeout(() => {
            timeout = null;
        }, wait);
        if (callNow) fn.apply(context, args);
    };
}
 
// 使用
let myEfficientFn = debounce(function() {
    // 实际处理函数内容
    console.log('Debounced!');
}, 250);
 
window.addEventListener('resize', myEfficientFn);

节流（Throttle）: 指连续触发事件时，保证一定时间段内只执行一次事件处理函数。




function throttle(fn, wait) {
    let previous = 0;
    return function() {
        let context = this;
        let args = arguments;
        let now = new Date();
        if (now - previous > wait) {
            fn.apply(context, args);
            previous = now;
        }
    };
}
 
// 使用
let myEfficientFn = throttle(function() {
    // 实际处理函数内容
    console.log('Throttled!');
}, 250);
 
window.addEventListener('resize', myEfficientFn);

防抖和节流可以用于输入框的输入事件（如 keyup、mousemove），窗口的大小调整事件（resize），以及任何需要优化性能的事件处理中。

System

2024-08-09

所有,css3

在Vue中，您可以使用v-if或v-show来动态添加或删除DOM元素，并利用CSS3的animation属性来实现字体上升并渐变消失的效果。以下是一个简单的示例：




<template>
  <div id="app">
    <button @click="show = !show">Toggle Animation</button>
    <transition name="fade-up">
      <div v-if="show" class="animated-text">Hello World!</div>
    </transition>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      show: true
    };
  }
};
</script>
 
<style>
.animated-text {
  animation: up-and-fade 3s infinite;
}
 
@keyframes up-and-fade {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px);
  }
}
 
.fade-up-enter-active, .fade-up-leave-active {
  transition: opacity 0.5s, transform 0.5s;
}
 
.fade-up-enter, .fade-up-leave-to /* .fade-up-leave-active for <2.1.8 */ {
  opacity: 0;
  transform: translateY(20px);
}
</style>

在这个示例中，我们定义了一个animated-text类，它使用CSS3的animation属性来创建上升并渐变消失的动画效果。通过Vue的<transition>组件包裹动态内容，可以在元素显示与隐藏时应用相应的过渡效果。通过改变show数据属性的值，可以控制文本的显示和隐藏。

- 阅读更多 -

CSS选择器优先级，及权重计算规则

System

2024-08-09

所有,css3

CSS选择器的优先级是由选择器的组成部分确定的，主要有四个层次：元素标签、类选择器、ID选择器和内联样式。权重是根据这四个层次的不同类型进行计算的。

计算规则如下：

对于每个选择器，统计其中的id选择器的数量。
统计其中的其他选择器（包括类选择器、属性选择器等）的数量。
如果选择器中包含了!important规则，则其权重会被提高到最高。
最后计算内联样式，它的权重最高，为1000。

权重的计算方法是：将所有的id选择器的数量按照10的幂进行计算（每多一个id选择器，就乘以10），然后将其他选择器的数量相加。最后，将内联样式的1000添加到最终结果中。

例如，考虑以下选择器：




p#content .list-item span

这个选择器包含一个id选择器(#content)，一个类选择器(.list-item)和一个元素标签(span)，没有使用!important。计算其权重如下：

计算id选择器的数量：1
计算其他选择器的数量：1（类选择器）+ 1（元素标签）= 2
内联样式的权重不考虑，因为这个选择器不是内联样式。
最终权重计算为：100 + 2 = 102

如果另一个选择器是：




div#content .list-item span

这个选择器也是包含一个id选择器，一个类选择器和一个元素标签，但是因为id选择器更具体，所以它的权重会更高：100 + 10 + 2 = 112。

如果使用!important，则其优先级会高于所有其他规则，例如：




p#content .list-item span { color: red !important; }

这条规则即使计算出的权重很高，也会被!important所覆盖，使得它具有最高的优先级。

- 阅读更多 -