【[CSS3] 学习笔记-CSS动画特效】的更多相关文章

[CSS3] 学习笔记-CSS动画特效

在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换 转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换,我们能够对元素进行移动.缩放.转动.拉伸或拉长:可以通过2D.3D元素来转换: 2D转换方法: translate().rotate().scale().skew().matrix() 3D转换方法: rotateX() rotateY() <!doctype html> <html>…

[CSS3] 学习笔记-CSS选择器

CSS3中,选择器的分类很多,有元素选择器.类选择器.ID选择器.属性选择器.后代选择器.子元素选择器.相邻兄弟选择器. 1.最常见的选择器就是元素选择器,文档的元素就是最基本的选择器,例如,h1{},a{} 2.选择器分组:h1,h2{}.*{} 3.类选择器允许以一种独立于文档元素的方式来指定样式:.class{}: 可以结合元素选择器:a.class{}: 多类选择器:.class.class{} 4.ID选择器与类选择器相似,不过也有一些重要差别,例如:#id{} ID选择器与类选择器的…

[CSS3] 学习笔记-CSS定位

页面的设计需要通过摆放不同的模块在不同的位置,这个时候需要使用到定位和浮动的知识点,CSS3定位功能是很强大的,利用它你可以做出各种各样的网络布局. 1.CSS定位 1)定位机制 普通流:元素按照其在HTML中的位置顺序觉得排布的过程 浮动 绝对布局 2)定位属性 positon.top.left.right.bottom.overflow(设置元素溢出区域发生的事情).clip(设置元素显示的形状).vertical-align(设置元素垂直对齐的方式).z-index(设置元素的堆叠顺序)…

CSS3 学习笔记（动画 多媒体查询）

动画 1.@keyframes规则用于创建动画.在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果 2.使用animation进行动画捆绑.两个值:动画名称.时长 3.我们一般情况下使用0%~100%来规定动画发生的时机.或者使用关键词from...to...,效果等同于0%~100%. 4.加上一个infinite值就可以无限执行了 5.ease——默认开始慢慢加速,结束时慢慢减速. linear——默认始终使用相同速度运行. alternate——交替执行…

[CSS3] 学习笔记--CSS盒子模型

1.CSS盒子模型概述 盒子模型的内容范围包括:margin(外边距).border(边框).padding(内边距).content(内容)部分组成. 2.内边距 内边距在content外,border内,属性有5个: padding:设置所有边距 padding-bottom:设置底边距 padding-left:设置左边距 padding-right:设置右边距 padding-top:设置上边距 3.边框 我们可以创建效果出色的边框,并且可以应用于任何元素.边框的样式为border-st…

[CSS3]学习笔记-CSS基本样式讲解

1.CSS样式-背景 CSS运行应用纯色作背景,也允许使用背景图像创建相当复杂的效果 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="styl…

[CSS3] 学习笔记-CSS入门基本知识

1.CSS概述 CSS指层叠样式表 CSS样式表极大的提高了工作效率 1)CSS基础语法: selector{ propery:value } 例1:h1{color:red;font-size:14px;} 属性大于1个之后,属性之间用分号隔开:如果大于1个单词,需要加上引号:p{font-family:"sans serif";} 2)CSS高级语法 选择器分组:h1,h2,h3,h4,h5,h6{color:red;} 继承:body{ color:green; } 例子: &l…

amazeui学习笔记--css（常用组件15）--CSS动画Animation

amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-animation-fade 淡入 .am-animation-scale-up 逐渐放大 .am-animation-scale-down 逐渐缩小 .am-animation-slide-top 顶部滑入 .am-animation-slide-bottom 底部滑入 .am-animation-sli…

纯css3 加载loading动画特效

最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading的动画效果,最终在我们前端工程师的帮助之下完成.所以记录在这里,如果感兴趣的朋友也可以看看,大家互相焦炉学习. 1.demo.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&…

amazeui学习笔记--css（常用组件6）--图标Icon

amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class="am-icon-weixin"> Wechat</span> 2.图标大小: .am-icon-sm,放大 150% .am-icon-md,放大 200% .am-icon-lg,放大 250% 3.icon button:在 Icon 上添加 .am-icon-btn cl…