动画和弹性盒子

最新推荐文章于 2024-10-12 09:53:06 发布
最新推荐文章于 2024-10-12 09:53:06 发布
阅读量110 收藏
点赞数
文章标签： 动画 css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Almee211/article/details/119334019
版权


1、translatez()往z轴移动 scalez()沿着z轴缩放 rotatez()


translate3d(x轴位移的距离, y轴位移的距离,z轴位移的距离)


scale3d(x轴缩放的大小,y缩放的大小,z轴缩放的大小)


rotate3d(0/1,0/1,0/1,旋转角度)


当功能函数的变量值为1时执行旋转度数


2、backface—visibility：hidden 当元素旋转180deg时，背面显示不可见，完成翻转的效果


section{


      width: 300px;


      height: 300px;


      border: 1px solid rebeccapurple;


      margin: 50px auto;


      position: relative;


    }


    div{


      width: 200px;


      height: 200px;


      position: absolute;


      backface-visibility: hidden;


      transition: all 1s;


      font-size: 30px;


      font-weight: 900;


      line-height: 200px;


      text-align: center;


    }


    div:nth-child(1){


      background-color: aquamarine;


    }


    div:nth-child(2){


      transform: rotateY(180deg);


      background-color: brown;


    }


    section:hover div:nth-child(1){


      transform: rotateY(180deg);


    }


    section:hover div:nth-child(2){


      transform: rotateY(360deg);


    }


  </style>


</head>


<body>


  <section>


    <div>正</div>


    <div>反</div>


  </section>


</body>


</html>




3、动画 animation: run  3s 1s  alternate-reverse 1;


简写 两个时间顺序一定是 运动时间 延迟时间，其他顺序无所谓


 @keyframes run{


     from{


       left: 0px;


     }to{


       left: 200px;


     }

animation-duration

运动时间 默认是 0 s 

animation-delay

 延迟时间 默认是 0 s

animation-timing-function

动画的播放方式，具有以下六种变换方式：ease;ease-in;

ease-in-out;linear;cubic-bezier，steps（)；

animation-iteration-count

是用来指定元素播放动画的循环次数，其可以取值<number>为数字，其默认值为“1”；infinite为无限次数循环。

animation-direction

定义是否应该轮流反向播放动画。

如果 animation-direction 值是alternate，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放


4、怪异盒模型


 div{


      width: 100px;


      height: 100px;


      padding: 40px;


      background-color:olivedrab;


    }


    div:nth-child(1){


      box-sizing: border-box;


    }


  </style>


</head>


<body>


  <section>


    <div>1</div>


    <div>2</div>


怪异盒子：



正常盒子;



5、弹性盒子：


a、flex-direction (主轴排列方向)


           row  默认横向一行内排列


            row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。


            column：纵向排列。


            column-reverse：反转纵向排列，从下往上排，最后一项排在最上面


b、justify-content(主轴对齐方式)


          ■ flex-start默认值，主轴顶端对齐


          ■ flex-end主轴末端对齐


          ■ center主轴居中对齐


          ■ space-between在主轴两端对齐，中间自动分配


          ■ space-around在主轴自动分配空白空间


          ■ space-evenly平均分配空白空间


c、align-items（侧轴对齐方式）


          flex-start：弹性盒子元素在伸缩容器里延侧轴顶端对齐。


          flex-end：弹性盒子元素在伸缩容器里延侧轴末端对齐。


          center：弹性盒子元素在伸缩容器里延侧轴居中对齐。


          baseline：弹性盒子元素在伸缩容器里延侧轴基线对齐。


          stretch：默认值。项目未设置侧轴的尺寸时拉伸成容器的侧轴尺寸。


d、flex-wrap


      nowrap：不换行


      wrap：换行


      wrap-reverse：反转换行排列。


