莫振杰,是一位國內著名的前端開發工程師,以其對css3技術的理解和應用而出名。在他的學習筆記和博客中,我們可以學到很多css3的知識和技巧,可以說是css3領域里的前沿人物之一。
而他在百度云上分享了一些他工作中用到的css3代碼和效果,下面我們就來介紹一下這些代碼。
#btn { position: relative; display: inline-block; color: #fff; text-align: center; background-color: #f00; border-radius: 50px; width: 140px; height: 40px; line-height: 40px; overflow: hidden; } #btn:before { content: ""; position: absolute; top: -10px; left: -10px; width: 0px; height: 0px; border: 10px solid transparent; border-top-color: #0F0; border-left-color: #0F0; border-radius: 50%; transition: all 0.5s ease; z-index: -1; } #btn:hover:before { top: -50px; left: -50px; width: 200px; height: 200px; }
上述代碼是一個簡單的按鈕樣式,其中使用了border-radius屬性來設置圓角,使用了:before選擇器來創建按鈕的一個圓環效果,可以通過:hover偽類來觸發圓環效果的動畫。
莫振杰還分享了其他一些css3特效代碼,比如3D翻轉、移動端菜單、響應式布局、動態圖標等,我們可以通過百度云獲取這些代碼,進行自己的學習和實踐。
總之,莫振杰的css3百度云分享,為css3技術愛好者和前端工程師提供了一個很好的學習和交流平臺,相信會對大家的工作和學習都有所裨益。
上一篇css設計一張圖片的樣式
下一篇英文字符換行css