CSS3 和 JS 下的图片倒影效果

最新推荐文章于 2023-09-11 22:39:46 发布

noonnightstorm

最新推荐文章于 2023-09-11 22:39:46 发布

阅读量2.5k

点赞数

本文链接：https://blog.csdn.net/noonnightstorm/article/details/8203827

版权

昨天有个同学问我会不会css的倒影效果，我朦了下，以前这种倒影效果都是设计人员帮我P的，呵呵！自己真的不会写,，所以今日故意去亲自去写写这个有趣的效果。

使用css的倒影效果只能在chrome跟safari，而且它的倒影并不占据任何的空间，所以大家记得要留空一些位置给倒影显示，废话不说，先看代码：

HTML：

<!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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
	<link rel="stylesheet" href="../css/text3.css" />
</head>
<body>
	<img src="../image/2.jpg" alt="" class="text"/>
</body>
</html>

CSS：

.text{
	width: 200px;
	height: 200px;
	-webkit-box-reflect: below -16px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.5, transparent), to(white));
}

当然作为一个程序员，要永远保持一颗探索的精神，所以上网找了一下兼容FF跟其他浏览器的方法，顺便自己亲自写了一次

HTML：

<!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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>noonnightstorm</title>
	<link rel="stylesheet" href="../css/text.css" />
	<script type="text/javascript" src="../js/text1.js"></script>
</head>
<body>
	<div class="img" id="img">
		<img src="../image/2.jpg" alt=""/>
	</div>
</body>
</html>

CSS：

*{
	margin: 0;
	padding: 0;
}

JS：

window.onload = function(){
	text();
}
function text (){
	var img = document.getElementById("img");
	for(var i=129,j=40;i<168;i++,j--){
		var div = document.createElement("div");
		div.style.overflow = "hidden";
		div.style.width = "128px";
		div.style.height = "1px";
		div.style.position = "absolute";
		div.style.left = "0px";
		div.style.top = i+"px";
		div.style.filter="alpha(opacity="+j+")";
		div.style.opacity=j/100;
		var tempImg = document.createElement("img");
		tempImg.src = "../image/2.jpg";
		tempImg.style.marginTop = -(128-(i-128))+"px";
		div.appendChild(tempImg);
		img.appendChild(div);
	}
}