`
yantaoliu2006
  • 浏览: 91859 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

css倒影效果代码

CSSJavaScriptHTML 
阅读更多 
<!DOCTYPE HTML PUBLIC#"-//W3C/DTD HTML 4.0//EN" "http://www.w3c.org/tr/html4/strict.dtd">
<html>
<head>
<title></title>
<style>
#aa {
	position:relative;
	width:192px;
	height:300px
}
</style>
<script language="javascript">
function aab(){
aaa=""
ja=""
for(i=223,a=40;i<400;i++,a--){
ja+="<div style='overflow:hidden;width:192px;height:1px;position:absolute;top:"+i+"px;left:0px;filter:alpha(opacity="+a+");opacity:"+(a/100)+"'><img src='http://www.163show.cn/images/ppbb.gif' style='margin:-"+(223-(i-223))+"px 0px 0px 0px'></div>"
}
aa.innerHTML+=ja
}
</script>
<body onLoad="aab()">
<div id="aa"><img src="http://www.163show.cn/images/ppbb.gif" width="192" height="223"></div>
</body>
</html>

 

分享到：
| ie6 ie7兼容资料
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    纯css3带倒影效果的图片翻转特效

    【CSS3库】中的"纯css3带倒影效果的图片翻转特效"是一个利用现代浏览器支持的CSS3特性实现的交互式图像展示技术。这个特效不仅提供了视觉上的吸引力，而且通过简单的鼠标悬停动作就能激活，使得用户体验更加生动有趣...

    js html5实现图片倒影效果代码.zip

    CSS可以用于控制元素的布局、颜色、尺寸等属性，而倒影效果通常通过CSS3的`transform`和`box-shadow`属性来实现。 ```css .img-reflection { position: relative; display: inline-block; /* 保持图片的块级显示 ...

    HTML5/CSS3实现图片倒影3D效果

    在实现3D倒影效果时，我们主要依赖CSS3的特性。CSS3提供了许多新的选择器、动画、过渡和变形效果。其中，`transform`属性是关键，它可以用于对元素进行2D或3D变换，包括旋转、缩放、移动和倾斜。在图片倒影效果中，...

    纯css3圆柱立体式倒影效果

    我们知道css3代码可以改变图片的方向，可以让图片立体式排列，也可以实现倒影效果 只要耐心，角度安排合理，可以制作出很多不错的效果 这种效果在之前的css2代码中，html4时代是想都不敢想的 今天特意...

    CSS鼠标悬停按钮边框动画加倒影特效.zip

    当鼠标悬停时，浏览器自动应用`:hover`状态下的样式，展示动画和倒影效果。 考虑到压缩包内的文件名"132687037085826686"不提供足够的信息来进一步阐述细节，但根据文件名推测，这可能是包含示例代码的文件，可能...

    海边日落水面倒影CSS3特效.zip

    【标题】"海边日落水面倒影CSS3特效"是一个以自然景象为主题的网页特效，它利用先进的CSS3技术，模拟了夕阳下海面波光粼粼的倒影效果。这个特效不仅美观，而且能为网站增添一种宁静、浪漫的氛围，吸引用户驻足浏览。...

    图片倒影效果（js代码）

    通过这样的JavaScript代码，你可以在任何支持JavaScript的Web页面中轻松实现图片倒影效果。无论你使用的是ASP、JSP、PHP还是HTML，只要在合适的地方插入这段代码，就可以为你的图片添加生动有趣的倒影特效。

    CSS3 SVG水中月亮倒影波纹动画特效

    在这个特效中，`filter`属性被用来创建月亮的倒影效果。通过设置`filter: drop-shadow()`，我们可以模拟物体在水中的倒影，调整参数可以控制倒影的偏移、模糊度和颜色，使其看起来更真实。 接下来是SVG的运用。SVG...

    纯css3彩虹水面倒影背景特效.zip

    5. `position`和`z-index`：调整元素的位置和层次，使得倒影效果更逼真。 6. `box-shadow`：可能用于模拟水波的深度感。 总的来说，"纯css3彩虹水面倒影背景特效"是一种巧妙地利用CSS3新特性的网页设计技术，它可以...

    html5 canvas图片水波倒影动画特效

    在这个特定的案例中，“html5 canvas图片水波倒影动画特效”是一个利用Canvas API实现的视觉效果，它展示了如何将静态图片转化为具有动态水波和倒影效果的交互式元素。 首先，我们需要理解Canvas的基本使用方法。...

    js+html5实现图片倒影效果代码.zip

    6. **优化与兼容性**: 考虑到不同浏览器的兼容性，可能需要使用Modernizr这样的库检测HTML5和CSS3特性支持，或者提供降级方案，如使用CSS渐变实现倒影效果。 通过这个项目，开发者可以深入理解HTML5、CSS3和...

    CSS3制作的聚光灯下倒影文字选装动画特效代码.zip

    CSS3聚光灯下倒影文字特效是一段基于CSS3实现的聚光灯下带倒影的文字旋转动画效果代码，具有真实的视觉感，同时文字还会在旋转过程中显示出灯光的反射效果，很有意思，欢迎对此段代码感兴趣的朋友前来下载使用。

    CSS3倒影梦幻霓虹闪烁文字特效.rar

    在倒影效果中，我们通常会设置一个负的垂直偏移来创建倒影，增加适当的模糊半径以使倒影看起来更自然。 ```css .text-effect { text-shadow: 0 -5px 5px rgba(0, 0, 0, 0.5); } ``` 2. **CSS3的animation属性**：...

    js+html5实现图片倒影效果代码

    为了实现倒影效果，我们将在标签上添加一个特定的CSS类，比如"class='reflected-image'"。 CSS部分是实现倒影的关键。我们可以利用CSS3的`transform`属性，特别是`rotateY()`和`scaleY()`。`rotateY()`用于翻转元素...

    CSS3 SVG水中月亮倒影动画特效.zip

    【标题】中的“CSS3 SVG水中月亮倒影动画特效”是指使用CSS3和SVG技术来创建一个具有水波荡漾效果的月亮倒影动画。在网页设计中，这样的特效可以增加视觉吸引力，使用户界面更加生动有趣。 【描述】提到了“基于CSS...

    javascript 水中倒影效果

    JavaScript 水中倒影效果是一种常见的网页动态特效，它能为网页增添生动逼真的视觉体验，常用于网站设计中的头部、背景或者交互元素。在本文中，我们将深入探讨如何利用 JavaScript 实现这一效果，同时关注与 HTML ...

    倒影时钟 javascript 倒影 时钟 源码 html IE

    "shadow"可能指的是倒影效果，表明这个文件将展示如何用JavaScript实现倒影时钟的视觉特效。 **知识点详解** 1. **JavaScript基础**：JavaScript是一种客户端脚本语言，用于处理网页中的动态内容。在这个项目中，...

    CSS3聚光灯下倒影文字特效.zip

    在本压缩包“CSS3聚光灯下倒影文字特效.zip”中，包含了一个使用CSS3、jQuery和JavaScript实现的独特网页特效，旨在为文本添加聚光灯效果以及倒影效果，提升网页的视觉吸引力。接下来，我们将深入探讨这些技术及其在...

    程序开发特效、倒影效果

    在程序开发中，实现特效和倒影效果是增强用户界面（UI）吸引力和用户体验（UX）的重要手段。倒影效果通常被用于图形设计和网页设计，它可以为视觉元素增添一种深度感和动态感，使整体设计更加生动。下面将详细讨论...

    JS 3D卷筒式倒影图片选择代码.zip

    同时，倒影效果则通过CSS3的box-shadow和transform: scale(-1)来实现，将元素翻转并添加阴影，以创建出倒影的视觉效果。 在实际应用中，这个代码可能包含以下几个关键部分： 1. **HTML结构**：HTML文件（如jiaoben...

Magicbox
Global site tag (gtag.js) - Google Analytics