跳动的红心
程序员文章站
2022-03-10 23:14:44
出次学习尝试圆角属性: border-radius四个值 top-left top-right bottom-right bottom-left;(注:当四个值缺少某一个值的时候,由对立面的值进行补充)平移 transform:translate(x,y)x 表示水平方向移动y 表示垂直方向移动旋转 transform:rotate(角度)deg 角度单位 0-360deg缩放 transform:scale(x,y)x 表示的水平方向的缩放y...
初次学习尝试
圆角属性: border-radius
- 四个值 top-left top-right bottom-right bottom-left;
(注:当四个值缺少某一个值的时候,由对立面的值进行补充)
平移 transform:translate(x,y)
- x 表示水平方向移动
- y 表示垂直方向移动
旋转 transform:rotate(角度)
- deg 角度单位 0-360deg
缩放 transform:scale(x,y)
-
x 表示的水平方向的缩放
-
y 表示的垂直方向的缩放
-
1 表示原图形大小,不缩放
-
比1小 缩小
-
比1大 放大
关键帧动画
-
创建动画
- @keyframes
@keyframes 动画名称{ 0%{} /*动画的起始状态*/ ... 100%{} /*动画的完成状态*/ }
-
调用动画 animation
animation: 动画名称 完成动画的时间(s/ms) 曲线速度 延迟时间 动画播放的次数 是否反向;
- 动画名称 自定义
- 动画的时间 s/ms
- 曲线速度 ease-in-out 慢入慢出 linear 匀速
- 延迟时间 s/ms
- 动画播放的次数 number/infinite无限次
- 是否反向 alternate
思路
红心由两个圆一个正方形拼接而成,将红心整体放入一个大的div中,动画效果在大的div中实现
代码实现
css样式部分
<style>
.wrap{
width: 80px;
height: 80px;
/* 调用动画 动画名称 完成动画的时间 曲线速度 动画播放次数 是否反向*/
animation: scale 0.5s linear infinite alternate;
}
.circle{
background-color: red;
width: 80px;
height: 80px;
border-radius: 50%;
}
.two{
transform: translate(52px,-78px);
}
.square{
background-color: red;
width: 80px;
height: 80px;
/*旋转 平移*/
transform: rotate(49deg) translate(-85px,-105px);
}
@keyframes scale{ /*创建动画*/
0%{
transform: scale(1); /*缩放transform:scale(x,y) x 表示的水平方向的缩放,y 表示的垂直方向的缩放*/
} /*1 表示原图形大小,不缩放*/
100%{
transform: scale(0.8);/*比1小 缩小, 比1大 放大 */
}
}
</style>
body部分
<div class="wrap">
<div class="circle one"></div>
<div class="circle two"></div>
<div class="square"></div>
</div>
本文地址:https://blog.csdn.net/weixin_48291770/article/details/107490526