图片的CSS渐变效果

最新推荐文章于 2024-02-16 23:40:45 发布
最新推荐文章于 2024-02-16 23:40:45 发布
阅读量493 收藏 1
点赞数
分类专栏： UI 文章标签： CSS JSP 工作 HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/magic_dreamer/article/details/83525467
版权
一直都对美工的工作比较感兴趣，最近公司项目需要，顺便网上搜索了个效果。记录一下。


<%@ page language="java" errorPage="/error.jsp" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dv110</title>
<meta name="decorator" content="defaultMain">
<script language="javascript" type="text/javascript">
<!--

function Show_Sub(id_num,num){ //舌签功能
for(var i = 0;i <= 9;i++){
if(GetObj("S_Menu_" + id_num + i)){GetObj("S_Menu_" + id_num + i).className = '';}
if(GetObj("S_Cont_" + id_num + i)){GetObj("S_Cont_" + id_num + i).style.display = 'none';}
}
if(GetObj("S_Menu_" + id_num + num)){GetObj("S_Menu_" + id_num + num).className = 'selectd';}
if(GetObj("S_Cont_" + id_num + num)){GetObj("S_Cont_" + id_num + num).style.display = 'block';}
}


function GetObj(objName){
if(document.getElementById){
return eval('document.getElementById("' + objName + '")');
}else{
return eval('document.all.' + objName);
}
}

//-->
</script>
</head>
<body>
<table width="1004" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="4" class="Area501">
<img id="imgLoading0" style="FILTER: revealTrans(duration=1,transition=5)" src="${ctxPath}/images/view.jpg" width="440" height="360"
border="10"/>
<img id="imgLoading1" src="${ctxPath}/images/view.jpg" width="440" height="360"
border="10" style="display:none;FILTER: revealTrans(duration=1,transition=5)"/>
<img id="imgLoading2" src="${ctxPath}/images/view.jpg" width="440" height="360"
border="10" style="display:none;FILTER: revealTrans(duration=1,transition=5)"/>
<img id="imgLoading3" src="${ctxPath}/images/view.jpg" width="440" height="360"
border="10" style="display:none;FILTER: revealTrans(duration=1,transition=5)"/>
<img id="imgLoading4" src="${ctxPath}/images/view.jpg" width="440" height="360"
border="10" style="display:none;FILTER: revealTrans(duration=1,transition=5)"/>
<img id="imgLoading5" src="${ctxPath}/images/view.jpg" width="440" height="360"
border="10" style="display:none;FILTER: revealTrans(duration=1,transition=5)"/>
</td>
</tr>
<tr>
<td height="4" colspan="4" valign="top" class="Area502">
<img src="${ctxPath}/images/yellow.jpg" />
</td>
</tr>
<tr>
<td width="268" align="center" valign="top">
 
</td>
<td width="470" align="center" valign="top">
<div class="header_tg">
<div class="nav_ch">
<div class="first">
<ul>
<li class="l ch_2">
<a id="S_Menu_12" οnmοuseοver="Show_Sub(1,2)"
href="video.do?method=videoView">我的视频</a>
</li>
<li class="l ch_4">
<a id="S_Menu_13" οnmοuseοver="Show_Sub(1,3)" href="${ctxPath}/product/productInfo.html">终端产品</a>
</li>
<li class="l ch_5">
<a id="S_Menu_14" οnmοuseοver="Show_Sub(1,4)" href="${ctxPath}/service/help.html">客服中心</a>
</li>
<li class="l ch_6">
<a id="S_Menu_15" οnmοuseοver="Show_Sub(1,5)" href="display.do?method=display">视频演示</a>
</li>
</ul>
</div>
</div>
</div>
</td>
<td width="266" align="center" valign="top">

</td>
</tr>
</table>
<script language="javascript" type="text/javascript">
<!--
var i = 0;

function changingPicture(){
var picOne = document.getElementById("imgLoading" + i);
i = i + 1;
if(i == 6){
i = 0;
}
var picTwo = document.getElementById("imgLoading" + i);
//picTwo.filters.revealTrans.Transition=6;
//alert(Math.floor(Math.random()*20));
picTwo.filters.revealTrans.Transition=12;

picTwo.filters.revealTrans.apply();
picTwo.filters.revealTrans.play();

picTwo.style.display="";
picOne.style.display="none";
setTimeout("changingPicture()",8000);
}

