CSS3 文字立體翻轉效果
分享一段程式碼例項,它實現了滑鼠懸浮,文字能夠實現立體翻轉效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> *{ margin: 0; padding: 0; } body{ background-color: #cccccc; } .box{ width: 600px; margin: 100px auto; } span{ display: inline-block; width: 100px; height: 100px; font-size: 100px; font-family: 'microsoft yahei'; margin-right: 40px; float: left; position: relative; } span::before, span::after{ content:attr(data-text); position: absolute; left: 0; top: 0; color: rgba(0,0,0,.3); transform-origin: left center; transform: scale(0.95,1); transition: transform 0.5s; } span::after{ color: #ffffff; } div:hover span::after{ transform: rotateY(40deg) skew(0deg,10deg) scale(0.95,1); } div:hover span::before{ transform: skew(0deg,25deg) scale(0.95,1); } </style> </head> <body> <div class="box"> <span data-text="螞">螞</span> <span data-text="蟻">蟻</span> <span data-text="部">部</span> <span data-text="落">落</span> </div> </body> </html>
相關文章
- CSS3 文字立體凸起效果CSSS3
- CSS3翻轉效果CSSS3
- html 文字翻轉映象效果HTML
- CSS3前後和左右翻轉效果CSSS3
- CSS 文字立體凸起效果CSS
- css3 3D 深度翻轉效果案例CSSS33D
- CSS3多面體旋轉效果CSSS3
- CSS3 文字效果CSSS3
- CSS3簡單圓角立體按鈕效果CSSS3
- CSS3花屏文字效果CSSS3
- CSS3文字模糊效果CSSS3
- 直播原始碼網站,實現文字自動翻轉效果原始碼網站
- CSS3文字豎排效果CSSS3
- CSS3文字閃爍效果CSSS3
- CSS3立方體3D旋轉效果CSSS33D
- CSS3帶有倒影的文字效果CSSS3
- CSS3星系旋轉效果代CSSS3
- CSS3圖片旋轉效果CSSS3
- CSS3文字動態填充背景效果CSSS3
- CSS3文字顏色漸變效果CSSS3
- CSS3具有3D立體效果的數字分頁CSSS33D
- CSS3旋轉載入等待效果CSSS3
- CSS3地月星系旋轉效果CSSS3
- CSS3文字的描邊鏤空效果CSSS3
- CSS3文字凹凸效果程式碼例項CSSS3
- CSS3文字不斷流光滑過效果CSSS3
- word怎麼製作立體文字?word立體文字的具體制作方法
- 直播軟體原始碼,CSS3實現圖片立體旋轉動畫原始碼CSSS3動畫
- CSS3旋轉風車效果程式碼CSSS3
- CSS3滑鼠懸浮div旋轉效果CSSS3
- CSS3旋轉效果程式碼例項CSSS3
- CSS3文字陰影效果程式碼例項CSSS3
- canvas立體效果的圓環Canvas
- CSS3旋轉大風車效果詳解CSSS3
- CSS3 3D立體按鈕CSSS33D
- CSS3滑鼠懸浮圖片前後翻轉CSSS3
- 使用css3做一個魔方旋轉的效果CSSS3
- 滑鼠懸浮圖片實現翻轉效果
- div前後翻轉效果程式碼例項