使用css3画爱心并完成类似跳动效果

使用到的技术分别为：定位、位移、缩放和动画

  <style>body {transform-style: preserve-3d;}.box {position: relative;margin: 200px auto;width: 100px;height: 100px;background-color: red;transform: rotate(45deg);animation: move .5s infinite alternate;}/* 鼠标移入暂停动画 */.box:hover {animation-play-state: paused;}/* 此处用子绝父相是为了让子元素依照父元素旋转后的坐标进行移动 */.box::before,.box::after {position: absolute;top: 0;left: 0;content: '';width: 100%;height: 100%;border-radius: 50%;background-color: red;}.box::before {transform: translateX(-50%);}.box::after {transform: translateY(-50%);}@keyframes move {to {transform: rotate(45deg) scale(1.8);}}</style>
</head><body><div class="box"></div>
</body>

添加动画时别忘记添加上旋转，因为前面的box盒子是旋转了45°的，如果在动画里不加进去就会因为层叠性导致后面的transform把前面的覆盖，导致爱心的动画效果时歪着放大缩小的。

完成后效果图如下：

爱心跳动效果

使用css3画爱心并完成类似跳动效果相关推荐

Python画爱心——一颗会跳动的爱心~
给你的Ta一个惊喜吧~ 今天给大家分享一个浪漫小技巧,利用Python中的HTML制作一个立体会动的心动小爱心备注"心动爱心领取"腾讯文档-在线文档https:// ...
如何用c语言画个叮当猫,如何使用CSS3画出一个叮当猫
刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接 ...
css3实现科技感的呼吸灯效果
呼吸灯效果是一种常见的灯光效果,比如网页的按钮,现实生活中比如电脑的开机按钮. 使用CSS3的animation方法可以实现很多迷人的网页动画特效. 使用CSS3 配合box-shadow即可实现类似 ...
html怎么让爱心闪动,css画爱心并实现“爱心跳动”
第一次写博客,来记录自己在前端上的成长,并且希望能够借鉴到其他大神的经验来提高自己的水平.这次打算用css来画一个爱心并实现"爱心跳动"的功能,下面如果有表述不正确的叙述,欢迎各位 ...
纯CSS3画出小黄人并实现动画效果
前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
html音乐跳动的线,利用CSS3制作跳动音乐频谱跳动效果
[摘要] CSS3新增很多实用的属性,特别是可以实现动画效果的animation属性,本文通过使用CSS3来实现一个类似于音乐频谱跳动效果. 在一个网站上看到"直播中"的提示标题, ...
python matplotlib画爱心
python matplotlib画爱心 import matplotlib.pyplot as plt import numpy as np# 创建可以返回心形函数表达式的函数def f(x, y) ...
css 画小黄人,纯CSS3画出小黄人并实现动画效果
前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
html设计动画小黄人,纯CSS3画出小黄人并实现动画效果_html/css_WEB-ITnose
原文出处: 郭锦荣前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效 ...

使用css3画爱心并完成类似跳动效果

使用css3画爱心并完成类似跳动效果相关推荐

最新文章

热门文章