小星星製做css3

時間 2019-12-14

標籤星星製做 css3 css 欄目 CSS 简体版

原文原文鏈接

```css

原理：一個正方形兩個圓定位旋轉圓角邊屬性 spa

body部分orm

<body>
<div class="heart-body">
    <!--:before-->
    <div class="heart-shape"></div>
    <!--:after-->
</div>
</body>
css部分



.heart-body{
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    margin: 10px auto;
    background: red;
    position: absolute;
    transform: rotate(45deg);
    animation: love 1s ease infinite;
}
.heart-shape{
    width: 200px;
    height: 200px;
    background: indianred;
    box-shadow: 0 0 50px rgb(255,0,0);
}
.heart-body:before{
    content:'';
    width: 200px;
    height: 200px;
    background: indianred;
    border-radius: 50%;
    box-shadow: 0 0 50px rgb(255,0,0);
    position: absolute;
    top: 0;
    left: -100px;
}
.heart-body:after{
    content:'';
    width: 200px;
    height: 200px;
    background: indianred;
    border-radius: 50%;
    box-shadow: 0 0 50px rgb(255,0,0);
    position: absolute;
    top: -100px;
    left: 0px;
}
@keyframes love {
    0%,100%{transform: scale(0.9,0.9)rotate(45deg)}
    50%{transform: scale(1.2,1.2)rotate(45deg)}
}

```animation

1. [ZJOI2016]小星星
2. BZOJ4455: [Zjoi2016]小星星
3. html css3 漂浮動態星星特效
4. css3實現星星閃爍效果
5. css3星際動畫
6. ps製作星空小屋
7. 小白製作星空字
8. [ZJOI2016]小星星（容斥+dp）
9. js 小星星遊戲
10. js小遊戲--摘星星
更多相關文章...
• MySQL FLOAT、DOUBLE、DECIMAL（小數類型） - MySQL教程
• Lua 流程控制 - Lua 教程
• 漫談MySQL的鎖機制
• Docker容器實戰(六) - 容器的隔離與限制

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。