css3 实现心跳
【摘要】 原文链接源代码 效果预览 先实现一个正方形,然后旋转实现,实现心的下半部分//预设一个div<div class="heart"> </div>.heart { //这里模拟心跳的动画,后面会写 animation: beat 1s infinite; -webkit-animation: beat 1s infinite; //宽为200...
原文链接
效果预览
先实现一个正方形,然后旋转实现,实现心的下半部分
//预设一个div
<div class="heart">
</div>
.heart {
//这里模拟心跳的动画,后面会写
animation: beat 1s infinite;
-webkit-animation: beat 1s infinite;
//宽为200px
width: 200px;
//高为200px
height: 200px;
//背景颜色
background-color: #f00;
// 添加阴影
filter:drop-shadow(0px 0px 20px rgb(255,20,20));
//选装45度制作心尖
transform: rotate(45deg);
// 往下往左各移动200px
position: relative;
top: 200px;
left: 200px;
}
在正方形上加圆,实现心
//使用::before和::after
.heart::before,
.heart::after {
content: "";
//与正方行为参照。必须写。具体的位置,分开写,见下。
position: absolute;
//宽和高都为200px;保证和正方型重叠的部分大小一致。
width: 200px;
height: 200px;
//设置弧度为100px,实现圆
border-radius: 100px;
background-color: #f00;
}
// 设置位置
.heart:before {
left: -100px;
}
// 设置位置
.heart::after {
left: 0px;
top: -100px;
}
添加动画
@keyframes beat {
0% {
//注意这里一定要加上rotate(45deg),不加的话,会默认不旋转
transform: rotate(45deg) scale(0.8, 0.8);
// 设置透明度
opacity: 1;
}
25% {
transform: rotate(45deg) scale(1, 1);
opacity: 0.8;
}
100% {
transform: rotate(45deg) scale(0.8, 0.8);
opacity: 1;
}
}
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)