又来刷题--CSS动画实现跳动的桃心,从哪里跌倒就从哪里爬起来,哈哈哈~

分析:首先,得画出一个桃心,然后再用动画效果让它跳起来(关于动画,实在是弱项啊~~~,得补补了)。

第一步:画桃心,思路是一个正方形+两个半圆,拼起来,然后旋转45度(百度告诉我的,嘿嘿)

1.用CSS绘制一个正方形+两个半圆

画正方形、圆、半圆可以参考这篇文章 https://blog.csdn.net/lzgs_4/article/details/46827761

 .heart {
height: 100px;
width: 100px;
background-color: red;
display: inline-block;
}
.semicircle-horizontal {
border-radius: 100px 100px 0 0;
height: 50px;
}
.semicircle-vertical {
border-radius: 100px 0 0 100px;
width: 50px;
} <article class="wrapper">
<div class="heart semicircle-vertical"></div>
<div class="heart"></div>
<div class="heart semicircle-horizontal"></div>
</article>

  依次画出这三个图形后发现它们之间有间隔,检查了margin,发现是0,所以又求助百度,这个是解决方法https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/

2. 调整位置,将三个图形拼起来

.wrapper {
font-size: 0; /*去除inline-block各元素之间的间距*/
}
.semicircle-horizontal {
border-radius: 100px 100px 0 0;
height: 50px;
margin-bottom: 100px; /*调整位置*/
margin-left: -100px;
}

  这是拼起来的效果,再旋转45度就完成桃心了。

3.旋转45度,把桃心放正

 .wrapper {
font-size: 0; /*去除inline-block各元素之间的间距*/
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}

  效果图

第二步、实现动画效果,用transfrom:scale() 实现

演示地址:https://codepen.io/jessy90/pen/BVOQLX

CSS实现跳动的桃心的更多相关文章

  1. 纯CSS制作“跳动的心”demo

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  2. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  3. 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动

    原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽 ...

  4. 小tip:纯CSS让overflow:auto页面滚动条出现时不跳动

    本文转载于张鑫旭博客,原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水 ...

  5. CSS设计之页面滚动条出现时防止页面跳动的方法

    一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽度,然后margin: 0 auto的节奏~ 例如,大淘宝的首页: 然而,这种布局有一个存在一个影 ...

  6. css动画-音频跳动

    css动画-音频跳动 ---------------------------------------------------------------------------- ------------ ...

  7. css动画--元素上下跳动

    在H5场景动画时,常常会用到着一样一个效果,箭头持续上下跳动来引导用户上下滑动整个页面 <!DOCTYPE html > <html> <head> <met ...

  8. 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动——张鑫旭

    小tip:CSS vw让overflow:auto页面滚动条出现时不跳动 这篇文章发布于 2015年01月25日,星期日,23:08,归类于 css相关. 阅读 46274 次, 今日 91 次 by ...

  9. 纯CSS让overflow:auto页面滚动条出现时不跳动

    现代浏览器滚动条默认是overflow:auto类型的,也就是如果尺寸不足一屏,没有滚动条:超出,出现滚动条.于是,问题来了: 信息流页面,如新浪微博,是从上往下push渲染的.开始只有头部一些信息加 ...

随机推荐

  1. mysql之SQL入门与提升(四)——终结篇,函数

    一.SQL Aggregate (聚合)函数 SQL Aggregate 函数计算从列中取得的值,返回一个单一的值. AVG() - 返回平均值 COUNT() - 返回行数 FIRST() - 返回 ...

  2. kali 装好java后提示 -bash: /home/javainstall/jdk1.8.0_171/bin/java: 没有那个文件或目录

    [问题现象] 在/etc/profile配置里面也是配置好了的,并且该目录是有java的 [问题原因] 出现这个问题的原因:64位的系统,安装了32位的Java. [解决方案] 通过网络搜索,发现通过 ...

  3. physics(2018.10.27)

    这道题可以推出\(O(1)\)的算法,但是实际上暴力模拟就可以过了. 代码(暴力模拟): #include<cstdio> #include<algorithm> #inclu ...

  4. PostgreSQL-8-数据合并

    -- 1.JOIN与UNION的区别详解 CREATE TABLE t1(id int,value1 text); ,,,'c'); -- 创建表格t1 CREATE TABLE t2(id int, ...

  5. python基本的数据类型

    一.python的基本数据类型 int => 整数,主要用来进行数学运算 str ==> 字符串 可以用来保存少量数据并进行相应操作 bool ==> 判断真假,True,False ...

  6. CentOS7下使用Docker容器化.net Core 2.2

    一.使用 yum 安装(CentOS 7下) Docker 要求 CentOS 系统的内核版本高于 3.10 ,查看本页面的前提条件来验证你的CentOS 版本是否支持 Docker . 通过 una ...

  7. centos安装openldap过程

    1.下载软件如下,db是数据库 2.首先安装数据库db # tar xf db-4.8.30.tar.gz # cd db-4.8.30 # cd build_unix/ (# ../dist/con ...

  8. Lock简介

    digest synchronized已经提供了锁的功能,而且还是Java的内置特性,那为什么还要出现lock呢? 用一句话来讲就是——synchronized可以实现同步,但太死板了它的同步机制:l ...

  9. IE如何实现text-shadow文字阴影效果呢?

    让我们头痛的是IE是不支持text-shadow效果,但为了在兼容这一问题,我们只好使用滤镜filter:shadow来处理(本人不提倡使用滤镜).filter:shadow滤镜作用与dropshad ...

  10. Java-IDEA环境搭建swagger

    1.项目POM导入包(使用Maven管理的代码) 2.POM文件导入包 <dependencyManagement> <dependencies> <dependency ...