展会信息港展会大全

css 静态滤镜与动态滤镜实现方法
来源:互联网   发布日期:2016-03-25 16:16:44   浏览:1925次  

导读:!doctype html public -//w3c//dtd html 4.0 transitional//en html head titlenew document/title style type=text/css教程 !-- div#div1 { width:200px;height:60px;padding:10px;border:1px solid #666;color:#000; filter : progid:dximagetransform.mic...

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

<html>

<head>

<title>new document</title>

<style type="text/css教程">

<!--

div#div1

{

width:200px;height:60px;padding:10px;border:1px solid #666;color:#000;

filter : progid:dximagetransform.microsoft.shadow(color=#000000,direction=135,strength=5);

}

-->

</style>

</head>

<body>

<div id="div1">

drops教程hadow滤镜效果

</div>

</body>

</html>

动态滤镜实现方法

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

<html>

<head>

<title>new document</title>

<style type="text/css">

<!--

div#div1 { height:240px;filter:blendtrans(duration=1);}

-->

</style>

</head>

<body>

<div id="div1">

<img src="1.jpg" alt="\"/>

</div>

<input type="button" value="play" onclick="play()"/>

</body>

</html>

<script language="网页特效" type="text/javascript">

<!--

function play(){

var div1=document.getelementbyid("div1");

div1.filters[0].apply();

div1.innerhtml="<img src='2.jpg' alt="'/>";

div1.filters[0].play();

}

//-->

</script>

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港