分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

CSS属性简表(伸缩盒、变换、过渡、动画)

发布时间:2023-09-06 02:19责任编辑:熊小新关键词:CSS动画

CSS属性简表(伸缩盒、变换、过渡、动画)

伸缩盒

======================================

应用于flex容器flex-direction(排列方向): row row-reverse column column-reverse;flex-wrap(是否换行): nowrap wrap wrap-reverse;flex-flowjustify-content(子项在横轴上的对齐方式): flex-start/end center space-between space-aroundalign-items(子项在纵轴上的对齐方式): stretch flex-start/end center baseline;align-content(多行容器对齐方式): stretch flex-start/end center space-between space-around;应用于子项flex-grow(扩展比率): 0 num; ???flex-shrink(收缩比率): 1 num;flex-basis(各项收缩基准值(权)): auto content px %;flex: auto (1 1 auto) none (0 0 auto)align-self(子项独自纵轴上的对齐方式): auto flex-start/end center baseline stretch;order(子项顺序): num(可负);

变换,直接改变(tranform)

======================================

transform: none translate(xy)(x, y) | rotate(deg) | scale(xy)(x, y) | skew(xy)(x, y);
transform-origin(对象原点): 长度/百分比 center TRBL;transform-style(指定二/三维): flat preserve-3d;perspective(显示透视): none 绝对长度;perspective-origin(透视坐标值): x, y 长度/百分比 center TRBL;backface-visibility(背面可见): visible hidden;

过渡,条件(:hover)

======================================

transition: property duration timing-function delay;
transition-property: none | all | property1, property2transition-duration: time;transition-timing-function: ease ease-in/out/in-out linear step-start/end;transition-delay: time;(多个属性,逗号分隔)div{transition: color .5s linear .1s;color: #000;}div:hover{color: #fff;}

动画,定义动画序列(transform) 应用动画

======================================

animation: name duration timing-function delay count direction;animation: name duration timing-function delay count direciton fill-mode play-state;
animation-durationanimation-timing-functionanimation-delayanimation-iteration-count(循环次数): num | infinite;animation-direction(正反/交替): normal | reverse | alternate | alternate-reverse;animation-play-state(播放暂停): running | paused;animation-fill-mode(动画时间之外的状态): none | forwards | backwards | both;(多个属性,逗号分隔)
@keyframes my-animation{0%{transform:scale(0);opacity:0;}};div {animation: my-animation 2s ease .1s;}

CSS属性简表(伸缩盒、变换、过渡、动画)

原文地址:https://www.cnblogs.com/JOOQSS/p/9853143.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved