可以自動撐起的html樣式,好好玩:CSS3抖動樣式CSS Shake讓你的網頁酷炫起來

之前在一些網站發現了一個好玩的樣式,就是鼠標移到網站LOGO上,logo會自動抖動起來,顯得非常炫酷。我也是十分感興趣。自從本站新添加了一個視覺設計的分類之后,我也是想起來有個抖動CSS樣式CSS Shake,所以今天給小伙伴們分享一下,希望小伙伴們能夠喜歡。

CSS Shake是一個使用CSS3實現的動畫樣式,使用SASS編寫,利用它我們可以實現多種不同樣式的抖動效果。比如自動抖動、鼠標懸停抖動、鼠標劃過抖動。這個效果很好玩,可以用到logo、圖標、按鈕或者標題上面,顯得很酷炫。廢話不多說,直接上圖:

40dc6f627ed810b489f81b96308a509b.gif

06156eaa30f45d10dedce1cf4b50a89e.gif

dc85f353128271ed3cb197a2240d8f5f.gif

如何在網頁中調用呢?當然不是簡簡單單幾個代碼就能搞定,需要調用CSS Shake代碼文件。

?/* 引入css shake的樣式表,樣式表可以下載到你的網站目錄里調用哦?*/

/* 添加抖動樣式,一共9種,如下?*/

另外還能通過 .freeze,.shake-constant & .hover-stop 來控制狀態,自己百度一下哦。

最后,醉風云希望結識一些喜歡視覺設計的朋友,感興趣的+洃少QQ哦!

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/378205.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/378205.shtml
英文地址,請注明出處:http://en.pswp.cn/news/378205.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

linux技巧----查找某個正在執行的腳本

如果在機器上發現有執行的腳本,卻不知道在哪,可以這樣找 例如 # netstat -ltnp Active Internet connections (only servers) Proto Recv-Q Send-Q Local Address Foreign Address State PID/Program name tcp …

成功溝通的六要素

溝通在我們的生活、工作中必不可少,成功的溝通有助于事業成功,家庭美滿!下面分享一篇關于溝通的文章,成功溝通六要素: 當蜘蛛網連接起來,可以捆住一頭獅子。——埃塞俄比亞諺語 與他人合作使我們可以實現比…

java中intvalue_Java Number intValue()方法與示例

java中intvalueNumber類intValue()方法 (Number Class intValue() method) intValue() method is available in java.lang package. intValue()方法在java.lang包中可用。 intValue() method is used to return the value denoted by this Number object converted to type int…

爬蟲項目(一)---采集最近一日世界各國的疫情數據信息

該內容出自黑馬程序員教程 采集最近一日世界各國疫情數據 步驟: 發送請求,獲取疫情首頁從疫情首頁中提取最近一日各國疫情字符串從最近一日各國疫情字符串中提取json格式字符串把json格式字符串轉換為Python類型把Python類型的數據,以json…

【數據結構基礎應用】【順序表】

代碼參考《妙趣橫生的算法.C語言實現》、《劍指OFFER 名企面試官精講典型編程題 第2版》等 文章目錄前言1、合并兩個順序表前言 本章總結在看書過程中的一些關于順序表的算法題并可能含有一些自己的一些疑問。題目數量不定,隨閱歷增加而增加; 1、合并兩…

html上下滾動切換頂端tab,jQuery實現Tab菜單滾動切換的方法

本文實例講述了jQuery實現Tab菜單滾動切換的方法。分享給大家供大家參考。具體如下:這是一款jQuery實現讓你的Tab菜單滾動的代碼,先運行一下看看效果咋樣?是不是超不錯,讓你的網頁變得靈動起來,不再靜止,學習jquery的朋友也可作為范例來參考吧.運行效果截圖如下&am…

[轉載]十四步實現擁有強大AI的五子棋游戲

又是本人一份人工智能作業……首先道歉,從Word貼到Livewrter,好多格式沒了,也沒做代碼高亮……大家湊活著看……想做個好的人機對弈的五子棋,可以說需要考慮的問題還是很多的,我們將制作擁有強大AI五子棋的過程分為十四…

Java BigDecimal plus()方法與示例

BigDecimal Class plus()方法 (BigDecimal Class plus() method) Syntax: 句法: public BigDecimal plus();public BigDecimal plus(MathContext ma_co);plus() method is available in java.math package. plus()方法在java.math包中可用。 plus() method is used…