function loadingPicture(){
var pic0=document.getElementById("imgLoading0");
var pic1=document.getElementById("imgLoading1");
var pic2=document.getElementById("imgLoading2");
var pic3=document.getElementById("imgLoading3");
var pic4=document.getElementById("imgLoading4");
var pic5=document.getElementById("imgLoading5");

pic0.src="http://www.dv110.com/capture/capture-" + 0 + ".jpg?" + new Date();
pic1.src="http://www.dv110.com/capture/capture-" + 1 + ".jpg?" + new Date();
pic2.src="http://www.dv110.com/capture/capture-" + 2 + ".jpg?" + new Date();
pic3.src="http://www.dv110.com/capture/capture-" + 3 + ".jpg?" + new Date();
pic4.src="http://www.dv110.com/capture/capture-" + 4 + ".jpg?" + new Date();
pic5.src="http://www.dv110.com/capture/capture-" + 5 + ".jpg?" + new Date();
setTimeout("loadingPicture()",300000);
}

loadingPicture();
changingPicture();
//-->
</script>
</body>
</html>
图形改变总共有24种效果

1： "盒状向外";

2： "圆形收缩";

3： "圆形向内";

4： "从下向上";

5： "从上向下";

6： "从左向右";

7： "从右向左";

8： "百页窗形向右";

9： "百页窗形向下";

10： "棋盘形交叉向右";

11： "棋盘形交叉向下";

12： "随意溶解形";

13： "左右向内";

14： "左右向外";

15： "上下向内";

16： "上下向外";

17： "条纹状向左下";

18： "条纹状向左上";

19： "条纹状向右下";

20： "条纹状向右上";

21： "溶解水平状";

22： "溶解上下状";

23： "随着溶解";

