CSS3心形效果程式碼例項
本章節分享一段程式碼例項,它利用css3實現了心形效果,並且還能夠跳動。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #myheart { position: relative; width: 150px; height: 220px; } #myheart:before,#myheart:after { position: absolute; left: 100px; background: red; height: 160px; width: 100px; content: ""; border-radius: 50px 50px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } #myheart:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; } @keyframes heart { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(0.8); } 100% { -webkit-transform: scale(1); } } .myheart { position: absolute; top: 40%; left: 40%; animation: heart 1.5s linear infinite; } </style> </head> <body> <div class="myheart"> <div id="myheart"></div> </div> </body> </html>
相關文章
- CSS3梯形效果程式碼例項CSSS3
- css3水滴效果程式碼例項CSSS3
- css3晃動效果程式碼例項CSSS3
- CSS3旋轉效果程式碼例項CSSS3
- CSS3滑過光束效果程式碼例項CSSS3
- CSS3小黃人效果程式碼例項CSSS3
- css3折角效果程式碼例項CSSS3
- CSS3背景漸變效果程式碼例項CSSS3
- CSS3星系運動效果程式碼例項CSSS3
- CSS3文字凹凸效果程式碼例項CSSS3
- CSS3文字陰影效果程式碼例項CSSS3
- CSS3紅色心形效果程式碼CSSS3
- CSS3圓形時鐘效果程式碼CSSS3
- CSS3卡通形象程式碼例項CSSS3
- jQuery tab選項卡效果程式碼例項jQuery
- canvas載入效果程式碼例項Canvas
- CSS橢圓效果程式碼例項CSS
- CSS3發光背景程式碼例項CSSS3
- CSS3紙飛機程式碼例項CSSS3
- css繪製圓形程式碼例項CSS
- 美化滾動條效果程式碼例項
- canvas原型鐘錶效果程式碼例項Canvas原型
- css背景虛化效果程式碼例項CSS
- canvas氣泡上浮效果程式碼例項Canvas
- CSS3圖層陰影程式碼例項CSSS3
- jQuery點選滑出層效果程式碼例項jQuery
- div前後翻轉效果程式碼例項
- 當前文字框高亮效果程式碼例項
- 淡入淡出效果簡單程式碼例項
- canvas繪製箭頭效果程式碼例項Canvas
- canvas繪製圓形鐘錶程式碼例項Canvas
- CSS3立體導航選單程式碼例項CSSS3
- CSS3箭靶效果程式碼CSSS3
- CSS3 loadding效果程式碼CSSS3
- html實現簡單ListViews效果的例項程式碼HTMLView
- 商品搶購倒數計時效果程式碼例項
- CSS3 translate導致字型模糊的例項程式碼CSSS3
- CSS3 Flex 彈性佈局例項程式碼詳解CSSS3Flex