- 浏览: 1110879 次
文章分类
- 全部博客 (379)
- S2SH (16)
- stuts2 (0)
- java语言 (81)
- JSP (17)
- <html>元素 (11)
- javaweb (4)
- web容器 (3)
- ext (23)
- javaScript (48)
- ant (1)
- liferay (1)
- sql (9)
- css (42)
- 浏览器设置 (3)
- office_world (1)
- eclipse (4)
- 其它 (28)
- 操作系统 (5)
- android (6)
- Struts2 (11)
- RegEx (3)
- mysql (5)
- BigDATA (1)
- Node.js (1)
- Algorithm (10)
- Apache Spark (1)
- 数据库 (5)
- linux (2)
- git (1)
- Adobe (3)
- java语言,WebSocket (1)
- Maven (3)
- SHELL (1)
- XML (2)
- 数学 (2)
- Python (2)
- Java_mysql (1)
- ReactJS (6)
- 养生 (4)
- Docker (1)
- Protocols (3)
- java8 (2)
- 书籍 (1)
- Gradle (2)
- AngularJS (5)
- SpringMVC (2)
- SOAP (1)
- BootstrapCSS (1)
- HTTP协议 (1)
- OAuth2 (1)
最新评论
-
Lixh1986:
Java并发编程:自己动手写一把可重入锁https://blo ...
Java之多线程之Lock与Condition -
Lixh1986:
http://win.51apps.com.cn/https: ...
temp -
ztwsl:
不错,支持很好
HttpServletRequest和ServletRequest的区别 -
guodongkai:
谢谢您能将知识精华汇编总结,让初学者们从原理中学会和提高。
javaScript之function定义 -
kangwen23:
谢谢了,顶顶
struts2中的ValueStack学习
HTML5/CSS3鼠标滑过图片滤镜动画效果
以前我们用CSS的滤镜属性来对图片做特殊的效果处理,比如阴影、模糊等。今天我们用HTML5和CSS3来实现图片的特效处理,当我们将鼠标滑过图片时,即会出现很不错的图片动画特效,像淡入淡出、放大缩小、百叶窗遮罩等HTML5特效。
http://www.html5tricks.com/demo/adipoli/index.html
二、
jQuery 3D图片滑块焦点图插件
这是一款很酷的jQuery 3D焦点图插件,和之前分享的jQuery焦点图不同的是,这款焦点图插件的图片切换播放样式是3D的,图片就像立方体一样可以上下翻滚,同时你不仅可以点击焦点图的左右切换按钮,也可以通过图片下方的小按钮进行图片切换。
http://www.html5tricks.com/demo/Adaptors/index.html
以前我们用CSS的滤镜属性来对图片做特殊的效果处理,比如阴影、模糊等。今天我们用HTML5和CSS3来实现图片的特效处理,当我们将鼠标滑过图片时,即会出现很不错的图片动画特效,像淡入淡出、放大缩小、百叶窗遮罩等HTML5特效。
http://www.html5tricks.com/demo/adipoli/index.html
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML5/CSS3鼠标滑过图片滤镜动画效果DEMO演示</title> <meta property="og:title" content="Adipoli 1.0"/> <meta property="og:type" content="website"/> <meta property="og:url" content="http://jobyj.in/adipoli"/> <meta property="og:image" content="http://jobyj.in/adipoli/img/adipoli.png"/> <meta property="og:site_name" content="jobyj"/> <meta property="og:description" content="An amazing jQuery image hover plugin. 20+ transition effects."/> <META NAME="Description" CONTENT="An amazing free to use jQuery image hover plugin with more than 20 transition effects"> <meta itemprop="name" content="Adipoli jQuery Image Hover Effects"> <meta itemprop="description" content="An amazing jQuery image hover plugin. 20+ transition effects."> <meta itemprop="image" content="http://jobyj.in/adipoli/img/adipoli.png"> <meta property="fb:admins" content="100000682718088"/> <link href="css/demo.css" rel="stylesheet" type="text/css"/> <link href="css/adipoli.css" rel="stylesheet" type="text/css"/> <link rel="shortcut icon" href="http://jobyj.in/favicon.ico" /> <script src="js/jquery-1.7.1.js" type="text/javascript"></script> <script src="js/jquery.adipoli.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('.row1').adipoli({ 'startEffect' : 'normal', 'hoverEffect' : 'popout' }); $('.row2').adipoli({ 'startEffect' : 'overlay', 'hoverEffect' : 'sliceDown' }); $('.row3').adipoli({ 'startEffect' : 'transparent', 'hoverEffect' : 'boxRandom' }); $('.row4').adipoli({ 'startEffect' : 'overlay', 'hoverEffect' : 'foldLeft' }); $('.row5').adipoli({ 'startEffect' : 'transparent', 'hoverEffect' : 'boxRainGrowReverse' }); $('.row6').adipoli({ 'startEffect' : 'grayscale', 'hoverEffect' : 'normal' }); $('#adipoli-download').fadeTo('slow',1); }); </script> </head> <body> <div id="fb-root"> <!-- The JS SDK requires the fb-root element in order to load properly. --> </div> <div id="container"> <div id="overview"></div> <div class="effect-container"> <div class="effect-details">startEffect : grayscale, hoverEffect : normal(For HTML5 Browsers)</div> <img class="img-style row6" src="img/gallery-images/6_1.png"/> <img class="img-style row6" src="img/gallery-images/6_2.png"/> <img class="img-style row6" src="img/gallery-images/6_3.png"/> </div> <div class="effect-container"> <div class="effect-details">startEffect : normal, hoverEffect : popout</div> <img class="img-style row1" src="img/gallery-images/1_1.png"/> <img class="img-style row1" src="img/gallery-images/1_2.png"/> <img class="img-style row1" src="img/gallery-images/1_3.png"/> </div> <div class="effect-container"> <div class="effect-details">startEffect : overlay, hoverEffect : sliceDown</div> <img class="img-style row2" src="img/gallery-images/2_1.png"/> <img class="img-style row2" src="img/gallery-images/2_2.png"/> <img class="img-style row2" src="img/gallery-images/2_3.png"/> </div> <div class="effect-container"> <div class="effect-details">startEffect : transparent, hoverEffect : boxRandom</div> <img class="img-style row3" src="img/gallery-images/3_1.png"/> <img class="img-style row3" src="img/gallery-images/3_2.png"/> <img class="img-style row3" src="img/gallery-images/3_3.png"/> </div> <div class="effect-container"> <div class="effect-details">startEffect : overlay, hoverEffect : foldLeft</div> <img class="img-style row4" src="img/gallery-images/4_1.png"/> <img class="img-style row4" src="img/gallery-images/4_2.png"/> <img class="img-style row4" src="img/gallery-images/4_3.png"/> </div> <div class="effect-container"> <div class="effect-details">startEffect : transparent, hoverEffect : boxRainGrowReverse</div> <img class="img-style row5" src="img/gallery-images/5_1.png"/> <img class="img-style row5" src="img/gallery-images/5_2.png"/> <img class="img-style row5" src="img/gallery-images/5_3.png"/> </div> <script type="text/javascript"> $(document).ready(function(){ $('#adipoli-download').fadeTo('fast', 0.10); $('#adipoli-download').click(function(){ if($(this).attr('href')=='#download') { alert('Please click like button to enable download link.'); } else { _gaq.push(['_trackPageview', 'adipoli.zip-v2']); } }); }); </script> </body> </html>
二、
jQuery 3D图片滑块焦点图插件
这是一款很酷的jQuery 3D焦点图插件,和之前分享的jQuery焦点图不同的是,这款焦点图插件的图片切换播放样式是3D的,图片就像立方体一样可以上下翻滚,同时你不仅可以点击焦点图的左右切换按钮,也可以通过图片下方的小按钮进行图片切换。
http://www.html5tricks.com/demo/Adaptors/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery 3D 图片播放焦点图插件Adaptor在线演示</title> <link href="css/screen.css" rel="stylesheet"> <script src="js/lib/modernizr.min.js"></script> </head> <body> <div id="page"> <section> <div id="viewport-shadow"> <a href="#" id="prev" title="go to the next slide"></a> <a href="#" id="next" title="go to the next slide"></a> <div id="viewport"> <div id="box"> <figure class="slide"> <img src="img/the-battle.jpg"> </figure> <figure class="slide"> <img src="img/hiding-the-map.jpg"> </figure> <figure class="slide"> <img src="img/theres-the-buoy.jpg"> </figure> <figure class="slide"> <img src="img/finding-the-key.jpg"> </figure> <figure class="slide"> <img src="img/lets-get-out-of-here.jpg"> </figure> </div> </div> <div id="time-indicator"></div> </div> <footer> <nav class="slider-controls"> <ul id="controls"> <li><a class="goto-slide current" href="#" data-slideindex="0"></a></li> <li><a class="goto-slide" href="#" data-slideindex="1"></a></li> <li><a class="goto-slide" href="#" data-slideindex="2"></a></li> <li><a class="goto-slide" href="#" data-slideindex="3"></a></li> <li><a class="goto-slide" href="#" data-slideindex="4"></a></li> </ul> </nav> </footer> </section> <div style="text-align:center;clear:both;"> <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script> <script src="/follow.js" type="text/javascript"></script> </div> <aside id="effect-switcher"> <h2>Select effect</h2> <ul id="effect-list"> <li><a href="#" class="effect current" data-fx="scrollVert3d">Vertical 3D scroll</a></li> <li><a href="#" class="effect" data-fx="scrollHorz3d">Horizontal 3D scroll</a></li> <li><a href="#" class="effect" data-fx="scrollVert">Vertical scroll</a></li> <li><a href="#" class="effect" data-fx="scrollHorz">Horizontal scroll</a></li> <li><a href="#" class="effect" data-fx="blindLeft">Blind left</a></li> <li><a href="#" class="effect" data-fx="blindDown">Blind down</a></li> <li><a href="#" class="effect" data-fx="fade">Fade</a></li> </ul> </aside> </div> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script>window.jQuery || document.write('<script src="js/lib/jquery-1.7.2.min.js"><\/script>')</script> <script src="js/box-slider-all.jquery.min.js"></script> <script> $(function () { var $box = $('#box') , $indicators = $('.goto-slide') , $effects = $('.effect') , $timeIndicator = $('#time-indicator') , slideInterval = 5000; var switchIndicator = function ($c, $n, currIndex, nextIndex) { $timeIndicator.stop().css('width', 0); $indicators.removeClass('current').eq(nextIndex).addClass('current'); }; var startTimeIndicator = function () { $timeIndicator.animate({width: '680px'}, slideInterval); }; // initialize the plugin with the desired settings $box.boxSlider({ speed: 1000 , autoScroll: true , timeout: slideInterval , next: '#next' , prev: '#prev' , pause: '#pause' , effect: 'scrollVert3d' , blindCount: 15 , onbefore: switchIndicator , onafter: startTimeIndicator }); startTimeIndicator(); // pagination isn't built in simply because it's easy to // roll your own with the plugin API methods $('#controls').on('click', '.goto-slide', function (ev) { $box.boxSlider('showSlide', $(this).data('slideindex')); ev.preventDefault(); }); $('#effect-list').on('click', '.effect', function (ev) { var $effect = $(this); $box.boxSlider('option', 'effect', $effect.data('fx')); $effects.removeClass('current'); $effect.addClass('current'); switchIndicator(null, null, 0, 0); ev.preventDefault(); }); }); </script> </body> </html>
发表评论
-
Flex之 justify-content 和 flex-direction 的应用
2021-12-23 19:39 397flex 简介: 采用Flex布局的元素,被称为Flex容 ... -
CSS之页面元素飞入效果
2020-04-18 17:50 753效果预览: - https://www.runoob.com ... -
CSS之垂直居中
2020-04-02 10:00 436css里面用text-align:center ... -
Sass之&引用父选择器
2018-08-08 11:29 8282Sass之&引用父选择器 描述: 您可以使用&字符选 ... -
HTML5之canvas之粒子效果
2018-01-26 10:32 1466效果图: JavaScript 代码实现: & ... -
CSS之导航栏设计之 ul 之 li 标签排成一行
2019-06-04 11:11 2405在HTML页面元素设计中, 把具有相同一类功能的列表用 li ... -
CSS之提示框实现
2017-08-02 05:08 1961效果图: 注意以下要点: 1、提示框的箭头效果,且箭头 ... -
Responsive Web Design(自响应式网页设计)
2017-05-28 22:43 1243Responsive Web Design(自响 ... -
css 之 linear-gradient 之 进度条(progress bar)
2017-05-25 18:14 2186CSS 的 linear-gradient() 函数会创建 ... -
在 css 中使用 @font-face
2017-05-24 14:15 554@font-face 允许用户使用自定义的字体。在css中定义 ... -
jQuery之mouseover,mouseover,mouseout,mouseleave
2017-03-14 10:20 653Jquery mouseenter() vs mouseove ... -
css:flex布局
2017-03-13 17:43 927A Complete Guide to Flexbox htt ... -
网站页面配色
2017-01-05 10:12 680导航栏,菜单栏 左侧菜单 导航,底部,选择列表 ... -
BootstrapCSS之Select
2016-10-18 17:00 1092效果图: 代码: <!-- Inclu ... -
CSS样式之带边框的 Anchor(超链接)
2016-10-08 15:19 2911效果图: HTML: <a c ... -
bootstrap css之响应式导航栏
2016-08-29 16:58 16767- 使用 Twitter Bootstrap 3 创建响应式导 ... -
CSS之 white-space : pre
2016-06-15 10:21 997在 github 的代码浏览页面,可以看到这样的 css 样式 ... -
CSS - li 元素显示在一行____ a 元素没有下横线
2016-05-27 20:44 2218原文链接: http://www.w3schools.com/ ... -
CSS - table 圆角 border radius
2016-04-29 12:08 4561效果: 代码: <!DOCTYPE htm ... -
[css - hr ] border color 横线高度和颜色
2016-04-28 10:59 3728如果设定 hr 的 border,会发现其高度会比不设置高2倍 ...
相关推荐
在本文中,我们将深入探讨如何使用CSS3来创建一个鼠标滑过时的图片滤镜动画效果,这将基于提供的资源“CSS3鼠标滑过图片滤镜动画效果.rar”。这个资源包含了一个实例,展示了如何通过HTML5和CSS3的结合,为图片添加...
本压缩包中的"HTML5+CSS3实现的鼠标滑过图片滤镜动画特效源码"是一个典型的示例,展示了如何利用这两种技术来创建动态的图片效果。 HTML5引入了许多新的元素和API,极大地增强了网页的结构化和媒体处理能力。在图片...
本篇文章将详细探讨如何使用纯CSS3创建鼠标滑过图片效果的动画库。 首先,让我们了解CSS3中的关键帧动画(@keyframes)。这是创建动画的核心工具,允许开发者定义一个动画从开始到结束的各个阶段。例如,我们可以...
这是一款用HTML5和CSS3实现的图片特效源码,当鼠标滑过图片时,即会出现很不错的图片动画特效,主要有淡入淡出、放大缩小、百叶窗遮罩等HTML5特效。几类特效画面的过度流畅自然,代码简介实用,也是研究html5的理想...
这是一款用HTML5和CSS3实现的图片特效源码,当鼠标滑过图片时,即会出现很不错的图片动画特效,主要有淡入淡出、放大缩小、百叶窗遮罩等HTML5特效。几类特效画面的过度流畅自然,代码简介实用,也是研究html5的理想...
总之,“简洁的纯css3鼠标滑过按钮动画过滤样式”利用了CSS3的动画和滤镜功能,为网页按钮添加了动态效果,提高了用户交互体验。在实际开发中,开发者可以根据需求调整动画参数,创造出各种个性化的按钮效果,使网页...
标题 "纯CSS3鼠标滑过按钮动画过滤特效" 涉及的核心知识点是CSS3的动画效果,特别是针对按钮交互的动态设计。CSS3(Cascading Style Sheets Level 3)是CSS规范的最新版本,引入了许多增强网页视觉效果的新特性,...
"10组风格绚丽的CSS3鼠标滑过图片特效"是一个集合,包含了多种创新的、吸引人的交互式图片特效,能够极大地提升用户体验,使用户在浏览网站时感受到独特的视觉享受。这些特效充分利用了CSS3的新特性,如过渡...
【标题】中的“纯CSS3鼠标滑过按钮动画过滤特效”指的是使用CSS3技术实现的一种交互效果,当用户将鼠标指针悬停在按钮上时,按钮会呈现出一种动态的过滤特效。这种特效通常用于提升网页的用户体验,吸引用户的注意力...
1. 图片渐变:此效果可能利用了CSS3的`transition`属性,当鼠标滑过图片时,图片的颜色或滤镜效果会逐渐变化,增加视觉冲击力。 2. 缩放效果:通过`transform: scale()`,图片在鼠标悬停时可以放大或缩小,为用户...
在"jQuery和css3鼠标滑过背景模糊特效"中,jQuery主要用于监听鼠标滑过事件,并执行相应的动画效果。 接下来,CSS3是层叠样式表的第三个版本,引入了许多新的特性和功能,如选择器、转换、过渡、动画等。在这个特效...
5. 背景图片平移:利用background-position属性,可以创建背景图片在鼠标滑过时沿水平或垂直方向移动的动画效果,增加视觉趣味性。 6. 模糊与锐化:CSS3的filter属性允许我们应用图像处理效果,如模糊和锐化。在...
总的来说,这个网页模板利用了CSS3的强大功能,实现了鼠标滑过图片时的条纹遮罩层动画效果,这既展示了CSS3在网页设计中的潜力,也为开发者提供了一个学习和借鉴的实例。通过理解并应用这些CSS3技术,开发者可以创建...
在本项目中,我们主要探讨如何使用jQuery和CSS3技术来创建一个动态的文本效果,当鼠标滑过时,文本会从模糊变为清晰,从而增强用户的交互体验。这个效果是通过巧妙地结合JavaScript库jQuery的功能和CSS3的滤镜属性来...
在本资源中,"jQuery+css3响应鼠标滑过带视差倾斜效果的悬停图片特效源码.zip",我们关注的是一个结合了jQuery库和CSS3技术的交互式图片特效。这个特效主要体现在当鼠标指针滑过图片时,图片会呈现出视差倾斜的效果...
这个压缩包文件“纯CSS3实现的支持鼠标滑过点击切换复古图片效果源码.zip”提供了一种利用CSS3特性实现的交互式图片展示效果,特别适合于创建具有复古风格的网站或应用。 在描述中提到的“鼠标滑过点击切换”,指的...
总之,通过结合jQuery的事件处理和CSS的样式控制,可以轻松实现鼠标滑过图片时图片由彩色变为黑白的动态效果。这不仅提高了用户体验,也为网页设计增添了趣味性和互动性。在实际应用中,还可以根据项目需求进行个性...
要实现鼠标滑过图片时图片变为黑白,我们可以利用CSS3的滤镜(filter)属性,特别是`grayscale()`函数,该函数可以将彩色图像转换为灰度图像。但在JavaScript环境中,我们不能直接改变CSS的滤镜,因此需要用到jQuery...