- 1Elasticsearch基础操作
- 2科大讯飞2020提前批一面凉经_科大讯飞提前批 手撕
- 35. ATF（ARM Trusted firmware）启动---bl31_atf bl31 无法启动
- 4干净的架构_干净的抽象结构
- 5掘金以奖品为诱惑坑作者之路--博客作者注意
- 6超星nm10 aarch64平台ubuntu使用移远EC200-CN4G/5G卡_ec200u-cn
- 7YOLO_v5将数据集按比例分为训练集和测试集_yolov5 数据集划分
- 8FRP 进行内网穿透，在一台客户端上配置多台服务器连接，winsw 配置多个 windows 自启动服务，Windows 远程桌面连接时目标客户端断开 WIFI连接解决办法_frp穿透双win
- 9常见的排序算法C/C++_擂台法排序c语言
- 10html爱心表白代码（最全），面试题+笔记+项目实战_html表白爱心代码
html跳动的心,css3跳动的心制作
赞
踩
css属性
* {
margin: 0;
padding: 0;
}
body {
width: 100%;/*如果要给背景加颜色或者图片必须把宽度设置为100%。*/
background-color: #000;
}
.heart {
margin: 100px auto;
width: 200px;
height: 200px;
position: relative;
animation-name: shake;/*为 @keyframes 动画规定一个名称*/
animation-duration: 0.5s;/*定义动画完成一个周期所需要的时间，以秒或毫秒计。*/
animation-iteration-count: infinite;/*定义动画的播放次数。infinite:无限次*/
}
.heart div {
width: 100%;
height: 100%;
position: absolute;
background: #f00;
animation-name: shadow;
animation-duration: 0.5s;
animation-iteration-count: infinite;
}
.topLeft,.topRight {
border-radius: 100px 100px 0 0;/*div左右的圆度*/
}
.topLeft {
transform: translate(-50px,0) rotate(-45deg);
/*transform：该属性允许我们对元素进行旋转、缩放、移动或倾斜。
translate:移动位置，rotate:旋转角度。*/
}
.topRight {
transform: translate(50px,0) rotate(45deg);
}
.bottom {
transform: translate(0,64px) rotate(45deg) scale(.9,.9);/*scale:定义 2D 缩放转换。*/
}
/*定义动画*/
@keyframes shake {
from {
transform:scale(.9,.9);
}
to {
transform:scale(1.1,1.1);
}
}
@keyframes shadow {
from {
}
to {
box-shadow:0px 0px 50px red;/*阴影*/
}
}
