在網頁設計中,大風車標志是一個經典的設計元素之一,它能夠為網站注入一份藝術感和活力。那么,該如何使用CSS來實現一個大風車標志呢?
/* 創建一個容器元素 */ .windmill { width: 100px; height: 100px; position: relative; } /* 創建一個圓形蒙版,以達到圓形效果 */ .windmill::before { content: ""; width: 100%; height: 100%; border-radius: 50%; background-color: white; position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none; } /* 創建四個大三角形,組成“風車”形狀 */ .windmill__blade { width: 0; height: 0; border-style: solid; border-width: 50px 50px 0 0; border-color: #1abc9c transparent transparent transparent; position: absolute; top: 0; left: 0; z-index: 1; transform-origin: 50% 100%; animation: rotate-blade 4s linear infinite; } /* 創建一個動畫,讓風車旋轉起來 */ @keyframes rotate-blade { 0% { transform: rotate(0); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } }
以上代碼將創建一個class為“windmill”的容器元素,里面包含一個圓形蒙版和四個大三角形,然后通過動畫讓它們旋轉起來,最終形成一個完整的大風車標志。