导语:
修改发表于2018年11月12号 13点 阅读 7700 评论1 点赞7 ©著作权归作者所有
下面是个《仙女下凡》图,与以上两集不同,是属于由远渐近,故移动图要渐渐放大,渐渐清晰。(背景图是河北省蓟县的盘山景区,位于北京东)
代码:
<p><img src="http://img3.oldkids.cn/upload/260811000/u260810070/2015/11/19/blog_
20151119105239364434.gif" />
<style type="text/css">.动画{
position: absolute;
height: 400px; width: 300px;
left: 200px; 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则收缩)。
大部分都已在代码中注释,此不再赘。
请选择你想添加的收藏夹