加载中…
个人资料
大千世界
大千世界
  • 博客等级:
  • 博客积分:0
  • 博客访问:54,118
  • 关注人气:10
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

【CSS基础NO.6&NO.7】CSS动画——页面特效&HTML与CSS简单页面效果实现

(2017-11-15 15:16:32)
标签:

html5

css3

页面特效

css动画

分类: html5
一、2D、3D转换
1.通过CSS3转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸;转换是使元素改变形状、尺寸和位置的一种效果。可以使用2D、3D来转换元素。
2.2D转换方法
translate()  移动
rotate()      旋转
scale()        缩放
skew()        倾斜
matrix()      矩阵

3.3D转换方法
rotateX()
rotateY()

二、过渡
CSS3过渡是从一种样式转换成另一种样式
动画效果的CSS
动画执行的时间

属性                                              描述
transition                                设置四个过渡属性
transition-property                 过渡的名称
transition-duration                 过渡效果花费的时间
transition-timing-function      过渡效果的时间曲线
transition-delay                       过渡效果开始时间

三、动画
CSS3的动画需要遵循@keyframes规则
规定动画的时长和名称

四、多列
在CSS3中,可以创建多列来对文本或者区域进行布局

属性:
column-count  分列的数量
column-gap     每一列中间间隔的距离
column-rule     每一列间隔的一条线及线的颜色

一到四可参考


五、CSS瀑布流效果
html
【CSS基础NO.6&NO.7】CSS动画——页面特效&HTML与CSS简单页面效果实现
CSS
【CSS基础NO.6&NO.7】CSS动画——页面特效&HTML与CSS简单页面效果实现

参考 

CSS3 column-rule-style 属性,columnrulestyle

六、HTML与CSS简单页面效果实现
参考

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有