分类前端技术下的文章

2024-08-18

CSS3可以通过@keyframes规则和animation属性实现边框流动的效果。以下是一个简单的例子，演示如何使用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>
  .border-animation {
    width: 200px;
    height: 50px;
    position: relative;
    background-color: #f0f0f0;
    border: 2px solid #333;
    border-radius: 10px;
    animation: border-flow 5s infinite alternate linear;
  }
 
  .border-animation::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: inherit;
    z-index: -1;
    background-color: #f0f0f0;
    border: 2px solid #333;
    animation: border-flow-inner 5s infinite alternate linear;
  }
 
  @keyframes border-flow {
    0% {
      box-shadow: 0 0 10px #333;
    }
    100% {
      box-shadow: 0 0 20px #333;
    }
  }
 
  @keyframes border-flow-inner {
    0% {
      box-shadow: inset 0 0 10px #333;
    }
    100% {
      box-shadow: inset 0 0 20px #333;
    }
  }
</style>
</head>
<body>
<div class="border-animation"></div>
</body>
</html>

在这个例子中，.border-animation类创建了一个带有背景色和边框的容器。::before伪元素创建了一个内部的阴影以实现边框流动的效果。@keyframes border-flow和@keyframes border-flow-inner定义了流动的动画。通过animation属性应用到元素上，并设置动画的时长、重复次数和计时函数。

- 阅读更多 -

HTML5+CSS3实现哔哩哔哩首页（完整版）

System

2024-08-18

所有,css3

由于原始代码较为复杂且不包含具体实现，我们可以提供一个简化版本的示例代码，用于展示如何使用HTML5和CSS3创建一个简单的哔哩哔哩首页布局。




<!DOCTYPE html>
<html lang="zh-CN">
<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;
            background-color: #f7f7f7;
        }
        .header {
            height: 60px;
            background-color: #3d87f5;
            color: white;
            text-align: center;
            line-height: 60px;
        }
        .content {
            margin: 10px;
        }
        .video-list {
            column-count: 4;
            column-gap: 10px;
        }
        .video-item {
            break-inside: avoid;
            margin-bottom: 10px;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
            padding: 10px;
            border-radius: 4px;
        }
        .video-item img {
            width: 100%;
            height: auto;
            border-radius: 4px;
        }
        .video-item h3 {
            margin: 8px 0 0;
            font-size: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .footer {
            height: 60px;
            background-color: #3d87f5;
            color: white;
            text-align: center;
            line-height: 60px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>哔哩哔哩</h1>
    </div>
    <div class="content">
        <div class="video-list">
            <div class="video-item">
                <img src="https://example.com/video-cover.jpg" alt="视频封面">
                <h3>视频标题</h3>
                <!-- 其他视频信息 -->
            </div>
            <!-- 更多视频项 -->
        </div>
    </div>
    <div class="footer">
        <p>版权信息</p>
    </div>
</body>
</html>

这个简化版本的代码展示了如何使用HTML和CSS创建一个类似的布局，其中包含了一个头部（header）、主要内容（content）、视频列表（video-list）和视频项（video-item）以及底部（footer）。视频封面使用了一个示例图片链接，你可以根据实际情况替换为视频的实际封面图片。这个示例提供了一个简单的参考，展示了如何开始构建一个基本的视频网站布局。

- 阅读更多 -

CSS3 Flexbox与Grid布局在响应式设计中的选择依据

System

2024-08-18

所有,css3

在响应式设计中，选择Flexbox或Grid作为布局方式通常基于以下几个因素：

复杂性: 如果您需要一个简单的布局，比如水平或垂直排列元素，那么Flexbox可能是更好的选择。如果您需要更复杂的布局，比如具有多个列和行，Flexbox可能不够灵活，此时Grid更为适合。
IE 11及以下版本的支持: 如果您需要支持IE 11及以下版本，可能需要避免使用Grid布局，因为较老版本的IE浏览器不支持Grid。
设计的灵活性: Flexbox和Grid都提供了强大的布局能力，可以适应不同的屏幕尺寸和设备。
性能: 虽然这通常是由浏览器的布局引擎决定，但是在某些情况下，Flexbox可能比Grid具有更好的性能表现。
代码简洁性: 虽然Flexbox和Grid都能实现复杂的布局，但是在某些情况下，其中一种可能更加简洁。

以下是一个简单的Flexbox和Grid布局的对比示例：

Flexbox布局示例：




.container {
  display: flex; /* 指定为Flexbox布局 */
  flex-wrap: wrap; /* 允许换行 */
}
.item {
  flex: 1; /* 每个.item占据等分的空间 */
}

Grid布局示例：




.container {
  display: grid; /* 指定为Grid布局 */
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 列宽至少100px，自动填充剩余空间 */
}
.item {
  /* Grid项目的样式 */
}

在选择Flexbox还是Grid时，需要根据具体设计需求和项目要求来决定。

- 阅读更多 -

css3 新特性 + css3 动画

System

2024-08-18

所有,css3

CSS3 的新特性包括选择器、盒模型、背景和边框、文本效果、变换、动画、图像、阴影、多列布局、用户界面等。其中，CSS3 动画可以通过 @keyframes 创建复杂的、高级的动画效果。

以下是一个简单的 CSS3 动画示例，它使用了 transform 属性来创建一个旋转的动画效果：




/* 定义关键帧 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
/* 应用动画 */
.element {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 30px;
  animation: rotate 2s linear infinite;
}

HTML 部分：




<div class="element"></div>

在这个例子中，.element 类定义了一个动画，名为 rotate，它会使得元素无限期地持续旋转，每次旋转周期是 2 秒。@keyframes rotate 定义了旋转的起点（0 度）和终点（360 度）。animation 属性是一个简写属性，用于设置动画的多个参数，包括动画名称（rotate）、动画时长（2s）、动画时函数（linear）和动画循环次数（infinite）。

- 阅读更多 -

Vue3的transition标签以及animate.css使用详解

System

2024-08-18

所有,css




<template>
  <div id="app">
    <button @click="show = !show">Toggle</button>
    <transition name="fade" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div v-if="show" class="box"></div>
    </transition>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0;
      el.style.transition = 'opacity 0.5s';
    },
    enter(el, done) {
      setTimeout(() => {
        el.style.opacity = 1;
      }, 100);
      setTimeout(done, 500);
    },
    afterEnter(el) {
      this.animateCSS(el, 'animate__animated', 'animate__bounceIn');
    },
    animateCSS(element, animationName, animationType) {
      const node = document.createElement('div');
      node.classList.add(animationName);
      node.classList.add(animationType);
      node.classList.add('hide');
      element.appendChild(node);
 
      function handleAnimationEnd(event) {
        event.stopPropagation();
        node.classList.remove(animationType);
        node.classList.remove('hide');
        node.removeEventListener('animationend', handleAnimationEnd);
      }
      node.addEventListener('animationend', handleAnimationEnd);
    }
  }
}
</script>
 
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active for <2.1.8 */ {
  opacity: 0;
}
</style>