e、align-content（行与行之间对齐方式）


          ■flex-start行和行在侧轴顶端对齐，没有行间距


          ■ flex-end行和行在侧轴顶端对末端对齐，没有行间距


          ■ center行和行在侧轴居中对齐，没有行间距


          ■ space-between行和行两端对齐，中间自动分配侧轴剩余空间。


          ■ space-around行和行自动分配侧轴剩余空间。


          ■ stretch  默认值。行和行补强制拉伸以适应容器侧轴的长度。


          ■ space-evenly平均分配空白空间


f、align-self（加给子元素）


auto  默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则  为 stretch。


Stretch  元素被拉伸以适应容器侧轴的尺寸。


Center  元素位于容器侧轴的中心。


flex-start   元素位于容器的侧轴顶端。


flex-end      元素位于容器侧轴的末端。


g、其他


flex-grow


定义项目的放大比例，默认为0，即如果存在剩余空间也不放大


flex-shrink


定义了项目的收缩比例，默认为1，即如果空间不足该项目将缩小。负值对该属性无效。


收缩量的计算方式：（元素宽度*收缩比例/元素*收比例    相加）*溢出宽度


flex-basis项目的主轴方向的长度


flex复合属性。设置或检索弹性盒模型对象的子元素如何分配剩余空间。


order


控制伸缩项目的显示的顺序，数字越大越往后排，默认为0，支持负数，没有单位的整数值。

