首页 > 其他分享 >css学习笔记之展开列表图标动画

css学习笔记之展开列表图标动画

时间：2024-04-10 12:59:46浏览次数：18  
标签：动画 rotate 0deg top list transform height css 图标


“蓝色界面”风格的填充的星图标欢迎下载填充的星矢量图标，“蓝色界面”风格。格式有png、svg、pdf、html代码。可对填充的星图标、符号进行修改、调整大小、修改颜色。icon-default.png?t=N7T8https://igoutu.cn/icon/y0OTcruih2CY/%E5%A1%AB%E5%85%85%E7%9A%84%E6%98%9F

今天在这个网站看到了上面类似的效果，然后就想弄一个，然后就有了上面的 

  1. 先简单来一个样式和布局

    1. 我使用的是vue 原生区别就是用js在控制class的切换，差别不大，可放心食用
    2. <template>
  <div
    class="list"
    @click="isCollapse = !isCollapse"
    :class="isCollapse ? 'collapse' : 'backCollapse'"
  >
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
  </div>
</template>
<script setup>
    import { ref } from "vue";
    let isCollapse = ref(false);
</script>
    3. 接下来是css (我使用的是scss)先都写出来，方便粘贴，后面继续讲解
    4. <style lang="scss" scoped>
$list-width: 15px;// 列表的宽度
$list-height: 2px;//列表子项的高度 即每一个长条的宽度
$list-color: black;// 列表子项的颜色
$list-time: .5s;// 动画时间
$list-margin-bottom: 3px;// 列表子项之间的间距
$list-box-height: ($list-height + $list-margin-bottom) * 3 -$list-margin-bottom;//列表的高度
// 列表高度是用来计算选择的中心的 

.list {
  margin-left: 50px;
  margin-top: 10px;
//以上两个不影响，只是为了自己更好观察
  width: $list-width;
  height: $list-box-height;
  .list-item {
    width: $list-width;
    height: $list-height;
    background: black;
    margin-bottom: $list-margin-bottom;
    transition: opacity, transform $list-time;
  }
}

