CSS动画实现跳动小红心

如何利用CSS简单实现一个跳动的小红心呢？

请看下文，简要分为三个步骤：

1、首先定义3个div。

2、调整div的距离和形状。

3、增加阴影和实现动画功能。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>body{background-color:#ffa5a5 ;}.cen{width: 200px;height: 200px;background-color: #d5093c;box-shadow: 0px 0px 70px #D5093C;animation: 1s aj infinite;}.lef{border-radius: 100px;position: absolute;top:200px;left: 300px;}.c{transform: rotate(45deg);position: absolute;top:275px;left: 375px;                }.rig{border-radius: 100px;position: absolute;top:200px;left: 450px;}@keyframes aj{0%{transform: scale(1)rotate(45deg);}50%{transform: scale(1.1)rotate(45deg);}100%{transform: scale(1)rotate(45deg);}}</style></head><body><div class="cen lef" ></div><div class="cen c"></div><div class="cen rig"></div></body>
</html>

CSS动画实现跳动小红心相关推荐

HTML+CSS制作七夕跳动的红心动画效果
HTML+CSS制作七夕跳动的红心动画效果效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">< ...
css动画实现跳动的小人
跳动的小女孩图片原尺寸为1260x300,小女孩在某时刻的宽度为180px,同一时刻其他位置的小女孩隐藏. 使用动画设置运动方式,每次显示一个位置的宽度 <!DOCTYPE html> ...
【疯狂世界杯】css 动画实现跳动的足球
HTML中的动画起名字,css动画
css动画首先要明白动画是一帧一帧的,由多个帧拼起来的动画 @keyframes 此为动画样式中的关键帧,用关键帧来控制css动画中的关键样式.相比较过渡更加的容易空值中间的部分其指示了一个过程到 ...
css 跳跃动画,CSS动画实例：跳跃的字符
1．翻转的字符在页面中放置一个类名为container的层作为容器,在该层中放置5个字符区域,HTML代码描述如下: H E L L O 为container和span定义CSS样式规则,并定义实现 ...
HTML+css实操（二）小红心
HTML+css实操(二) 一颗小红心: CSS3中常用的属性: /*倒圆角指令*/border-radius: 100px;/* 左上右下右上左下 *//*border-radius:10px 6 ...
css 语音,用css完成语音助手小动画
用css完成语音助手小动画 2020年08月10日 | 萬仟网IT编程 | 我要评论震惊!用css完成语音助手小动画不要太简单!语音助手动画定位布局添加动画语音助手动画hello大家好,我是Aaro ...
css实现旋转的小流星动画
效果如下: 完整代码如下 : <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
css精灵列表使用实例,介绍一个导出CSS精灵图动画的AE小脚本
作者:李威在H5项目中如果有动画需求,一个常见的流程是设计师用 After Effect 制作动画,然后导出为序列帧. 序列帧就是一张张图片,快速连续播放就能成为动画,但是在H5里直接播放序列帧对网 ...

CSS动画实现跳动小红心

CSS动画实现跳动小红心相关推荐

最新文章

热门文章