Almee211
关注
CSS——动画和弹性盒子（旋转相册，城市动画，WC3导航条，骰子（附源码））
m0_72975897的博客
09-08 356
旋转transform: rotate();1. 默认情况下是绕着中⼼点进⾏转动的；2. 默认的单位是deg，⽐如rotate（45deg） 3. 如果这个值为正值，则是元素对原点中⼼顺时针旋转；
过渡动画、弹性盒子、calc计算函数
x111223的博客
10-09 110
* transition:参与过渡属性 过渡的完成时间 过渡的执行速度 过渡的延迟时间;贝塞尔曲线官网：https://cubic-bezier.com/#0,1.9,1,-1.07。横轴 （排列时从右往左）
3D、动画和弹性盒子
weixin_46162015的博客
08-02 127
一、3D translateZ()往Z轴移动scaleZ()沿着Z轴缩放rotateZ() translate3d(X轴位移的距离,y轴位移的距离,z轴位移的距离) scale3d(x轴缩放的大小,y缩放的大小,z轴缩放的大小) rotate3d(0/1,0/1,0/1,旋转角度) 当功能函数的变量值为1时执行旋转度数 二、动画 首先先定义动画:@keyframes动画名{from{}...
颜色渐变、网页标题图标、动画、弹性盒子
xiaotanke
08-28 373
文章目录1、颜色渐变2、设置网页标题的图标3、动画（animation）1、过渡2、动画（animation）3、变形（transform）4、弹性盒子1、弹性容器2、弹性元素3、弹性容器的样式4、弹性元素的样式 1、颜色渐变 ​ 通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其它颜色过渡的效果。 线性渐变：颜色沿着一条直线发生变化，渐变是背景图片的渐变，所以也是通过background-image属性设置的。 格式：background-image: linear-gradient(red,ye
弹性盒子
XUYIGE的博客
11-20 174
弹性盒子基础的属性：display: flex 给一个元素添加该属性，则这个元素就会变成弹性盒子模式 在父元素中添加：display:flex; display:-webkit-flex; 那么所有的子元素会自动横向排列。 祖先元素添加:direction:ltr/rtl 则子元素排列方向为：左到右/右到左 例如：一个盒子中三个小盒子1、2、3 ，它们的排列方向是横向从右到左排列，代码如下：...
弹性盒子，定位，动画、（笔记）
weixin_58447501的博客
03-28 203
【代码】弹性盒子，定位，动画、（笔记）
CSS-定位和弹性盒子
qq_40007317的博客
04-12 1599
1、定位
flex弹性盒子
weixin_43465508的博客
03-28 433
弹性盒子是一种用于按行或者按列布局的一维布局方法，元素可以膨胀以填充额外的空间，缩小以适应更小的空间。
H5css3及弹性盒子+动画+过渡
weixin_45498054的博客
08-07 895
H5css3及弹性盒子 1.语义化标签 header，nav，footer。。。 2.多媒体 audio播放音频 video播放视频 3.弹性盒子 1).容器属性 （1）flex-direction主轴方向（row，row-recerse，column，column-reverse） （2）flex-wrap换行 （3）flex-flow （4）justify-content主轴 （5）align...
关键帧动画_弹性盒子与媒体查询
zxyhj的博客
08-26 142
day0527关键帧动画、弹性盒子与媒体查询 1.关键帧动画简介 2.关键帧与动画属性 3.关键帧动画设置步骤 4.弹性盒子 5.媒体查询 一.关键帧动画 1.定义与作用：指的是通过给元素设置一系列的动作来完成的一个动态效果，增强用户体验 2.实现步骤 (1)设置元素或标签的样式 (2)定义关键帧键帧动画 (3)将定义好的关键帧键动画绑定到标签上 关键帧动画 二.弹性盒子flex 1.定义与作用 指的是能够更灵活地设计网页的结构与布局的一种技术，其名称为flex 2.使用格式 .my
【HTML/CSS】弹性盒子 flex布局制作一个动画卡片
m0_49442965的博客
11-10 764
可以自己去找动画人物纯色背景，这样抠图比较容易。 字体是我随便找的 下面是代码（看不懂没事）： 图片素材： 里面用到的知识： 1.弹性盒子 2.CSS transform 属性 3.translateY() 在页面垂直移动元素 4.CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 推荐一个博主的文章：几个好看的CSS渐变色 5.CSS3利用-webkit-background-clip: text;实现文字渐变效果 6.box-sizing属性用于定义盒子的
HTML5、CSS3进阶——动画、空间转换、弹性盒子
m0_59592734的博客
04-21 234
动画： 目的：使用animation添加动画效果 过渡只能实现两个状态之间的变化过程 动画效果：实现多个状态的变化过程，动画可控（重复播放、最终画面、是否暂停） 定义动画： 两个状态的动画变化： @keyframes 动画名称{ from{} to{} } 多个动画的实现 %表示的是动画总时长的占比 @keyframes 动画名称{ 0%{} 10%{} 15%{} 100%{} } 里面写css属性 使用动画：animation：动画名称 动画花费时长。 anima
CSS面试题总结：盒子模型、弹性盒子、CSS3动画和requestAnimationFrame
弹性盒子是 CSS3 提出的新布局方式，通过在父元素上设置 display:flex，可以在子元素上设置 justify-content、align-items 等属性，实现规律性的排列。常用的 flexbox 属性包括： * flex-direction：指定弹性容器...
分享一个可交互的小场景（二）
一起学习一起进步~
06-25 5807
再看代码： JS部分。
【CSS】flex配合margin实现元素均匀分布
owo_ovo的博客
10-09 228
【CSS】flex配合margin
CSS高级技巧
探索软件工程的奥秘
10-09 1102
CSS 精灵，也叫CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position精确的定位出背景图片的位置。优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度。作用：可以为一个元素在不同状态之间切换的时候添加过渡效果。（2）作用：在网页中添加简单的、颜色单一的小图标。作用：设置整个元素的透明度（包含背景和内容）（1）字体图标：展示的是图标，本质是字体。属性：transition（复合属性）属性值：过渡的属性 花费时间（s）
CSS彩虹按钮设计demo
m0_53253682的博客
10-09 681
【代码】CSS彩虹按钮设计demo。
CSS 容器查询一探究竟
最新发布
潜隐-前端
10-12 730
CSS container 已经出来很久了, 你是否真的好好了解过呢? 快来看一看吧, 本文将对 CSS container 特性进行详细梳理....
【CSS】flex: 1； 的意思
小秀的博客
10-09 455
flex: 1;是的简写。它表示元素可以根据容器的剩余空间进行扩展（或缩小），并且在布局中按比例分配空间。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值