CSS3是一種用于網頁設計和開發的樣式表語言,其功能非常強大。今天,我們來嘗試使用CSS3做出一個可愛的愛心。
/* 首先,在CSS文件中定義一個div元素,作為愛心的容器 */ .heart { width: 100px; height: 100px; position: relative; } /* 接著,使用偽元素:before和:after繪制愛心的左半部分和右半部分 */ .heart:before, .heart:after { content: ""; background-color: red; border-radius: 50px 50px 0 0; position: absolute; } /* 左半部分 */ .heart:before { width: 50px; height: 50px; top: 0; left: 25px; transform: rotate(-45deg); } /* 右半部分 */ .heart:after { width: 50px; height: 50px; top: 0; right: 25px; transform: rotate(45deg); } /* 最后,加上一個小圓形就完成了一個可愛的愛心 */ .heart:before { border-radius: 50px 50px 0 0; box-shadow: inset 5px 5px 5px rgba(0,0,0,0.1); } .heart:after { border-radius: 50px 50px 0 0; box-shadow: inset -5px 5px 5px rgba(0,0,0,0.1); } .heart:before { background-color: #fc2f68; } .heart:after { background-color: #fc2f68; } .heart:before { z-index: 10; } .heart:after { z-index: 10; } .heart:before { transform: translateX(5px) translateY(5px); } .heart:after { transform: translateX(-5px) translateY(5px); } .heart { animation: beating 1s ease-in-out infinite; } @keyframes beating { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
試著把上面的代碼復制到你的CSS文件中,并在HTML頁面中添加以下代碼:
<div class="heart"></div>
打開頁面,你會看到一個可愛的紅色愛心,它會在頁面上上下跳動,為你的頁面添加了一些浪漫和溫馨的感覺。
上一篇css3做小車
下一篇css3允許幾張圖片