这个示例代码展示了如何在Vue 3中使用transition标签以及如何使用自定义的JavaScript动画函数来替代CSS动画库（如animate.css）的某些动画效果。这样做的好处是可以更灵活地控制动画的行为，并且不需要依赖外部的CSS文件。

- 阅读更多 -

css3---动画animation，一线互联网架构师前端框架体系架构

System

2024-08-18

所有,css3

CSS3 动画（Animation）是一种创建动画效果的机制，可以用来改变元素的样式，在一定的时间内平滑地过渡到新的样式。

基本语法：




@keyframes animationName {
  from {
    property1: value1;
    property2: value2;
    ...
  }
  to {
    property1: value1;
    property2: value2;
    ...
  }
}
 
element {
  animation-name: animationName;
  animation-duration: seconds;
  animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
  animation-delay: seconds;
  animation-iteration-count: n|infinite;
  animation-direction: normal|alternate;
  animation-fill-mode: none|forwards|backwards|both;
  animation-play-state: running|paused;
}

示例代码：




@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
 
.animated {
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

HTML 使用：




<div class="animated">This is a fading in text.</div>

以上代码定义了一个名为 fadeIn 的动画，它会在 2 秒内将元素从完全透明过渡到完全不透明。然后，我们将这个动画应用到了拥有 animated 类的元素上。

2024-08-18

在CSS3中，可以使用border-radius属性来创建内凹的圆角。通过指定较大的内部半径和较小的外部半径，可以实现内凹的效果。

以下是一个简单的例子，展示了如何使用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>
  .inset-rounded-corners {
    width: 200px;
    height: 200px;
    background-color: #3498db;
    border-radius: 50%;  /* 创建完全的圆形 */
    position: relative;
  }
 
  .inset-rounded-corners::before {
    content: '';
    position: absolute;
    top: 20px;  /* 根据需要调整 */
    left: 20px; /* 根据需要调整 */
    right: 20px; /* 根据需要调整 */
    bottom: 20px; /* 根据需要调整 */
    background-color: #fff;
    border-radius: 50%;
  }
</style>
</head>
<body>
<div class="inset-rounded-corners"></div>
</body>
</html>

在这个例子中，.inset-rounded-corners 类创建了一个带有背景色的方形，并使用border-radius: 50%;创建了完全圆角。然后，使用:before伪元素创建一个白色的圆形覆盖在方形的中心，从而形成内凹的效果。通过调整:before伪元素的top, left, right, bottom属性值，可以控制内凹的大小和深度。

System

2024-08-18

所有,css3




<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background: #E9E9E4;
        }
        .rabbit-container {
            width: 300px;
            height: 300px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .rabbit-ear {
            width: 100px;
            height: 100px;
            background: #000;
            border-radius: 50%;
            position: absolute;
            top: 50px;
            left: 30px;
            transform: rotate(-30deg);
            z-index: 10;
        }
        .rabbit-ear::before {
            content: '';
            width: 100px;
            height: 50px;
            background: #000;
            border-radius: 50%;
            position: absolute;
            bottom: -50px;
            left: -30px;
            transform: rotate(-30deg);
        }
        .rabbit-ear::after {
            content: '';
            width: 100px;
            height: 50px;
            background: #000;
            border-radius: 50%;
            position: absolute;
            bottom: -50px;
            right: -30px;
            transform: rotate(30deg);
        }
        .rabbit-body {
            width: 180px;
            height: 180px;
            background: #FFF;
            border-radius: 50%;
            position: absolute;
            bottom: -90px;
            left: 0;
            z-index: 5;
        }
        .rabbit-body::before {
            content: '';
            width: 30px;
            height: 100px;
            background: #000;
            position: absolute;
            bottom: -110px;
            left: 75px;
            z-index: 5;
            border-radius: 30px 30px 0 0;
        }
        .rabbit-eye {
            width: 20px;
            height: 24px;
            background: #000;
            border-radius: 50%;
            position: absolute;
            bottom: -100px;
            left: 60px;
        }
        .rabbit-eye::before {
            content: '';
            width: 8px;
            height: 8px;
            background: #FFF;
            border-radius: 50%;
            position: absolute;
            bottom: 5px;
            left: 10px;
        }
        .rabbit-nose {
            width: 24px;
            height: 18px;

- 阅读更多 -

前端从入门到入坟之HTML篇

System

2024-08-18

所有,css3

HTML是构建网页的基础语言，全称是Hyper Text Markup Language，即超文本标记语言。它是一种用于创建网页的标准标记语言。

以下是一个简单的HTML页面示例：




<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
    <a href="https://www.example.com">这是一个链接</a>
</body>
</html>

解释：

<!DOCTYPE html>：文档类型声明，用于通知浏览器使用HTML5的文档类型。
<html>：HTML文档的开始和结束标签。
<head>：包含了文档的元数据，如<title>标签定义了网页的标题。
<title>：定义了网页的标题，显示在浏览器的标题栏上。
<body>：包含了网页的主要可见部分，如文本（<h1>标题，<p>段落）和超链接(<a>标签)。

这个示例展示了如何创建一个基本的HTML页面，包含标题、段落和链接。这是学习前端开发的基础知识，对于初学者来说非常重要。

- 阅读更多 -

css3 flex弹性布局详解

System

2024-08-18

所有,css3

CSS3 Flex布局提供了一种更加灵活的方式来对容器内的项目进行布局，可以简化线性或者非线性布局的设计。

以下是一些关键的CSS属性和它们的作用：

display: flex; 或 display: inline-flex; - 这将创建一个弹性容器。
flex-direction - 定义了容器内项目的方向，可以是水平的（row, row-reverse）或垂直的（column, column-reverse）。
flex-wrap - 定义了当容器太小以至于不能放下所有项目时，项目是否应该换行。
flex-flow - 是flex-direction和flex-wrap的简写形式，默认值为row nowrap。
justify-content - 定义了项目在主轴方向上的对齐方式（例如，在水平容器中，这将影响项目的水平对齐）。
align-items - 定义了项目在交叉轴方向上的对齐方式（例如，在水平容器中，这将影响项目的垂直对齐）。
align-self - 定义了单个项目在交叉轴方向上的对齐方式。
flex-grow - 定义了项目的放大比例。
flex-shrink - 定义了项目的缩小比例。
flex-basis - 定义了在分配多余空间之前，项目占据的主轴空间（类似于width/height属性）。
flex - 是flex-grow, flex-shrink, 和 flex-basis的简写。
order - 定义了项目的排序顺序。

下面是一个简单的Flex布局示例：

HTML:




<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:




.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
 
.flex-item {
  width: 50px;
  height: 50px;
  background-color: #f76c6c;
  color: white;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
}

这个例子创建了一个水平的弹性容器，其中包含了三个方块状的子元素，每个方块都有相等的空间，并且围绕在它们的中间。

- 阅读更多 -