倒影效果 IE提供可视效果滤镜(visual filters)

最新推荐文章于 2021-05-13 14:27:44 发布
最新推荐文章于 2021-05-13 14:27:44 发布
阅读量967 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hanshileiai/article/details/9338775
版权 
<html>
<head>
<title>中国风</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>

<script language="JavaScript">
function initial(){
	s1.style.left = s1.style.posLeft;	// 确定倒影的位置
	s2.style.top = s1.style.posTop+s1.offsetHeight;
}
</script>

<body οnlοad="initial()">
<span id=s1 style="position:absolute; left:40px;"><font size=13px>倒影效果</font></span>
<span id=s2 style="filter:flipv alpha(opacity=30); font-style:italic; position:absolute;left:40px;"><font size=13px>倒影效果</font></span>
</body>
</html>


 

中国风2012
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈CSS3新特性——文字阴影text-shadow、阴影box-shadow和倒影box-reflect
筱葭的博客
03-01 3471
利用border属性： 以下三角为例，把左、右、下边框设置为toumse #triangle { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: yellow green red pink; }
兼容各浏览器的CSS倒影效果
afeiqiang的专栏
12-27 1万+
无需flash，完全用css就可以做出超炫的图片倒影效果。网上流传很多种版本，经过本人的一番研究，做成能够兼容firefox、chrome、IE等各主流浏览器的版本，跟大家分享一下。最终完成的效果 新浏览器的实现 指的是firefox、chrome和IE9。新浏览器都支持CSS3新添的transform属性，所以实现倒影效果非常简单。从下面的代码看到，各家浏览器对trans
javascript 水中倒影效果
11-28
javascript 水中倒影效果 带水泼纹！~
style.left
qq_41818857的博客
05-13 461
无法获取style标签以及link标签导入的left值。 解决方法： 换 jq 的一种方式 var left = $(’#v12’).position().left; var top = $(’#v12’).position().top; 或者 getComputedStyle(元素, null)[“left”]
IE10及以上CSS滤镜失效（偶然发现）
babybk的博客
04-28 6085
在IE10中，已经采用HTML5标准[1]，DX Filters和VML分别用SVG和CSS3代替。IE10以前版本曾使用的方法在IE10中已经失效。如下面的水平翻转滤镜在IE6中好使，但在IE10中无效：<img src="38951706.jpg" width="200" height="100" style="filter:FlipH"/>在IE10中可用：<img src="3895170
Android 3D倒影效果源码.zip
最新发布
07-17
这个"Android 3D倒影效果源码.zip"压缩包提供了实现这种效果的具体代码，这对于开发者来说是宝贵的资源，能够帮助他们在自己的项目中快速集成3D倒影功能。 首先，我们需要理解3D倒影的基本原理。在计算机图形学中，...
图片倒影效果.zipIOS应用例子源码下载
03-06
这个"图片倒影效果.zip"压缩包提供了一个iOS应用的源码示例，专门展示了如何实现这种效果。以下是关于这个知识点的详细说明： 首先，我们需要了解iOS中的图片处理框架Core Graphics和UIKit。Core Graphics是苹果...
CSS图片倒影效果兼容firefox、IE等各主流浏览器
09-25
标题中的“CSS图片倒影效果兼容firefox、IE等各主流浏览器”是指利用CSS技术来创建一个图片的倒影效果，并确保这个效果能在Firefox、Internet Explorer（包括较旧版本）以及其他主流浏览器如Chrome中正常工作。...
js+html5实现图片倒影效果代码
04-06
如果需要更复杂的交互或动画效果，可以利用JavaScript库如jQuery或其他现代框架如React、Vue或Angular，它们提供了更丰富的API和工具来操作DOM和实现动画。 总的来说，实现图片倒影效果需要结合HTML5的标签，CSS3的...
js带倒影效果3D旋转木马特效
06-24
在本文中，我们将深入探讨如何实现一个具有倒影效果的3D旋转木马特效，主要基于JavaScript技术。这种效果常用于网页设计，为用户提供一种动态且吸引人的视觉体验。我们将介绍核心概念，关键技术以及实现此类特效所需...
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE（转）
大富豪的雨伞黎儿的博客
03-15 676
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE（转） https://www.jb51.net/css/71580.html 跨浏览器兼容性是网页制作永恒的难题。别看各浏览器厂商都努力在自己的浏览器中实现新式的css3标准特性，但都是以扩展样式的形式提供的， 所以在未来一段时间里，样式表里的-moz-，-webkit-，(-ms-,-o-)等等前缀将长期存在。 另外，虽说各家有志于扩张自己市场的浏览器厂商都提供了css3的新特性，但鉴于其老式版本的浏览器依然存在于用户的主机上（主要是微软
css实现文字倒影
QSWの
08-07 2893
平常我们要实现倒影的效果，一般的做法是使用多个DOM元素绝对定位+scale(负-1)或者rotate。这种方法的缺点是占据空间以及DOM元素过多。 在使用webkit内核的浏览器中(chrome,safari,移动端浏览器)，可以使用-webkit-box-reflect属性来实现倒影 -webkit-box-reflect: below 1px -webkit-gradient(linear,...
js监听 window.open 关闭事件
热门推荐
韩世雷 程序员专栏
11-21 2万+
首先创建一个新的对象，这将打开一个弹出这样的：
jQuery 5 秒倒计时
韩世雷 程序员专栏
01-04 1万+
var wait=5; timeOut(); function timeOut(){ if(wait==0){ feedbackObj.fadeOut(100,function(){ feedbackObj.remove(); }); $('#opacity-mask').fadeOut(100); }else{ setTimeout(functio
单点入口登录（js单选：学生和教师 登录不同入口）
韩世雷 程序员专栏
06-18 1万+
function printOut() { //获取radio的值 var list = document.getElementsByName("abc"); for( i =0 ; i<list.length; i++ ) { if( list[i].checked == true ) { //如果选择OA办公登录 if(list[i].value=
动态修改元素内容 innerText、innerHTML、outerText、outerHTML
韩世雷 程序员专栏
07-18 6820
中国风 function IT(){ f1.innerText="innerText"; } function IH(){ f1.innerHTML="innerHTML"; } function OT(){ f1.outerText="outerText"; } function OH(){ d1.outerHTML="outerHTML"; }
window对象的setTimeout()方法,3000毫秒后调用timeout函数
韩世雷 程序员专栏
07-11 5244
setTimeout(timeout,3000); // window对象的setTimeout()方法,3000毫秒后调用timeout函数
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值