因此，你只要改变RevealTrans滤镜的“Transition"的值，就能获得不同的网页切换效果
magic_dreamer
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5精灵图、渐变及放射渐变
qq_48000288的博客
12-01 652
实现原理：将多张图片整合在一起，然后一次性引入到网站中，减少网络请求，以提高网站的性能实现步骤：1、先确定好你要使用哪个图片或者图标2、测量图片的大小 例如：290*3003、根据测量的结果去建一个盒子，对外展示4、将图片作为背景图引入到盒子中5、设置图片的位置，以正确的显示图片background-position：水平方向 垂直方向值；水平方向：正值 图片向右，负值 图片向左垂直方向：正值 图片向下，负值 图片向上。
学会运用css完成渐变效果
qq_46670991的博客
11-19 591
css渐变 是 css3 中 image 新增的类型。 使用 css 渐变在两种颜色间制造出平滑的渐变效果，利用 css 渐变替代在HTML页面引入渐变效果的图片，可以减少HTML页面加载时间，减少带宽的占用。 css 渐变是由浏览器直接生成，在HTML页面缩放效果比图片好，可以更灵活、便捷的调整HTML页面布局。 css3 中新增的渐变分类： 线性渐变 径向渐变 重复渐变 线性渐变 构成 线性渐变由一个轴(基准线)定义的，并且轴上每个点都具有独立的颜色。 基准线由包含渐变效果容器元素的中心点和一个角
css 背景图片渐变
weixin_35756373的博客
01-03 1092
在 CSS 中，可以使用 background-image 属性来设置背景图片。如果要设置背景图片的渐变，可以使用 background-image 属性和 linear-gradient 函数来实现。 例如，以下代码设置了从红色到蓝色的线性渐变背景图片： .element { background-image: linear-gradient(to right, red, blue); } ...
CSS之渐变
weixin_45604020的博客
07-12 2134
渐变被用于很场景，最常见的是给图片添加渐变背景色，目的是突出图片上的文字，让文字看起来更加清晰。
css3背景-背景图片-渐变色
满怀热情
07-11 3089
背景图片 颜色 渐变
利用css实现渐变色(通俗易懂)
热门推荐
DZQ1223的博客
07-07 3万+
类型语法线性渐变linear-gradient(方向, 颜色1, 颜色2, … ,颜色n)径向渐变radial-gradient(颜色1 覆盖区域大小, 颜色2 覆盖区域大小, …
css实现高斯模糊渐变效果
hades's stack
03-04 6045
效果：实现高斯模糊的渐变效果
详解CSS背景渐变图片transtion过渡效果技巧
09-27
本文将详细介绍如何利用CSS的`transition`属性来实现背景渐变图片的平滑过渡效果，尽管`background-image`本身并不支持`transition`，但我们可以通过其他策略来达成这一目标。 一、背景渐变图片与`transition`的...
12种炫酷CSS3图片切换过渡效果
12-29
【CSS3图片切换过渡效果详解】 CSS3是 Cascading Style Sheets 的第三个主要版本，它引入了许多新特性，其中最引人注目的就是丰富的动画和过渡效果。这些效果为网页设计带来了前所未有的动态视觉体验，特别是在图片...
css渐变效果.html
08-28
将一个盒子，定位于另一个盒子的显示区域外，并将改该盒子实现透明透明效果，当鼠标划过调用css3动画效果。
纯CSS实现颜色渐变效果（包含环形渐变、线性渐变、彩虹效果等）
09-25
CSS渐变广泛应用于按钮、背景、边框等设计元素，能够增加网页的视觉吸引力，同时减少对图片资源的依赖。结合CSS3的其他特性，如动画（Animations）和过渡（Transitions），可以创造出更多动态和丰富的用户体验。 ...
CSS 网页文字渐变效果
12-08
标题中的“CSS 网页文字渐变效果”是指一种使用纯CSS技术为网页文本创建渐变色彩效果的方法。这种方法不依赖JavaScript或Flash，而是利用背景图像和CSS定位来实现。这种技术尤其适用于创建吸引人的标题，使得网页...
【常见CSS扫盲之渐变效果】好看的24种CSS渐变效果汇总（附源码）
赏樱看雪撸代码
04-17 2万+
多种CSS渐变实例，CSS横向渐变，CSS径向渐变，CSS实现渐变，好看的渐变背景色，多种好看渐变效果图，好看样式demo，页面配色大全
如何在CSS中实现背景图片的渐变？
欢迎来到“Python算法探索”，我是GT算法工程师，一名热爱计算机算法的博主。在这里，我们将一起深入探索Python世界中的各种算法，从基础到高级，从理论到实践。我参加过很多算法比赛，积累了丰富的经验，希望通过这个播客与你分享。让我们一起用Python探
02-16 1321
CSS背景图片渐变简短摘要 在CSS中，直接实现背景图片的渐变效果并不可行。但可以通过叠加渐变层在背景图片上，利用background-image同时设置图片和渐变，达到类似效果。这种方法不涉及图片到渐变颜色的直接过渡，而是一种视觉上的叠加效果。对于更复杂的需求，可能需要考虑SVG、Canvas或CSS的mask属性。
CSS渐变颜色和浏览器前缀、opacity透明度以及设置多个背景图片写法
weixin_71187097的博客
06-16 1513
CSS渐变颜色和浏览器前缀、opacity透明度，以及设置多个背景图片写法
CSS 渐变背景动画的实现
军火库
03-15 2907
如果你用过SASS/LESS，你应该写过一些全局的变量。这东西不是新概念，在其他语言中早就有的！而对于CSS来说，自定义变量不亚于一场革命！声明一个自定义属性，属性名需要以（--）开始，属性值则可以是任何有效的 CSS 值。通过var(--*)来使用但是这这种方式也有缺点，就是我们只能定义变量的初始值，没有办法指定变量的类型。于是CSS又增加了@property规则之后，我们还可以像下述代码这样去定义个 CSS 自定义属性,同样通过var()使用syntax：=表示属性的类型。
html调用图像-渐入渐出效果
weixin_42899191的博客
08-23 1061
要将图像文件添加渐入渐出的效果，可以使用CSS动画或JavaScript来实现。下面是两种常用的方法： 方法一：使用CSS动画 <!DOCTYPE html> <html> <head> <title>渐入渐出效果示例</title> <style> .fade-in-out { opacit...
渐变
weixin_43339334的博客
06-03 735
通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果 ！！渐变是图片，需要通过background-image来设置 线性渐变，颜色沿着一条直线发生变化 linear-gradient() linear-gradient(red,yellow) 红色在开头，黄色在结尾，中间是过渡区域 - 线性渐变的开头，我们可以指定一个渐变的方向
安全技术交底记录.docx
最新发布
07-13
安全技术交底记录.docx
css 渐变色和背景图片
08-12
CSS 渐变色和背景图片是用于美化网页的常见技术。下面是对这两个技术的简要介绍： 1. 渐变色（Gradient）：CSS 渐变色可用于创建平滑过渡的颜色效果。它可以应用于元素的背景、边框或文本等属性。CSS 提供了两种...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值