用HTML+CSS+JS做一个闪动的心的代码
时间: 2024-03-28 14:16:48 浏览: 24
好的,这是一个简单的用 HTML、CSS 和 JS 制作闪烁的心形代码示例:
HTML 代码:
```
<div class="heart">
<div class="heart__inner"></div>
</div>
```
CSS 代码:
```
.heart {
position: relative;
height: 100px;
width: 100px;
}
.heart::before,
.heart::after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart::after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
.heart__inner {
position: absolute;
top: 16px;
left: 16px;
height: 70px;
width: 70px;
background: red;
border-radius: 50%;
animation: heartBeat 1s ease-in-out infinite;
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.3);
}
@keyframes heartBeat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
```
JS 代码:
```
// 什么也不需要做
```
保存上述代码为一个 HTML 文件,用浏览器打开文件,即可看到一个闪烁的心形。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)