XML:CSS基础之四-白红宇的个人博客

XML:CSS基础之四

发布日期：2021-05-07 10:37:27 浏览次数：17 分类：技术文章

本文共 2013 字，大约阅读时间需要 6 分钟。

用JAVASCRIPT+CSS实现换肤

ex002.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<head>

<title>CSS图象滤镜_变换CSS</title>

function setStyle(title) {

//预定义变量

var i, links;

//用DOM方法获得所有的link元素

links = document.getElementsByTagName("link");

for(i=0; links[i]; i++) {

//判断此link元素的rel属性中是否有style关键字

//即此link元素是否为样式表link

//同时判断此link元素是否含有title属性

if(links[i].getAttribute("rel").indexOf("style") != -1

&& links[i].getAttribute("title")) {

//先不管三七二十一把它设为disabled

links[i].disabled = true;

//再判断它的title中是否有我们指定的关键字

if(links[i].getAttribute("title").indexOf(title) != -1)

//如果有则将其激活

links[i].disabled = false;

}

</script>

</head>

<body>

</p>

</div>

</body>

</html>

ex002a.css

.img {

filter: Alpha(Opacity=80, FinishOpacity=0, Style=2, StartX=0, StartY=0, FinishX=400, FinishY=300);

}

.bg {

background-color: #336600;

margin: 0px;

}

.text {

filter:wave(Add="0",Phase="4",Freq="2",LightStrength="2",Strength="2");

font-family: "宋体";

font-size: 12pt;

font-weight: bolder;

position: absolute;

color: #FF9900;

left: 571px;

top: 315px;

}

.btn {

font-weight: bold;

background-color: #33CCFF;

}

ex002b.css

.img {

filter: Alpha(Opacity=30, FinishOpacity=0, Style=2, StartX=0, StartY=0, FinishX=400, FinishY=300);

}

.bg {

background-color: #FFCC33;

margin: 0px;

}

.text {

filter:blur(add=1,direction=135,strength=2）;

font-family: "宋体";

font-size: 12pt;

font-weight: bolder;

position: absolute;

left: 571px;

top: 315px;

color: #339999;

}

.btn {

font-weight: bold;

background-color: #99CC66;

}

效果演示如下:

上一篇：XML:有关表格边框的CSS语法

下一篇：XML:CSS基础之三

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章