css3如何让div从远处飘来

html-css021

css3如何让div从远处飘来,第1张

.div3{

    position:absolute

    width:100px

    height:100px/*指定tran2为amim*/

    animation:anim3 1s forwards normal

    /*anim 5s表示5s执行完毕infinite:使动画永远重复alternate:奇数正方向执行,偶数反方向*/

    -ms-animation:anim3 1s forwards normal/*IE*/

}

@keyframes anim3 {/*动画效果*/

    from {background:redtop:400pxleft:-100px}

    to {background:greentop:210pxleft:100px}

}

@-ms-keyframes anim3 { /*IE*/

   from {background:redtop:400pxleft:-100px}

    to {background:greentop:210pxleft:100px}

}

望采纳!

1、用来实现长连接,在websocket不可用的时候作为一种替代,最开始由google发明。Comet:基于 HTTP 长连接的“服务器推”技术

2、跨域通信。JavaScript跨域总结与解决办法 ,类似的还有浏览器多页面通信,比如音乐播放器,用户如果打开了多个tab页,应该只有一个在播放。

3、历史记录管理,解决ajax化网站响应浏览器前进后退按钮的方案,在html5的history api不可用时作为一种替代。

4、纯前端的utf8和gbk编码互转。比如在utf8页面需要生成一个gbk的encodeURIComponent字符串,可以通过页面加载一个gbk的iframe,然后主页面与子页面通信的方式实现转换,这样就不用在页面上插入一个非常巨大的编码映射表文件了,其中子页面内容:

<!doctype html>

<html>

<head>

<meta charset="gbk">

<script>

window.encoding = function(str){

//利用a元素的href属性来encode

var a = document.createElement("a")

a.href = "/?q=" + str

var url = a.href//这里读取的时候会自动编码

a.href = "/?q="

return url.replace(a.href, "")

}

</script>

</head>

</html>

把这个iframe部署到父页面的同源服务上,就能在父页面直接调用iframe中的encoding接口了。

5、评论里有提到,用iframe实现无刷新文件上传,在FormData不可用时作为替代方案

6、在移动端用于从网页调起客户端应用(此方法在iphone上并不安全,慎用!具体风险看这里 iOS URL Scheme 劫持 )。比如想在网页中调起支付宝,我们可以创建一个iframe,src为:

alipayqr://platformapi/startapp?saId=10000007&clientVersion=3.7.0.0718&qrcode={支付二维码扫描的url}

浏览器接收到这个url请求发现未知协议,会交给系统处理,系统就能调起支付宝客户端了。我们还能趁机检查一下用户是否安装客户端:给iframe设置一个3-5秒的css3的transition过渡动画,然后监听动画完成事件,如果用户安装了客户端,那么系统会调起,并将浏览器转入后台运行,进入后台的浏览器一般不会再执行css动画,这样,我们就能通过判断css动画执行的时长是否超过预设来判断用户是否安装某个客户端了:

/**

* 调起客户端

* @param url {String}

* @param onSuccess {Function}

* @param onFail {Function}

*/

module.exports = function(url, onSuccess, onFail){

// 记录起始时间

var last = Date.now()

// 创建一个iframe

var ifr = document.createElement('IFRAME')

ifr.src = url

// 飘出屏幕外

ifr.style.position = 'absolute'

ifr.style.left = '-1000px'

ifr.style.top = '-1000px'

ifr.style.width = '1px'

ifr.style.height = '1px'

// 设置一个4秒的动画用于检查客户端是否被调起

ifr.style.webkitTransition = 'all 4s'

document.body.appendChild(ifr)

setTimeout(function(){

// 监听动画完成时间

ifr.addEventListener('webkitTransitionEnd', function(){

document.body.removeChild(ifr)

if(Date.now() - last <6000){

// 如果动画执行时间在预设范围内,就认为没有调起客户端

if(typeof onFail === 'function'){

onFail()

}

} else if(typeof onSuccess === 'function') {

// 动画执行超过预设范围,认为调起成功

onSuccess()

}

}, false)

// 启动动画

ifr.style.left = '-10px'

}, 0)

}