文章详情

       下面是个《仙女下凡》图，与以上两集不同，是属于由远渐近，故移动图要渐渐放大，渐渐清晰。（背景图是河北省蓟县的盘山景区，位于北京东）

       代码：

＜p＞＜img src="http://static.oldkids.com.cn/upload/260811000/u260810070/2015/11/19/blog_
20151119105239364434.gif" /＞
＜style type="text/css"＞.动画{
position: absolute;
height: 400px; width: 300px;
left: 420px; top: 250px;
background-image:url(http://www.oldkids.cn/upload/2018/11/13/blog_20181113102616125.png );
animation-name: 飞;
animation-delay: 0.2s;/*延迟时间*/
animation-iteration-count:infinite ;/*循环次数*/
animation-duration: 30s;/*动画一个周期的持续时间*/ }
@keyframes 飞 {
0%{ opacity: 0.1; transform:translate(0%,100%) scale(0.2)}
100% { opacity:1; transform:translate(180%,160%) scale(1.0) }
＜/style＞
＜div class="动画"＞＜/div＞

       代码解析：

       括号中有两个百分数，前者水平定位，后者垂直定位。可以正值或负值。：

       透明度 opacity 选值范围： 0-1.0 值越小越透明。

       缩放倍率（值小于1则收缩）。

       大部分都已在代码中注释，此不再赘。