.collapse {
  position: relative;
//   transform-origin: center;//这个记得是旋转中心，但是我没有使用成功，有人会也可以教我一下
  transform: rotateZ(45deg);//动画后的旋转最后位置，让动画衔接起来
  animation: collapse45 $list-time;
  .list-item:nth-child(1) {
    top: $list-box-height/2;//动画后的最后位置，让动画衔接起来，下面的top和rotate都是一样的
    position: absolute;

    transform: rotate(90deg);
    animation: collapse $list-time;
  }
  .list-item:nth-child(2) {
    position: absolute;
    top: $list-box-height/2;
  }
  .list-item:nth-child(3) {
    top: $list-box-height/2;
    position: absolute;
    animation: reCollapse $list-time;
    transform: rotate(90deg);
  }
}
.backCollapse {
  position: relative;
  transform-origin: center;
  transform: rotateZ(0deg);
  animation: backCollapse $list-time;
  .list-item:nth-child(1) {
    position: absolute;
    animation: backCollapse-1 $list-time;
  }
  .list-item:nth-child(2) {
    position: absolute;
    top: $list-box-height/2;
  }
  .list-item:nth-child(3) {
    top: $list-box-height;
    position: absolute;
    animation: backCollapse-3 $list-time;
  }
}
// 开始的动画
@keyframes collapse45 {
    //从0-50都不变是要让子项的部分动画先完成，相同时间用百分比划分就可以控制动画开始时间
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(0deg);
//从50%-100% 让整体旋转45度
  }
  100% {
    transform: rotate(45deg);
  }
}
@keyframes collapse {
//0-25：先完成1,2,3重合；25-50%：完成旋转90edg(1和3旋转相同的90，不要一个90，一个-90这样不好看)；50-100%；维持状态，让上面整体旋转
  0% {
    transform: rotate(0deg);
    top: 0;
  }
  25% {
    transform: rotate(0deg);
    top: $list-box-height/2;
  }
  50% {
    transform: rotate(90deg);
    top: $list-box-height/2;
  }
  100% {
    transform: rotate(90deg);
    top: $list-box-height/2;
  }
}
//0-25：先完成1,2,3重合；25-50%：完成旋转90edg(1和3旋转相同的90，不要一个90，一个-90这样不好看)；50-100%；维持状态，让上面整体旋转 这个一开始写的是旋转-90edg 不好看
@keyframes reCollapse {
  0% {
    transform: rotate(0deg);
   
  }
  25% {
    transform: rotate(0deg);
    top: $list-box-height/2;
  }
  50% {
    transform: rotate(90deg);
    top: $list-box-height/2;
  }
  100% {
    transform: rotate(90deg);
    top: $list-box-height/2;
  }
}
// 返回的动画
@keyframes backCollapse {
//这个就是把上面的整体旋转反过来

  0%{
    transform: rotate(45deg);
  }
  25%{
    transform: rotate(45deg);
  }
  50% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes backCollapse-1 {
 // 0-25%：先旋转回0deg(保持当前位置) 25-50%:保持旋转开始位置移动；50-100%：保持不变，让整体旋转
  0% {
    transform: rotate(90deg);
    top: $list-box-height/2;
  }
  25% {
    transform: rotate(0deg);
    top: $list-box-height/2;

  }
  50% {
    transform: rotate(0deg);
    top: 0;

  }
  100% {
    transform: rotate(0deg);
    top: 0;
  }
}
 // 0-25%：先旋转回0deg(保持当前位置) 25-50%:保持旋转开始位置移动；50-100%：保持不变，让整体旋转
@keyframes backCollapse-3 {
  0% {
    transform: rotate(90deg);
    top: $list-box-height/2;
  }
  25% {
    transform: rotate(0deg);
    top: $list-box-height/2;
  }
  50% {
    transform: rotate(0deg);
    top: $list-box-height;
  }
  100% {
    transform: rotate(0deg);
    top: $list-box-height;
  }
}
</style>

  2. 分析--html部分就不说明了

    1. 公共的scss变量放在这里，方便查看

    2. $list-width: 15px;// 列表的宽度
$list-height: 2px;//列表子项的高度 即每一个长条的宽度
$list-color: black;// 列表子项的颜色
$list-time: .5s;// 动画时间
$list-margin-bottom: 3px;// 列表子项之间的间距
$list-box-height: ($list-height + $list-margin-bottom) * 3 -$list-margin-bottom;//列表的高度
// 列表高度是用来计算选择的中心的

      1. //以下为基础样式
.list {
  margin-left: 50px;
  margin-top: 10px;
//以上两个不影响，只是为了自己更好观察
  width: $list-width;
  height: $list-box-height;
  .list-item {
    width: $list-width;
    height: $list-height;
    background: black;
    margin-bottom: $list-margin-bottom;
    transition: opacity, transform $list-time;
  }
}

      3. 开始旋转

        1. 分为三步

          1.  先看慢动作
          3. //第一步，用这两个来调整1和3的位置，让1,2,3重合
top: $list-box-height/2;
position: absolute;
        2. //以第一个为例子
transform: rotate(90deg);//设置最后的旋转位置
animation: collapse $list-time;

@keyframes collapse {
//0-25：完成位置变化 35-50：完成旋转 50-100：不变，这个阶段父盒子旋转 ，其他保持不动即可
  0% {
    transform: rotate(0deg);
    top: 0;
  }
  25% {
    transform: rotate(0deg);
    top: $list-box-height/2;
  }
  50% {
    transform: rotate(90deg);
    top: $list-box-height/2;
  }
  100% {
    transform: rotate(90deg);
    top: $list-box-height/2;
  }
}
          1.  3和1是类似的 ，下面为父盒子的
        3. @keyframes collapse45 {
    //从0-50都不变是要让子项的部分动画先完成，相同时间用百分比划分就可以控制动画开始时间
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(0deg);
//从50%-100% 让整体旋转45度
  }
  100% {
    transform: rotate(45deg);
  }
}

          1. 组合起来就完成了开始的点击旋转             

        4. 恢复原状

          1. 老规矩看慢放
          3. 首先旋转到全部重合,其次位置还原
        5. @keyframes backCollapse-1 {
 // 0-25%：先旋转回0deg(保持当前位置) 25-50%:保持旋转开始位置移动；50-100%：保持不变，让整体旋转
  0% {
    transform: rotate(90deg);
    top: $list-box-height/2;
  }
  25% {
    transform: rotate(0deg);
    top: $list-box-height/2;

  }
  50% {
    transform: rotate(0deg);
    top: 0;

  }
  100% {
    transform: rotate(0deg);
    top: 0;
  }
}

          1. 盒子旋转回原样
          2. 父盒子动画
        6. 
