• ①css实现九宫格动画——前端筑基&&每天一道前端案例实现

    基于在线js编辑器，本文提供实现了一种简单的九宫格动画案例，具体步骤如下：

    文章目录

    总体效果

    效果有：展开、指针悬浮变色、收缩。
    在这里插入图片描述

    html实现代码

    DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<title>Documenttitle>
head>

<body>
	<div class="navigation">
		<span style="--i: 0; --x: -1; --y: 0"><ion-icon name="construct-outline">ion-icon>
      span>
      <span style="--i: 1; --x: 1; --y: 0"><ion-icon name="game-controller-outline">ion-icon>span>
      <span style="--i: 2; --x: 0; --y: -1"><ion-icon name="megaphone-outline">ion-icon>span>
      <span style="--i: 3; --x: 0; --y: 1"><ion-icon name="person-circle-outline">ion-icon>span>
      <span style="--i: 4; --x: 1; --y: 1"><ion-icon name="videocam-outline">ion-icon>span>
      <span style="--i: 5; --x: -1; --y: -1"><ion-icon name="trash-outline">ion-icon>span>
      <span style="--i: 6; --x: 0; --y: 0"><ion-icon name="stats-chart-outline">ion-icon>span>
      <span style="--i: 7; --x: -1; --y: 1"><ion-icon name="save-outline">ion-icon>span>
      <span style="--i: 8; --x: 1; --y: -1"><ion-icon name="cog-outline">ion-icon>span>
    div>
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js">script>
    <script>
        let navigation = document.querySelector('.navigation');
        navigation.onclick = function() {
            navigation.classList.toggle('active');
        };
    script>
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js">script>

  body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

    其中，navigation.classList.toggle('active');该方法会给DOM元素添加类或者是消除类，点击toggle标签时会触发生成active类。

    可见如下实例，会切换< p>标签的显示和隐藏的状态：

    <html>
<head>
<script type="text/javascript" src="/jquery/jquery.js">script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
  $("p").toggle();
  });
});
script>
head>
<body>
<p>This is a paragraph.p>
<button class="btn1">Togglebutton>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    toggle() 方法切换元素的可见状态。如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

    CSS效果实现

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #10131c;
}

.navigation {
  position: relative;
  width: 70px;
  height: 70px;
  background: #212532;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.5s;
  transition-delay: 0.8s;
}

.navigation.active {
  width: 200px;
  height: 200px;
  transition-delay: 0s;
}

.navigation span {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* 使用translate方法来移动文字或图像，在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。 */
  transform: translate(calc(12px * var(--x)), calc(12px * var(--y)));
  transition: transform 0.5s, width 0.5s, height 0.5s, background 0.5s;
  transition-delay: calc(0.1s * var(--i));
}

.navigation.active span{
  width: 45px;
  height: 45px;
  background: #333849;
  transform: translate(calc(60px * var(--x)), calc(60px * var(--y)));
}

.navigation span ion-icon{
    /* font-size CSS 属性指定字体的大小 */
  font-size: 0em;
  transition: 0.5s;
}
.navigation.active span ion-icon{
  font-size: 1.35em;
  color: #fff;
} 

.navigation.active span:hover ion-icon{
  color: #2dfc52;
  /* 把所有图像都改为黑白（100% 灰色）： */
  filter: drop-shadow(0 0 2px #2dfc52) drop-shadow(0 0 5px #2dfc52) drop-shadow(0 0 15px #2dfc52);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71

    filter属性

    filter 属性定义了元素(通常是< img>)的可视效果(例如：模糊与饱和度)。

    CSS语法具体如下：

    filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

    • 1

    注意：使用空格分隔多个滤镜。；滤镜通常使用百分比（例如：75%或者是0.75）.

    transition 属性

    transition 属性设置元素当过渡效果，四个简写属性为：

    • transition-property：指定属性的name，效果。
    • transition-duration：效果需要指定多少秒或者毫秒。
    • transition-timing-function：设定效果的转速曲线。
    • transition-delay：定义效果开始的时候。

    注意： 始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。

    CSS语法如下：

    transition: property duration timing-function delay;

    • 1

    justify-content 属性

    justify-content 属性（水平）对齐弹性容器的项目，当项目不占用主轴上所有可用空间时。

    注意：使用align-items属性垂直对齐项目。

    CSS语法如下：

    justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

    • 1

    常用属性如下：

    • flex-start：默认，项目位于容器开头。
    • flex-end：项目位于容器末尾。
    • center：项目位于容器中央位置。
    • space-between：项目在行于行之间留有间隔。
    • space-around：项目在行之前、行之间和行之后都留有空间。

    display: flex;属性设置

    Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

    之所以称之为flex，因为其能够拓展收缩flex容器内的元素，最大限度地填充可用空间。

    • 不同方向排列元素
    • 重新排列元素的显示顺序
    • 更改元素的对齐方式
    • 动态的把元素装入到容器中

    在flexbox模型中，有三个核心的概念，flex项目：

    • flex项（也称之为flex子元素），需要布局的元素。
    • flex容器，包括flex项目。
    • 排列的方向，direction决定了flex项目的布局方向。

    在这里插入图片描述

    flex-direction：

    • row：默认，主轴水平，起点左端。
    • row-reverse：主轴水平，起点右端。
    • column：主轴垂直方向，起点上沿。
    • column-reverse：主轴垂直，起点下沿。

    justify-content:

    • flex-start：默认，左对齐。
    • flex-end：右对齐。
    • center：居中。
    • space-between：两端对齐，项目之间的间隔都相等。
    • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

    flex-wrap:

    • nowrap：默认，不换行。
    • wrap：换行，第一行上方。
    • wrap-reverse：换行，第一行下方。

    align-content:

    定义了多根轴线的位置，若项目仅仅只有一条轴线，则设置不起作用。

    • flex-start：与交叉轴的起点对齐。
    • flex-end：与交叉轴的终点对齐。
    • center：与交叉轴的中点对齐。
    • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
    • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
    • stretch（默认值）：轴线占满整个交叉轴。

    在这里插入图片描述

  • 相关阅读:
    priority_queue(优先级队列的模拟使用和实现)
    还在担心漏测吗？快来使用jacoco统计下代码覆盖率
    Linux-进程替换
    GitHub图床整合JAVA、PicGo
    Monocular arbitrary moving object discovery and segmentation 论文阅读
    linux系统iptables的操作
    DNS系统
    The file Structure
    HTX 与 Zebec Protocol 深度合作，并将以质押者的身份参与 ZBC Staking
    DAO：“动态仲裁”能否解决投票冷漠问题？
  • 原文地址：https://blog.csdn.net/qq_42544728/article/details/126885000