css 心形效果程式碼例項
分享一段程式碼例項,它實現了心形效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div { margin: 40px; } .heart { position: relative; width: 100px; height: 100px; } .heart:before, .heart:after { content: ""; width: 60px; height: 100px; background: cadetblue; border-radius: 40px 40px 0px 0px; position: absolute; left: 0; transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .heart:after { left: 30px; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); } </style> </head> <body> <div class="heart"></div> </body> </html>
程式碼比較簡單,主要是對幾個css3屬性的應用,可以查閱相關閱讀。
相關閱讀:
(1).border-radius可以參閱CSS3 border-radius一章節。
(2).transform: rotate()可以參閱transform: rotate()一章節。
相關文章
- CSS3心形效果程式碼例項CSSS3
- css六邊形效果程式碼例項CSS
- CSS3梯形效果程式碼例項CSSS3
- canvas實現的動態心形效果程式碼例項Canvas
- css3繪製心形圖案程式碼例項CSSS3
- css3鋸齒形邊框效果程式碼例項CSSS3
- css切角效果程式碼例項CSS
- css模糊效果程式碼例項CSS
- CSS橢圓效果程式碼例項CSS
- css立體效果程式碼例項CSS
- css Sprite 動畫效果程式碼例項CSS動畫
- css斜線效果程式碼例項CSS
- css實現圓形、橢圓和半圓效果程式碼例項CSS
- css實現的三角形效果程式碼例項CSS
- css繪製圓形程式碼例項CSS
- javascript繪製心形圖案程式碼例項JavaScript
- canvas繪製實心圓形程式碼例項Canvas
- css背景虛化效果程式碼例項CSS
- CSS文字模糊效果程式碼例項CSS
- css內邊框效果程式碼例項CSS
- css文章豎排效果程式碼例項CSS
- css3星空效果程式碼例項CSSS3
- css紙飛機效果程式碼例項CSS
- css3水滴效果程式碼例項CSSS3
- CSS3 名片效果程式碼例項CSSS3
- css3橢圓形程式碼例項CSSS3
- css實現矩形切角效果程式碼例項CSS
- div css搜尋框效果程式碼例項CSS
- css多元素水平居中效果程式碼例項CSS
- CSS3小黃人效果程式碼例項CSSS3
- css3晃動效果程式碼例項CSSS3
- CSS3旋轉效果程式碼例項CSSS3
- CSS3彈球效果程式碼例項CSSS3
- div css三列布局效果例項程式碼CSS
- css3和js實現的圓形鐘錶效果程式碼例項CSSS3JS
- css樹形導航選單程式碼例項CSS
- javascript圓形電子鐘錶效果程式碼例項JavaScript
- CSS3滑過光束效果程式碼例項CSSS3