@keyframes backCollapse {
//这个就是把上面的整体旋转反过来

  0%{
    transform: rotate(45deg);
  }
  25%{
    transform: rotate(45deg);
  }
  50% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

        7. 建议

          1. 可以写为一个组件，通过父子通信来控制展开和关闭
          2. 再去影响父盒子的抽屉的展开和关闭

        

标签：动画,rotate,0deg,top,list,transform,height,css,图标
From： https://blog.csdn.net/weixin_65808257/article/details/137479301

相关文章

  • 8. 托盘图标与菜单
    内容概要：托盘图标的设置与事件右键菜单的相关操作窗口组件：1.组件的属性组件属性：位置组件属性：可视2.组件的事件窗口_托盘事件-带有参数的事件的使用方法3.组件的方法置托盘图标菜单的操作1.创建菜单子菜单的添加菜单的属性：可视菜单的属性：禁止2.菜单的事件菜单......
  • uview2.0版本，h5内网，无网络下icon图标不显示
    在项目目录下找到/node_modules/uview-ui/components/u-icon/u-icon.vue路径的文件由其中的代码片段可知，官方使用的是阿里云图标库的线上库，浏览器访问https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf这个地址，下载字体文件放到本地的static文件目录下然后将u-icon.vue......
  • CSS -层叠性、继承性、盒子模型、盒子模型表格、盒子模型margin、盒子阴影
    层叠性CSS层叠性（Cascading）是指在网页中应用多个样式规则时，根据一定的规则来确定最终应用的样式。层叠性使得样式可以按照一定的优先级和规则进行组合和覆盖，从而实现对元素的样式控制。层叠性的影响因素：选择器的特殊性（Specificity）：选择器的特殊性决定了样式规则的优先级。......
  • 2-51. 制作人物使用工具的动画和流程
    增加Tool工具增加ToolAnimatorBlendTree重命名为UseTool给Arm增加动画然后Body和Hair也进行这样赋值给工具动画增加空片段增加Tool_Hoe修改Player身上的动画修改Player脚本向上使用工具时需要隐藏工具修改AnimatorOverride项目相关......
  • CSS学习笔记
    CSS选择器CSS（层叠样式表）提供了多种选择器，用于选择要应用样式的HTML元素。CSS选择器用于选择你想要的元素的样式的模式。下列表格中的“CSS”列表示在CSS版本的属性定义，CSS1、CSS2和CSS3是层叠样式表（CascadingStyleSheets）的不同版本，每个版本引入了新的特性和功......
  • 浏览器工作原理与实践--渲染流水线：CSS如何影响首次加载时的白屏时间
    在上一篇文章中我们详细介绍了DOM的生成过程，并结合具体例子分析了JavaScript是如何阻塞DOM生成的。那本文我们就继续深入聊聊渲染流水线中的CSS。因为CSS是页面中非常重要的资源，它决定了页面最终显示出来的效果，并影响着用户对整个网站的第一体验。所以，搞清楚浏览器中的CSS是怎......
  • CSS笔记
    CSS引言CSS的全称为：层叠样式表（CascadingStyleSheets）。CSS也是一种标记语言，用于给HTML设置样式，比如文字的大小、文字的颜色、元素宽高等.....属性方法参考1、CSS的编写位置行内样式(内联样式)<h1style="color:red;font-size:40px">.....</h1>内部样式写在html......
  • 如何用cadence617仿真出gm/id所需图标
        上次推文主要讲了gm/id的理论方法，这次推文以NMOS为例，主要关注如何用cadence617仿真出所需要的三张图标。        关于gm/id方法的理论推理-CSDN博客        方法视频传送链接：                Thegmidmethodology,adesigng......
  • 数码相框-bmp图标显示
    bmp图片格式的解析参考资料：bmp格式分析‍位图文件主要分为如下3个部分：块名称对应Windows结构体定义大小（Byte）文件信息头BITMAPFILEHEADER14位图信息头BITMAPINFOHEADER40RGB颜色阵列BYTE*由图像长宽尺寸决定1、文件信息头BITMAPFILEHEADER结......
  • 布局升级秘籍：掌握CSS Grid网格布局，打造响应式网页设计
    随着现代网页设计的不断演进，传统的布局方式已经逐渐不能满足设计师和开发者们对于高效、灵活且强大布局系统的追求。而CSSGrid网格布局，正是在这样的背景下应运而生的。今天，我们就来深入探讨CSSGrid布局的魅力所在，带你解锁这项强大的设计工具，让网页布局变得更加简单和高效。......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99