CSS3过渡动画（三）

你好，欢迎打开我的博客，阿雨每天与你分享许多有趣新鲜的knowledge！

最近给大家带来的是WEB前端中重要的一部分，一些有关CSS的基础知识，俗话说的好“万丈高楼平地起”，要想做一个优秀的前端人员，必须打好基础哦。

废话不多说，上干货
一，响应式动画

第一步，新建HTML文档，构建文档结构

第二步，设计主要结构的CSS样式，这里将注意力集中在整体布局上。整体设计在默认情况下页面容器的固定宽度为980px，页面部分的固定高度为160px，主要内容部分的宽度为600，左浮动，侧边栏右边栏，宽度为280Px
第三步，借助媒体查询设计自适应布局，当浏览器可视化部分宽度大于650px小于981px时，将pagewrap的宽度设置为95%，将conter的宽度设置为60%，将sidebar的宽度设置为30%

第四步，当浏览器可视部分宽度小于651px时，将header的高度设置为auto；将searchform绝对定位在top;5px的位置，将main—-nav，sile-logo，side-description的定位设置为static。将contet的宽度设置为auto

第五步，当浏览器可视化部分宽度小于481px时，禁用HTML节点的字号自动调整

第六步，设计弹性图片。为图片设置max-width:100%和height
第七步，设计弹性视频，对于视频也需要同样操作
第八步，在默认情况下，手机端自动缩放，用meta设置
第九步，在样式表中添加样式，为页面所有对象设置过渡动画


好了，今天的干货分享就结束了，如果感觉阿雨的分享对你有帮助的，就关注我吧！！！
创作不易，感谢有你，一路同行，加油！