CSS3感知滑鼠進入方向
以前實現滑鼠進入方位的感知功能,需要結合javascript來實現。
css3的普遍應用又提供了一個新的方式。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .antzone { width: 1000px; height: auto; overflow: hidden; cursor: pointer; } .antzone [fox=con] { width: calc((990px - 10px * 3) / 4); background: url(demo/CSS/img/shangpin.jpg) -616px 0 no-repeat; height: calc((990px - 10px * 3) / 4 / 3 * 4); position: relative; overflow: hidden; margin: 10px 10px 0 0; float: left; } .antzone [fox=con] [fox$=_c]:nth-of-type(2n-1) { width: 240px; height: 240px; transform: rotate(45deg) skew(8deg,8deg); position: absolute; left: 2px; } .antzone [fox=con] [fox$=_c]:nth-of-type(2n) { width: 240px; height: 240px; transform: rotate(45deg) skew(8deg,8deg); position: absolute; top: 42px; } .antzone [fox^=top] { top: -151px; } .antzone [fox^=right] { left: 148px; } .antzone [fox^=bottom] { bottom: -151px; } .antzone [fox^=left] { right: 147px; } .antzone [fox=con]:hover [fox$=_c] { transform: none; width: 100%; height: 100%; top: 0; left: 0; } .antzone [fox=con] [fox$=_c]:hover { z-index: 5; } .antzone [fox$=_c] [fox$=_con] { display: block; width: calc((990px - 10px * 3) / 4); height: calc((990px - 10px * 3) / 4 / 3 * 4); background-image: linear-gradient(0deg,#4fc4b2,#fff,#b0fef2); } .antzone [fox^=top] [fox$=_con] { transform: translateY(-100%); } .antzone [fox^=bottom] [fox$=_con] { transform: translateY(100%); } .antzone [fox^=left] [fox$=_con] { transform: translateX(-100%); } .antzone [fox^=right] [fox$=_con] { transform: translateX(100%); } .antzone [fox$=_c]:hover [fox$=_con] { transform: translateY(0); transition: all .3s linear; transform: translateX(0); } </style> </head> <body> <div> <div style="width:990px;margin:0 auto;"> <div class="antzone"> <div fox="con"> <div fox="top_c"><a fox="con_con"></a></div> <div fox="right_c"><a fox="con_con"></a></div> <div fox="bottom_c"><a fox="con_con"></a></div> <div fox="left_c"><a fox="con_con"></a></div> </div> <div fox="con"> <div fox="top_c"><a fox="con_con"></a></div> <div fox="right_c"><a fox="con_con"></a></div> <div fox="bottom_c"><a fox="con_con"></a></div> <div fox="left_c"><a fox="con_con"></a></div> </div> <div fox="con"> <div fox="top_c"><a fox="con_con"></a></div> <div fox="right_c"><a fox="con_con"></a></div> <div fox="bottom_c"><a fox="con_con"></a></div> <div fox="left_c"><a fox="con_con"></a></div> </div> <div fox="con"> <div fox="top_c"><a fox="con_con"></a></div> <div fox="right_c"><a fox="con_con"></a></div> <div fox="bottom_c"><a fox="con_con"></a></div> <div fox="left_c"><a fox="con_con"></a></div> </div> <div fox="con"> <div fox="top_c"><a fox="con_con"></a></div> <div fox="right_c"><a fox="con_con"></a></div> <div fox="bottom_c"><a fox="con_con"></a></div> <div fox="left_c"><a fox="con_con"></a></div> </div> <div fox="con"> <div fox="top_c"><a fox="con_con"></a></div> <div fox="right_c"><a fox="con_con"></a></div> <div fox="bottom_c"><a fox="con_con"></a></div> <div fox="left_c"><a fox="con_con"></a></div> </div> <div fox="con"> <div fox="top_c"><a fox="con_con"></a></div> <div fox="right_c"><a fox="con_con"></a></div> <div fox="bottom_c"><a fox="con_con"></a></div> <div fox="left_c"><a fox="con_con"></a></div> </div> <div fox="con"> <div fox="top_c"><a fox="con_con"></a></div> <div fox="right_c"><a fox="con_con"></a></div> <div fox="bottom_c"><a fox="con_con"></a></div> <div fox="left_c"><a fox="con_con"></a></div> </div> </div> </div> </div> </body> </html>
相關文章
- jQuery感知滑鼠滑入方向jQuery
- 滑鼠進入移出事件事件
- 28歲,正式進入IT行業,方向 Java 前端行業Java前端
- 「MacOS滑鼠操作技巧」如何設定滑鼠”的速度、滾動方向等配置?Mac
- CSS3滑鼠懸浮元素放大效果CSSS3
- CSS3 螺紋載入進度條效果CSSS3
- 【Linux Mint】Linux Mint 19.1 Cinnamon 修改滑鼠滾動方向為自然方向Linux
- CSS3滑鼠懸浮環裝遮罩效果CSSS3遮罩
- CSS3滑鼠懸浮div旋轉效果CSSS3
- CSS3滑鼠懸浮動畫按鈕效果CSSS3動畫
- CSS3滑鼠懸浮圖示旋轉CSSS3
- CSS3連結<a>滑鼠懸浮動畫效果CSSS3動畫
- CSS3滑鼠懸浮div水平運動CSSS3
- css3滑鼠懸浮小球彈性效果CSSS3
- jQuery根據滑鼠進入的方位出現動畫遮罩效果jQuery動畫遮罩
- GridView滑鼠經過感知以及點選行彈出視窗View
- CSS3 滑鼠懸浮div旋轉縮放CSSS3
- CSS3滑鼠懸浮圖片閃動效果CSSS3
- CSS3滑鼠懸浮交叉線效果按鈕CSSS3
- jQuery/CSS3實現滑鼠點選波浪特效jQueryCSSS3特效
- jQuery獲取滑鼠從哪個方向移入和移出元素jQuery
- windows10黑屏只有滑鼠如何處理_win10進入黑屏只有滑鼠怎麼解決WindowsWin10
- 能夠感知滑鼠移動方位的遮罩層效果程式碼例項遮罩
- winform之滑鼠進入及停留相關事件及游標cursorORM事件
- CSS3滑鼠懸浮圖片前後翻轉CSSS3
- CSS3 滑鼠懸浮元素放大和縮小效果CSSS3
- 不用滑鼠怎麼讓excel中的游標直接進入文字輸入狀態?Excel
- 判斷滑鼠指標移入移出的方向程式碼例項指標
- CSS3各種方向三角形效果CSSS3
- VS安裝外掛,按CTRL+滑鼠左鍵進入函式函式
- 30個jQuery & CSS3載入動畫和進度欄外掛jQueryCSSS3動畫
- win10開機黑屏只有滑鼠怎麼回事_win10進入桌面黑屏只有滑鼠如何解決Win10
- CSS3滑鼠懸浮圖片縮小出現文CSSS3
- css3實現滑鼠懸浮背景上下翻滾效果CSSS3
- css3實現的滑鼠懸浮按鈕動畫效果CSSS3動畫
- jquery css3跟隨滑鼠晃動的圖片效果jQueryCSSS3
- CSS3滑鼠懸浮元素旋轉一定角度CSSS3
- css3滑鼠懸浮背景滑動導航選單CSSS3