爬蟲項目(二)---采集從03月02號以來的世界各國疫情數據

該內容出自黑馬程序員教程 采集從03月02號以來的世界各國疫情數據 步驟: Ⅰ,重構項目(一)的代碼,以提高擴展性 把功能封裝到一個類中每一個小功能變成一個方法通過run方法啟動爬蟲 import requests import re import json from bs4 impor…

【原創】StreamInsight查詢系列(二十)——查詢模式之檢測間隙事件

上篇文章介紹了查詢模式中如何檢測異常事件,這篇博文將介紹StreamInsight中如何檢測間隙事件。 測試數據準備 為了方便測試查詢,我們首先準備一個靜態的測試數據源:// 創建數據源,要注意的是4:16和4:30之間存在的事件間隙 var sou…

git 項目過大問題解決

當項目過大時,git clone時會出現error: RPC failed; HTTP curl The requested URL returned error: Gateway Time-out的問題 解決方法很簡單,在git clone時加上--depth1即可解決 克隆的項目只包含最近的一次commit的一個分支,體積很小&#x…

java bitset_Java BitSet hashCode()方法及示例

java bitsetBitSet類hashCode()方法 (BitSet Class hashCode() method) hashCode() method is available in java.util package. hashCode()方法在java.util包中可用。 hashCode() method is used to retrieve hash code for this bit set (BitSet). hashCode()方法用于檢索此位…

【數據結構基礎應用】【查找和排序算法】

代碼參考《妙趣橫生的算法.C語言實現》 文章目錄前言1、順序查找2、折半查找3、直接插入排序4、選擇排序5、冒泡排序6、希爾排序7、快速排序8、堆排序9、排序算法性能比較10、所有算法的code(C語言)前言 本章總結查找和排序算法:順序查找、折…

MarshalHelper

1 public class MarshalHelper2 {3 /// <summary>4 /// 結構體轉byte數組5 /// </summary>6 /// <param name”structObj”>要轉換的結構體</param>7 /// <returns>轉換后的byte數組</returns&g…

深入淺出SharePoint——InvokeWorkflow的妙用

應用場景&#xff1a;在Parallel Activity中使用InvokeWorkflow來達到間接關閉并行分支的功能。 TestInvokeWorkflow方法用于啟動監聽工作流。endinvoke方法用戶關閉啟動的監聽工作流實例。 private void TestInvokeWorkflow(object sender, EventArgs e) { SPWeb web SPConte…

爬蟲項目(三)---采集最近一日全國各省疫情數據

該內容出自黑馬程序員教程 采集最近一日全國各省疫情數據 當然&#xff0c;數據來源仍然是丁香園新型冠狀病毒肺炎疫情實時動態首頁 url&#xff1a;https://ncov.dxy.cn/ncovh5/view/pneumonia 思路&#xff1a;首先需要先確定全國各省疫情數據的位置 全國各省份的疫情數據…

計算機專業博士后排名,排名丨計算機專業領域TOP10,性價比超高!

原標題&#xff1a;排名丨計算機專業領域TOP10&#xff0c;性價比超高&#xff01;相信各位家長、同學已經看過太多專業的排名&#xff0c;我問過很多理科生將來想學什么專業&#xff0c;聽到頻率最高的還是計算機專業。似乎大家都知道&#xff0c;學計算機是比較掙錢的&#x…

python set |_Python事件類| set()方法與示例

python set |Python Event.set()方法 (Python Event.set() Method) set() is an inbuilt method of the Event class of the threading module in Python. set()是Python中線程模塊的Event類的內置方法。 When the set() method is called, the internal flag of that event c…

js 命名規范

轉載于:https://www.cnblogs.com/zjx2011/p/3165043.html

爬蟲項目(四)---采集從01月22日以來全國各省疫情數據

采集從03月02日以來全國各省疫情數據 當然&#xff0c;數據來源仍然是丁香園新型冠狀病毒肺炎疫情實時動態首頁 url&#xff1a;https://ncov.dxy.cn/ncovh5/view/pneumonia 分析 確定01月22日以來全國各省疫情數據的URL 由項目(三)可以獲取全國各省疫情數據點擊可下載&…