#CSS3位移

文献种类：专题技术文献；开发工具与关键技术： DW HTNL CSS 作者： ；年级： ；撰写时间： 年 月 日 文献编号： 归档时间： 年 月 日
CSS3位移

开发工具与关键技术 DW HTML CSS
作者：华嘉丽
撰写时间：2019年2月1日

1,用爱心实现全屏位移
首先在HTML中写一个大的div然后在再写几个小的div

2，然后再它样式先设置它的大小，背景颜色，把它的位移大小设置成和屏幕的高度宽度差不多一样的高度宽度， 然后变化为爱心，在大的div里面加小的div大都div定位为postion: relative:小的div定位为postion:absolute;让他们重叠

3，让他们的背景颜色不一致看起来更好看，把他们的（animation:cont130s ease infinite;）变化总时间设置为不一致，看起来好看点

4,在关键帧中设置百分比为0% 20% 40% 60% 80% 100%；然后把位移量transform:translate(0px,0px);中Y轴的百分比设置为屏幕的大小，从屏幕最大的PX变为零，然后爱心能上下移动，而X轴则可以设置200px,400px,600px,800px……等让爱心在屏幕上下最大化移动，在屏幕左右呈现V型移动