美文网首页
css 动画

css 动画

作者: 承諾過往雲煙 | 来源:发表于2018-08-16 08:30 被阅读0次

css3过度动画
css3都有哪些新增的东西 : 过度,动画,阴影,圆角;
transition : width (宽度产生动画)500ms;
1.在哪产生的动画 ,2.动画消耗的时间 3.运动曲线;4.延长多长时间才开始执行动画,(不写就不直行)
规定过度效果的曲线,默认是 ease; 多个用 ,(逗号)隔开,
过度属性 : transitio;
圆角 : border - radius ,
如果不想写那么多的话就用 transition : all is ease;
transition : all is linear . 匀速;
transition : all is ease . 开始和结束慢速,中间加速;
transition :all is ease - in . 开始的时候慢,越来越快,然后停止;
transition : all is ease - out . 开始时快,越来越慢,然后停止;
transition : al is ease-in -out .开始和结束时慢速。。。。
如果子元素超出父元素时 : overflow : hidden;
rgba(0 ,0, 0,0.5 );半透明;
line-height 行高;margin : 20px,间距20px,info信息
tansfrom 变形
1.位移 , 2.缩放 , 3.旋转 , 4.斜切 ,
1.位移 transition(50px,50px) 水平和垂直;
是不会影响文档流的 ,自己动 不会影响下边的;
2.旋转 transition:rotate(30deg)沿着z 轴旋转 ;
3.缩放 transitiion :scale(0.5,0.2) 宽度 高度;
4.斜切 transition : skew(0,45deg ) x轴不动,y轴斜切45度;水平和垂直;
margin : 50px(上边距) auto 0;
元素旋转
transfrom : rotate(45deg) 默认是沿着z轴旋转;
transfrom : perspective(800px ) rotate(45deg)
perspective 设置透视距离,经验数 800px ,比较符合人眼的透视距离;
transfrom -style : perseve-3d ,设置盒子按3d空间显示;
变形中间点
div : nthchild{} ;第几个孩子;
transfrom-origin:left center, 设置变形的中心点 (左中);
transfrom-origin:left top,设置变形的中心点 (左上);
背面可见
margin : 上,右,下,左,
如果不想变的话 加过度 transfom:all 500ms ease;
800是经验值 起始角度 rotatey (0deg);
有透视效果 transfrom -style : preserve -3d;
设置盒子背面是否可见
backface - visibity : hidden; 背面不可见 (隐藏不可见);
图片翻面时另一张图片
animation 动画
多个设置用空格隔开;
animation : moving 1s ease(运动曲线) 1s(延迟) 5(动的次数 ) alternat(是否返回)
alternate 设置是否返回;
infinite 不限次数;
动画运岁动的状态 : 暂停 animation-play-state : paused;
动画运动的状态 : 运行 animation-play-state : running;
forwards 动画结束最后状态;
both 都 起始和结束都设置;
@keyframes 创建关键动画时;声明一个动画,给他后面随便起一个名字;
动画一个状态到另一个状态;
隐藏 overflow : hidden;
相对定位 :position : relative;
绝对定位 : positiion : absolute;
动画定义的关键字:
@keyframes 名字{ 起始状态 from [ left 0px]
终止状态 to [ left 0px,]}
from 开始 ,to 结束;
循环一直走 :infinte ;
transfrom : scaley;
多帧动画
位移动画 transfrom : tanslateY(Y轴) 10px;
圆角 border - ralios : 50px;
原路返回 : alternate;
缩放 transfrom : scale(0.5 0.5)
box-shadow : 17px(X轴) 13px(Y轴)12px(羽化) 14px(扩展) pink(颜色);
box-shadow : 180px(水平偏移) 20px(垂直) 17px(羽化) 0px(扩展) pink(颜色) inset;
写上inset 是内部阴影,不写是外部阴影。

相关文章

  • CSS-3D知识

    1.CSS动画 1.1 CSS动画属性-animation animation:为CSS动画属性,使用该属性可以替...

  • Css动画 小球横移

    学习css 动画,建立小球左右横移的动画原料:html5 Css3html CSS css 动画属性介绍 其中an...

  • 网页高级知识点(三)

    CSS3 transition动画 CSS3 transform变换 CSS3 animation动画

  • 有用的Vue第三方库

    Animate.css - CSS动画库 Velocity.js - JS动画库 TweenJS - 状态过渡动画...

  • 动画类文章

    css3常用动画+动画库 vue2使用animate css

  • Vue.js 过渡动画

    1. css实现过度 transition 动画 css-transform动画 动态组件 上述动画,如果设置mo...

  • 前端开发入门到实战:CSS动画@keyframes的用法

    CSS动画 CSS动画允许大多数HTML元素的动画,而无需使用JavaScript或Flash! 动画浏览器支持 ...

  • 2018-06-13

    Css动画: css3动画主要包括Transform、Transition、Animation 区别 transi...

  • 2018-08-15

    CSS动画 CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规...

  • CSS3 动画

    动画属性 动画(animation)是CSS3新增的属性,动画属性可以为元素创建动画,CSS3以前在网页上实现动画...

网友评论

      本文标题:css 动画

      本文链接:https://www.haomeiwen.com/subject/eeqnbftx.html