×

谈谈CSS3动画转换的基本方法

作者:admin2016.11.22来源:Web前端之家浏览:4879评论:1
关键词:CSS3动画
微信公众号

微信公众号

理论知识不扎实,在一定程度上能体现你解决问题的能力。今天我们拿CSS3动画来说,简单回忆下他的一些基本属性,这些我们在平常应用中会经常用到。

常用动画属性:

transform:translate(x,y);//平移,x代表向又移动距离,y代表向下移动距离;

transform:scale(x,y);//缩放,x代表水平缩放倍数,y代表垂直缩放倍数;

transform:rotate(x);//旋转,x代表顺时针旋转多少度,如rotate(10deg) ;

transform:skew(x,y);//倾斜,x\y分别代表沿x轴和y轴的倾斜 动画过渡。

transition-property列出元素应该过渡的CSS属性,可过度属性包括背景、边框和方框模型属性:

transition-duration设置过渡持续时间

transition-timing-function设置过渡的速度,可用ease、linear、ease-in、ease-out或ease-in-out之一

transition-delay动画延时时间

缩写形式:

#selector{transition:transform 0.2s ease}

值的顺序必须为以下顺序: transition-property    transition-duration    transition-function    transition-delay

实例展示:

CSS代码: CSS3转换和过渡 图中黄线圈出来的是过渡部分代码,设置了1s内完成相应动画,绿框里面就是转换效果,表示鼠标移至h1标题上时,文字将扩大2.5倍。

总而言之,掌握了动画的基础知识,是多么的重要。模仿别人动画后学得吸取别人案例的精华,为己所用。

温馨提示:本文作者系admin ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/CSS3AnimateScroll.html

网友评论文明上网理性发言 已有1人参与

发表评论:

评论列表

最新留言

  • 菜鸟日记

    有点东西。来学习一下~...

  • 码云笔记

    你好,前端博客-www.mybj123.com申请友链,有兴趣请联系QQ3261229068...

  • admin

    是的,新版也是不错的。...

  • Qanmy

    火狐56版本最经典。。。...

  • 前端大爆炸

    交换一下链接前端大爆炸!-WEBBANG!BANG!!BANG!!!https://a...

  • Wreb

    加群讨论...

  • 访客

    非常感谢...

  • 访客

    那如果自定义转发的图片未生成完,他给我转发的是默认截屏怎么办...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2019 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero