css3圖片模糊過濾效果
css3圖片過濾效果，滑鼠放上後其它圖片模糊，滑鼠所在位置的圖片是清淅的，有效索引出當前的圖片，對圖片的模糊處理是本特效的亮點，你完全可以將模糊的效果應用於其它的圖片特效中，你同樣也可藉此程式碼研究一下HTML5中的CSS3技術。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>css3圖片模糊過濾特效-柯樂義</title> 6 <style> 7 .keleyi img{ width:200px; height:200px;} 8 .keleyi{ 9 list-style: none; 10 margin: 10px auto; padding: 0; 11 width:642px; /* (200+10+4)x3 */ 12 font-size: 0; /* fix inline-block spacing */ 13 } 14 .keleyi li{ 15 display: inline-block; 16 *display: inline; 17 zoom: 1; 18 width: 200px; height: 200px; 19 margin: 2px; 20 border: 5px solid #fff; 21 -moz-box-shadow: 0 2px 2px rgba(0,0,0,.1); 22 -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1); 23 box-shadow: 0 2px 2px rgba(0,0,0,.1); 24 -webkit-transition: all .3s ease; 25 -moz-transition: all .3s ease; 26 -ms-transition: all .3s ease; 27 -o-transition: all .3s ease; 28 transition: all .3s ease; 29 } 30 31 .keleyi:hover li:not(:hover){ 32 -webkit-filter: blur(2px) grayscale(1); 33 -moz-filter: blur(2px) grayscale(1); 34 -o-filter: blur(2px) grayscale(1); 35 -ms-filter: blur(2px) grayscale(1); 36 filter: blur(2px) grayscale(1); 37 opacity: .7; /* fallback */ 38 } 39 40 </style> 41 </head> 42 <body> 43 <div style="width: 736px; margin: 0px auto;"><h2>css3圖片模糊過濾特效·柯樂義</h2> 44 請使用支援CSS3的瀏覽器,移動游標到圖片上。 <a href="http://keleyi.com/a/bjad/yin8b5eb.htm" target="_blank">原文</a> 45 </div> 46 <ul class="keleyi"> 47 <li> 48 <img src="http://keleyi.com/image/a/mdvii14p.jpg"></li> 49 <li> 50 <img src="http://keleyi.com/image/a/968oqhtf.jpg"></li> 51 <li> 52 <img src="http://keleyi.com/image/a/crgi0c5y.jpg"></li> 53 </ul> 54 </body> 55 </html>
相關推薦
css3圖片模糊過濾效果
css3圖片過濾效果，滑鼠放上後其它圖片模糊，滑鼠所在位置的圖片是清淅的，有效索引出當前的圖片，對圖片的模糊處理是本特效的亮點，你完全可以將模糊的效果應用於其它的圖片特效中，你同樣也可藉此程式碼研究一下HTML5中的CSS3技術。 1 <!DOCTYPE html PUBLIC "-//W3
css3圖片掃光效果
css3出來後，之前很多flash才能做的效果，現在甚至不用寫一句js，單純靠css3新增的屬性就能輕鬆實現! css3實現圖片頭像掃光高亮效果,原始碼： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
iOS簡單實現圖片模糊漸變效果
文章說明：本文可以其實只是個人對知識的記錄，為了自己以後找起來方便 例子參考連結 http://code4app.com/ios/EssentialImager/527cb3596803fa4e50000000 實現原理：其實就是用一張黑白的漸變圖片作為底圖 效果圖片： 具
css3偽放大鏡(圖片放大動畫)效果(鼠標移入圓形區域放大圖片)
left 部分 nor 圓形區域 url poi 代碼 after con 源碼： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t
HTML+css3 圖片放大效果
src over pointer span hover solid inter cal order <div class="enlarge"> <img src="xx" alt="圖片"/> </div>
css3動畫 文字自動縮放 圖片自動移動效果的製作
佈局就不寫了 直接上樣式 .p_tx a{animation: rotate 0.3s ease-in-out alternate infinite;margin-left:20px;} .p_tx1 img{animation: skew 1.5s ease-in-
css3圖片 變黑白 變模糊 調整飽和度等
<!DOCTYPE html> <html> <head> <title>CSS3 filter(濾鏡) 屬性</title> <style> img { width: 33%; he
Android:通過濾鏡實現點選圖片變暗效果
package com.linj.camera.view; import android.content.Context; import android.graphics.Color; import android.graphics.PorterDuff; import android.gra
css3實現圖片3d翻轉效果
@charset: "utf-8"; * { margin: 0; padding: 0; box-sizing: border-box; } ul, ol { list-style: none; } img { border: none; } body {
IOS 使用CoreImage實現圖片模糊效果
//原始圖片 UIImage*image = [UIImage imageNamed:@"sourceImage.jpg"]; /*.....coreImage部分....*/ //CIImage（圖片輸入源類似於UIImage） C
iOS 圖片模糊效果三種實現方式
1.實現效果依次如圖：原圖、iOS8效果、Core Image效果、 VImage 效果 - 2. 程式碼 #import "ViewController.h" #import <Accelerate/Accelerate.h> @interface Vi
+【CSS3】使用純css程式碼實現圖片輪播效果
使用純CSS3程式碼實現簡單的圖片輪播。 基本思路： 以5張圖片為例： 1.基本佈局： 將5張圖片左浮動橫向並排放入一個div容器（#photos）內，圖片設定統一尺寸，div寬度設定5個圖片的總尺寸，然後放入相框容器div（#frame），相框設定1個圖片
CSS3感應滑鼠背景閃爍和圖片縮放效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
Canvas圖片模糊效果（學習筆記）
Canvas圖片模糊效果學習視訊：http://www.imooc.com/learn/601 Demo和學習筆記 index.html <!DOCTYPE html> <html> <head> <meta charset="U
android 製作ios毛玻璃效果(圖片模糊處理)
先不說廢話直接上效果圖 毛玻璃效果在ios裡是非常常見的,但是在android上卻很少見,這是為什麼呢? ios系統本身就應用了非常多的毛玻璃效果,系統對這種效果有相對比較好的處理,但是android系統並沒有類似的api,直到現在的SDK22也沒有
用JS實現圖片模糊到清晰預載入效果
用一段簡單的JS程式碼就能實現圖片模糊到清晰預載入效果，可以應用在一些大圖片的場合，例如使用者在開啟圖片的瞬間先載入一張小圖，再慢慢載入大圖，減少使用者在等待過程中的煩燥，提高使用者體驗。程式碼使用如下：<img src="images/small.jpg" name="myImage" width=
Android 自定義設定圖片模糊度、高斯模糊效果
最近專案中有需要到“毛玻璃”效果，網上找一下，千篇一律。高談闊論扯淡的多，真正有用的沒幾個！ 藉助此文，做修改之後，實現效果！我只是個搬運工，在此表示感謝！ 淡不多扯，直接上程式碼： MainActivity: public class MainActiv
Android本地圖片或者網路圖片高斯模糊效果（毛玻璃效果）圖片模糊效果一行程式碼搞定
一，實現本地圖片或者網路圖片的毛玻璃效果特別方便，只需要把下面的FastBlurUtil類複製到你的專案中就行 package com.testdemo.blur_image_lib10; import android.graphics.Bitmap; import andr
css3 圖片旋轉效果 以y軸翻轉效果等
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題</title><s
css3 實現圖片遮罩效果,hover出現文字
滑鼠hover 以後。圖片上面出現一個遮罩, 透明度變化， 顯示設定好的文字的文字，完全使用css 實現，下圖是效果 關鍵程式碼 .featured-image:hover { opacity: 0.9; color: #fff; background: