CSS3感應滑鼠背景閃爍和圖片縮放效果
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3感應滑鼠的背景閃爍和圖片縮放動態效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
/*標題背景*/
h2{background:rgba(0,0,0,0.5);color:#FFF;padding:10px 0;width:300px;text-align:center;transition:opacity 0.5s linear 0s;}
h2:hover{-moz-animation:bg .5s ease-in-out;-webkit-animation:bg .5s ease-in-out;}
h2,a{cursor:pointer;margin:10px auto;}
@-moz-keyframes bg{0%{background:rgba(144,24,53,0.18);}
25%{background:rgba(144,24,53,0.5);}
50%{background:rgba(144,24,53,0.1);}
75%{background:rgba(144,24,53,0.5);}
100%{background:rgba(144,24,53,0.18);}}
@-webkit-keyframes bg{0%{background:rgba(144,24,53,0.18);}
25%{background:rgba(144,24,53,0.5);}
50%{background:rgba(144,24,53,0.1);}
75%{background:rgba(144,24,53,0.3);}
100%{background:rgba(144,24,53,0.18);}}
/*放大鏡效果*/
a{display:block;width:50px;height:50px;border-radius:50%;background:#000;transition:opacity 0.2s linear 0s;background:url(eye.png) no-repeat;}/*就把它當做放大鏡吧*/
a:hover{-moz-animation:heart_beat .5s ease-in-out;-webkit-animation:heart_beat .5s ease-in-out;}
@-moz-keyframes heart_beat{0%{-moz-transform:scale(1)}
25%{-moz-transform:scale(1.70)}
50%{-moz-transform:scale(0.9)}
75%{-moz-transform:scale(1.55)}
100%{-moz-transform:scale(1)}}
@-webkit-keyframes heart_beat{0%{-webkit-transform:scale(1)}
25%{-webkit-transform:scale(1.70)}
50%{-webkit-transform:scale(0.9)}
75%{-webkit-transform:scale(1.55)}
100%{-webkit-transform:scale(1)}}
div{width:500px;margin:0 auto;border:solid 1px #ccc;padding:20px;background:rgba(255,255,255,0.5);text-align:center;}
</style>
</head>
<body>
<div><A href="http://www.999jiujiu.com/">
<div>
<h1>滑鼠滑過增加一點動畫</h1>
<h2>前端工程師的生活</h2>
<a></a>
</div>
</body>
</html>
相關推薦
CSS3感應滑鼠背景閃爍和圖片縮放效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
安卓觸控手勢事件實現圖片跟著手指移動和圖片縮放
效果如下： 佈局程式碼： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
Android中輪播所用到viewPager.PageTransformer 頁面滑動時候處理圖片縮放效果程式碼
class ScalePagerTransformer implements ViewPager.PageTransformer { //最小縮放率 private static final float MIN_SCALE = 0.85f;
Android 佈局手勢縮放，可滑動檢視，實現類似Imgview圖片縮放效果
Android 自定義View 佈局手勢縮放，可滑動檢視，子View實現類似Imgview圖片縮放效果 自定義View，使用ViewDragHelper和ScaleGestureDetector結合簡單的實現類似PhotoView的效果的控制元件，使佈局內的子
圖片使用滑鼠移動和滾輪縮放js以及外掛
CSS頁面（img標籤必須含有此id） <img id="imageFullScreen" src="" alt=""> JavaScript程式碼： $(document).ready(function() {//圖片移動放大 需配合上面的js才生效 $
使用MediaStore.Images和 Cursor查詢本地圖片和圖片縮圖
先看一個例項： String[] projection = { MediaStore.Images.Thumbnails._ID,MediaStore.Images.Thumbnails.DATA}; Cursor cursor = mActivity.getContent
【ZedGraph】右鍵選單和滑鼠滾軸的移動縮放等功能的啟用和禁用
本文是個人對使用過的【ZedGraph】基本功能的小結，現在逐步完善中... 通過【ZedGraph】控制元件屬性修改： 1.禁用右鍵選單： IsShowContextMenu = false; 2.禁用滑鼠滾軸移動： IsEnableHPan = false; //禁止橫
viewPager+photoView實現圖片輪播和手勢縮放功能 支援手勢縮放的imageView 如何實現相簿左右滑動和手勢縮放 如何讓圖片自適應控制元件大小 photoView如何使用(上)
import uk.co.senab.photoview.IPhotoView; import uk.co.senab.photoview.PhotoViewAttacher; import uk.co.senab.photoview.PhotoViewAttacher.OnMatrixChangedList
js滑鼠滾輪事件詳解（全相容ie、chrome、firefox）實現圖片縮放
以前看到的都是用IE的zoom，所以非IE就不支援，昨天看到這個js中滑鼠滾輪事件詳解，於是完全相容（IE6-8,FF,Chrome,Opera,Safari）的滑鼠滾軸縮放圖片效果今天就誕生了 ====程式碼如下： var zooming=function(e){ e=window.event
c# WPF 中圖片縮放功能，滑鼠拖動位置
<Window x:Class="LJDX.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://sc
Android 實現圖片縮放和拖動
今天我們來編寫一個縮放效果的ImageView ，網上有很多人都講了這些。但有許多人都直接使用了庫檔案， 那麼我們今天做的是直接上程式碼編寫一個拖動和縮放的ImageView，具體看效果圖， 那麼簡單了分析一下。在手機上縮放圖片和拖動要用到什麼?手指對不
Qt窗體背景繪圖和圖片顯示篇
今天重新研究Qt窗體繪圖和圖片顯示 (1)窗體的背景上繪製線段和區域 (2)窗體背景顯示圖片以及圖片縮放 (3)無邊框窗體顯示以及無邊框窗體的移動 (4)自定義widget形狀 (1) 在窗體上執行繪製線段和區域等操作 圖1 有時候需要在窗體的背景上繪製一些直線或者對
css 網站大背景（按比例縮放背景圖片）
很多網站是全背景圖片的，而且適應各種主流解析度，給人一種乾淨大氣的感覺，實屬設計派的一個耍酷良方，下面介紹幾種實現全屏圖片自適應縮放背景圖片的方法。 1.帥氣簡單的CSS3方法 html { background: url(images/bg.
navigationbar 的背景顏色和圖片(老外的部落格)
How about a nice navigation bar without default iPhone gradient or with a beautiful background image? Lets do it! The thing we’re going to do in both s
Glide 入門到精通之四——圖片縮放和調整大小
圖片調整大小和縮放是有趣的，在實際應用中也是很重要的 用 resize(x,y) 調整圖片大小 通常情況下，如果你的伺服器或者 API 提供的影象是你需要的精確尺寸，這時是完美的情況下，在記憶體小號和影象質量之間的權衡。 在和 Picasso 比較
C#圖片處理之:圖片縮放和剪裁
應聽眾點播要求，今天說說用C#做圖片的縮放和剪裁，相信很多人會對這部分內容感興趣，畢竟這個操作太實用了。 其實在GDI+中，縮放和剪裁可以看作同一個操作，無非就是原始區域的選擇不同罷了。空口無憑，先看具體演算法可能更好理解。 /// <summary&g
C#實現圖片縮放(包括縮圖和旋轉)
using System; using System.Collections; using System.Drawing; using System.Drawing.Imaging; using System.IO; using System.Web; using Syst
04 canvas——位移畫布和旋轉縮放
繪制 context restore math degree 角度 屬性 案例 ott 4.1 縮放 scale() 方法縮放當前繪圖，更大或更小 語法：context.scale(scalewidth,scaleheight) scalewidth : 縮放當前
jQuery圖片縮放插件-smartZoom使用
下載 地址 height 9.png 鼠標滾輪 html span logs 縮小 e-smart-zoom-jquery.js插件，下載地址及示例：https://github.com/e-smartdev/smartJQueryZoom 插件描述：通過將鼠標懸停在圖片
UWP 圖片縮放
enabled arp highlight nbsp mod 技術分享 com eight 感激 給Image外面包裹一個ScrollViewer，你會回來感激我的。 哦，對了，PC上需要按住Ctrl鍵，滑動鼠標滑輪即可；手機上雙指就可以縮放。 <ScrollV