CSS中如何实现分屏，或者点开一个网页时打开两个网页

html-css08

CSS中如何实现分屏，或者点开一个网页时打开两个网页,第1张

css不行，使用JavaScript的open方法即可

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript">

function change(){

var sw=window.screen.width

var sh=window.screen.height

window.open('http://www.google.com','newWin1','width='+sw/2+',height='+sh+',screenX=0,screenY=0')

window.open('http://www.baidu.com','newWin2','width='+sw/2+',height='+sh+',screenX='+sw/2+',screenY=0')

}

</script>

</head>

<body>

<a href="###" onclick="change()">ddddd</a>

</body>

</html>

右边的切换效果是分屏切换，可以到网上搜索"Full Screen Slider – jQuery全屏滚动插件"，

而上面文字效果，是利用CSS3.0的动画方法实现的，在w3school里面都有，

@keyframes

@animation

创建动画序列，需要使用animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes规则实现，具体情况参见使用keyframes定义动画序列小节部分。

transition也可实现动画。transition强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生（如hover）时才能获取样式，这样就会产生过渡动画。