海特行者 的个人主页 注册

【原创】【聊代码】第一一六集:css样式(之八十六)

导语:

修改
字体调整: | |

发表于2018年11月12号 13点 阅读 5999 评论1 点赞7 ©著作权归作者所有

 

聊代码(第一一六集)css样式(之八十六)

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

 

 

 

       代码:

<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则收缩)。

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

 

(注:您的设备不支持flash)

声明:以上内容仅用户个人行为,不代表本站(老小孩社区)观点,如有侵权或其他行为用户自己承担相关责任与本站无关。【举报文章】
点赞7 收藏 1 推送到圈子 分享
微信扫二维码分享

等7人点赞

本文作者

海特行者

与友共欢

加好友
评论字体大小调节: | |

精选留言

您需要登录后才能回复

登录立即注册

请选择你想添加的收藏夹

新建收藏夹

收藏夹名称

©2017 老小孩网站版权所有 | 沪ICP备08012383号    举报电话:021-64323922
×
×