css动画过渡

设置过渡动画:

transition: border-radius 500ms ease,width 500ms ease 500ms,height 500ms ease 1s,background-color 500ms ease 1.5s;*/

transition: all 500ms ease;

圆角:

border-top-left-radius: 100px 50px;左上角为椭圆圆角
border-top-left-radius: 100px;
border-top-right-radius: 100px;左、右上角为正圆圆角
border-radius: 40px;曲率半径为40的圆角矩形
border-radius: 20%;最大200px,20%即40px
border-radius: 50%; 正圆

阴影:

水平偏移 垂直偏移 羽化大小 扩展大小 颜色:
box-shadow: 10px 10px 10px 0px #bfa;
水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影
box-shadow: 0px 0px 20px 2px red inset;
透明度:
/*透明度30%,文字也透明了*/
opacity: 0.3;
filter: alpha(opacity=30);/*兼容IE*/
/*背景色变透明,但文字不会透明*/
background-color: rgba(255,215,0,0.3);
/*边框透明*/
border: 2px solid rgba(0,0,0,0.3);

运动曲线(transition)

/*匀速*/
transition: all 1s linear;
/*开始和结束慢速,中间加速*/
transition: all 1s ease;
/*开始慢速,结尾突然停止*/
transition: all 1s ease-in;
/*突然开始,结束时慢速*/
transition: all 1s ease-out;
/*开始和结束时慢速*/
transition: all 1s ease-in-out;
/*贝塞尔(贝兹)曲线*/
transition: all 1s cubic-bezier(0.250,0.250,0.750,0.750);匀速
/*超出再缩回的弹性效果*/
transition: all 1s cubic-bezier(0.470, -0.485, 0.460, 1.435);
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • title: css动画和transition过渡toc: truedate: 2017-03-20 vue组件 ...
    SanY_cjp阅读 704评论 0 2
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,003评论 3 119
  • 较为年轻的阳间神级进化者被楚风一拳贯穿,当成解体,成为血与骨,震撼秘境,让不少人失声。 这是怎样的手段?阴间宇宙的...
    苏打绿阅读 793评论 0 0
  • 第二周 - 周一 Objective 今天主要熟悉了几个集成业内常见的品牌,如思科泰德视像会议系统、Extron爱...
    工程无尽藏阅读 457评论 0 0
  • 文/洛小简 @1 牵着你的手, 漫步在黑夜的街头。 是谁的话语呢喃在耳边, 震动我的每一根心弦? 我拾起每一句碎语...
    洛小简阅读 336评论 0 0