用html加css做一个心脏跳动的页面的代码

html-css010

用html加css做一个心脏跳动的页面的代码,第1张

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>HTML5爱心跳动动画DEMO演示</title>

<style>

@import url(http://fonts.googleapis.com/css?family=Inconsolata:400,700)

@import url(http://fonts.googleapis.com/css?family=Hammersmith+One)

body {

background-color: #ccc

}

.container {

width: 512px

height: 380px

margin: auto

margin-top: 0

}

.heart {

z-index: 1

width: 150px

height: 150px

position: absolute

top: 50%

margin-top: -75px

left: 50%

margin-left: -75px

background-size: 100%

background-repeat: no-repeat

background-image:url("data:image/svg+xmlbase64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjE3M3B4IiBoZWlnaHQ9IjE1OHB4IiB2aWV3Qm94PSIwIDAgMTczIDE1OCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTczIDE1OCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBmaWxsPSIjRUY0NjU3IiBkPSJNMTU3LjMzMSwxNS41MDRjLTE5LjU1OS0xOS41NTktNTEuMjcxLTE5LjU1OS03MC44MzEsMGMtMTkuNTU5LTE5LjU1OS01MS4yNzEtMTkuNTU5LTcwLjgzMSwwDQoJYy0xOS41NTksMTkuNTU5LTE5LjU1OSw1MS4yNzEsMCw3MC44MzFsNzAuODMxLDcwLjgzbDcwLjgzMS03MC44M0MxNzYuODksNjYuNzc1LDE3Ni44OSwzNS4wNjQsMTU3LjMzMSwxNS41MDR6Ii8+DQo8L3N2Zz4=")

}

.hometown {

font-family:'Inconsolata', sans-serif

font-weight: bold

font-size: 2.0em

text-transform: uppercase

position: relative

z-index: 1

width: 512px

height: 512px

color: #FFF

}

#top {

width: 200px

margin: auto

position: relative

}

#top span {

height: 350px

position: absolute

width: 20px

left: 50%

margin-left: -10px

top: 110px

}

.char1 {

transform: rotate(-36deg)

}

.char2 {

transform: rotate(-24deg)

}

.char3 {

transform: rotate(-12deg)

}

.char4 {

transform: rotate(0deg)

}

.char5 {

transform: rotate(12deg)

}

.char6 {

transform: rotate(24deg)

}

.char7 {

transform: rotate(36deg)

}

#bottom span {

height: 350px

line-height: 700px

position: absolute

width: 20px

left: 50%

margin-left: -10px

top: 10px

}

#bottom .char1 {

transform: rotate(36deg)

}

#bottom .char2 {

transform: rotate(27deg)

}

#bottom .char3 {

transform: rotate(18deg)

}

#bottom .char4 {

transform: rotate(9deg)

}

#bottom .char5 {

transform: rotate(0deg)

}

#bottom .char6 {

transform: rotate(-9deg)

}

#bottom .char7 {

transform: rotate(-18deg)

}

#bottom .char8 {

transform: rotate(-27deg)

}

#bottom .char9 {

transform: rotate(-36deg)

}

.city {

font-family:"Hammersmith One"

display: inline-block

width: 100%

height: 300px

padding-top: 45px

text-align: center

font-size: 3.0em

z-index: 100

position: absolute

top: 50%

margin-top: -110px

}

.heart {

animation: HEARTBEAT 2.5s infinite

}

#top span {

animation: BOUNCE 2.5s infinite

}

@keyframes HEARTBEAT {

0% {

transform: scale(1)

}

5% {

transform: scale(1.3)

}

10% {

transform: scale(1.1)

}

15% {

transform: scale(1.5)

}

50% {

transform: scale(1)

}

100% {

transform: scale(1)

}

}

@keyframes BOUNCE {

0% {

top: 110px

}

10% {

top: 80px

}

15% {

top: 85px

}

20% {

top: 70px

}

75% {

top: 110px

}

100% {

top: 110px

}

}

</style>

<script src="js/prefixfree.min.js"></script>

</head>

<body>

<div class="container bg">

<div class="hometown">

<div class="heart">

</div>

<div id="top">Made in</div>

<div class="city">Boise</div>

<div id="bottom">With love</div>

</div>

</div>

<div style="text-align:centerclear:both">

<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>

<script src="/follow.js" type="text/javascript"></script>

</div>

<script src='js/jquery.js'></script>

<script src='js/jquery.lettering.js'></script>

<script src="js/index.js"></script>

</body>

</html>

js部分

一、准备工作

进入到 /home/shiyanlou/ 目录下,新建空白文档:

命名为 Baymax.html (其它名字也可以,但后缀名必须是 .html):

使用 gedit 打开,准备编辑代码:

二、编写 HTML

填写以下代码:

<!doctype html>

<html>

<head><meta charset="utf-8"><title>Baymax</title></head>

<body>

<div id="baymax">

<!-- 定义头部,包括两个眼睛、嘴 -->

<div id="head">

<div id="eye"></div>

<div id="eye2"></div>

<div id="mouth"></div>

</div>

<!-- 定义躯干,包括心脏 -->

<div id="torso">

<div id="heart"></div>

</div>

<!-- 定义肚子腹部,包括 cover(和躯干的连接处) -->

<div id="belly">

<div id="cover"></div>

</div>

<!-- 定义左臂,包括一大一小两个手指 -->

<div id="left-arm">

<div id="l-bigfinger"></div>

<div id="l-smallfinger"></div>

</div>

<!-- 定义右臂,同样包括一大一小两个手指 -->

<div id="right-arm">

<div id="r-bigfinger"></div>

<div id="r-smallfinger"></div>

</div>

<!-- 定义左腿 -->

<div id="left-leg"></div>

<!-- 定义右腿 -->

<div id="right-leg"></div>

</div>

</body>

<html>

三、添加 CSS 样式

我们已经使用 HTML 定义好「大白」的各个元素,现在就需要利用到 CSS 来绘制它的样式外表。

由于「大白」是白色的,为了更容易辨识,我们把背景设为深色。

然后首先是头部:

body {

background: #595959

}

#baymax{

/*设置为 居中*/

margin: 0 auto

/*高度*/

height: 600px

/*隐藏溢出*/

overflow: hidden

}

#head{

height: 64px

width: 100px

/*以百分比定义圆角的形状*/

border-radius: 50%

/*背景*/

background: #fff

margin: 0 auto

margin-bottom: -20px

/*设置下边框的样式*/

border-bottom: 5px solid #e0e0e0

/*属性设置元素的堆叠顺序;拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/

z-index: 100

/*生成相对定位的元素*/

position: relative

}

效果预览:

赶紧再来添加眼睛和嘴吧!

#eye,

#eye2{

width: 11px

height: 13px

background: #282828

border-radius: 50%

position: relative

top: 30px

left: 27px

/*旋转该元素*/

transform: rotate(8deg)

}

#eye2{

/*使其旋转对称*/

transform: rotate(-8deg)

left: 69px top: 17px

}

#mouth{

width: 38px

height: 1.5px

background: #282828

position: relative

left: 34px

top: 10px

}

一个 mini 的「大白」,雏形初现:

接下来是躯干和腹部:

#torso,

#belly{

margin: 0 auto

height: 200px

width: 180px

background: #fff

border-radius: 47%

/*设置边框*/

border: 5px solid #e0e0e0

border-top: none

z-index: 1

}

#belly{

height: 300px

width: 245px

margin-top: -140px

z-index: 5

}

#cover{

width: 190px

background: #fff

height: 150px

margin: 0 auto

position: relative

top: -20px

border-radius: 50%

}

赋予「大白」象征生命的心脏:

#heart{

width:25px

height:25px

border-radius:50%

position:relative

/*向边框四周添加阴影效果*/

box-shadow:2px 5px 2px #ccc inset

right:-115px

top:40px

z-index:111

border:1px solid #ccc

}

现在的「大白」是这个样子的了:

还没有手和脚,怪萌怪萌的...「大白」需要温暖的手臂:

#left-arm,

#right-arm{

height: 270px

width: 120px

border-radius: 50%

background: #fff

margin: 0 auto

position: relative

top: -350px

left: -100px

transform: rotate(20deg)

z-index: -1

}

#right-arm{

transform: rotate(-20deg)

left: 100px

top: -620px

}

还没有手指头呢:

#l-bigfinger,

#r-bigfinger{

height: 50px

width: 20px

border-radius: 50%

background: #fff

position: relative

top: 250px

left: 50px

transform: rotate(-50deg)

}

#r-bigfinger{

left: 50px

transform: rotate(50deg)

}

#l-smallfinger,

#r-smallfinger{

height: 35px

width: 15px

border-radius: 50%

background: #fff

position: relative

top: 195px

left: 66px

transform: rotate(-40deg)

}

#r-smallfinger{

background: #fff

transform: rotate(40deg)

top: 195px

left: 37px

}

有点意思了:

迫不及待要给「大白」加上腿了吧:

#left-leg,

#right-leg{

height: 170px

width: 90px

border-radius: 40% 30% 10px 45%

background: #fff

position: relative

top: -640px

left: -45px

transform: rotate(-1deg)

z-index: -2

margin: 0 auto

}

#right-leg{

background: #fff

border-radius:30% 40% 45% 10px

margin: 0 auto

top: -810px

left: 50px

transform: rotate(1deg)

}

您最好对 HTML 和 CSS 有一定的了解

HTML代码

<div id="baymax">  

  

        <!-- 定义头部,包括两个眼睛、嘴 -->  

        <div id="head">  

            <div id="eye"></div>  

            <div id="eye2"></div>  

            <div id="mouth"></div>  

        </div>  

  

        <!-- 定义躯干,包括心脏 -->  

        <div id="torso">  

            <div id="heart"></div>  

        </div>  

  

        <!-- 定义肚子腹部,包括 cover(和躯干的连接处) -->  

        <div id="belly">  

            <div id="cover"></div>  

        </div>  

  

        <!-- 定义左臂,包括一大一小两个手指 -->  

        <div id="left-arm">  

            <div id="l-bigfinger"></div>  

            <div id="l-smallfinger"></div>  

        </div>  

  

        <!-- 定义右臂,同样包括一大一小两个手指 -->  

        <div id="right-arm">  

            <div id="r-bigfinger"></div>  

            <div id="r-smallfinger"></div>  

        </div>  

  

        <!-- 定义左腿 -->  

        <div id="left-leg"></div>  

  

        <!-- 定义右腿 -->  

        <div id="right-leg"></div>  

  

    </div>

背景颜色为灰色或者黑色,更容易衬托出大白

body {   

    background: #595959   

}   

  

#baymax{   

    /*设置为 居中*/       

    margin: 0 auto   

  

    /*高度*/      

    height: 600px   

  

    /*隐藏溢出*/       

    overflow: hidden   

}   

  

#head{   

    height: 64px   

    width: 100px   

  

    /*以百分比定义圆角的形状*/       

    border-radius: 50%   

  

    /*背景*/       

    background: #fff   

    margin: 0 auto   

    margin-bottom: -20px   

  

    /*设置下边框的样式*/       

    border-bottom: 5px solid #e0e0e0   

  

    /*属性设置元素的堆叠顺序;    拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/       

    z-index: 100   

  

    /*生成相对定位的元素*/       

    position: relative   

}

眼睛嘴巴的CSS

#eye,   

#eye2{   

    width: 11px   

    height: 13px   

    background: #282828   

    border-radius: 50%   

    position: relative   

    top: 30px   

    left: 27px   

  

    /*旋转该元素*/       

    transform: rotate(8deg)   

}   

  

#eye2{   

    /*使其旋转对称*/       

    transform: rotate(-8deg)   

    left: 69px    top: 17px   

}   

  

#mouth{   

    width: 38px   

    height: 1.5px   

    background: #282828   

    position: relative   

    left: 34px   

    top: 10px   

}

「大白」,雏形初现

接下来是躯干和腹部CSS:

#torso,   

#belly{   

    margin: 0 auto   

    height: 200px   

    width: 180px   

    background: #fff   

    border-radius: 47%   

  

    /*设置边框*/       

    border: 5px solid #e0e0e0   

    border-top: none   

    z-index: 1   

}   

  

#belly{   

    height: 300px   

    width: 245px   

    margin-top: -140px   

    z-index: 5   

}   

  

#cover{   

    width: 190px   

    background: #fff   

    height: 150px   

    margin: 0 auto   

    position: relative   

    top: -20px   

    border-radius: 50%   

}

「大白」象征生命的心脏

#heart{     

  width:25px    

  height:25px    

  border-radius:50%    

  position:relative    

  

  /*向边框四周添加阴影效果*/  

  box-shadow:2px 5px 2px #ccc inset    

  

  rightright:-115px    

  top:40px    

  z-index:111    

  border:1px solid #ccc   

}

「大白」的手臂

#left-arm,   

#right-arm{   

    height: 270px   

    width: 120px   

    border-radius: 50%   

    background: #fff   

    margin: 0 auto   

    position: relative   

    top: -350px   

    left: -100px   

    transform: rotate(20deg)   

    z-index: -1   

}   

  

#right-arm{   

    transform: rotate(-20deg)   

    left: 100px   

    top: -620px   

}

大白的手指头css

#l-bigfinger,   

#r-bigfinger{   

    height: 50px   

    width: 20px   

    border-radius: 50%   

    background: #fff   

    position: relative   

    top: 250px   

    left: 50px   

    transform: rotate(-50deg)   

}   

  

#r-bigfinger{   

    left: 50px   

    transform: rotate(50deg)   

}   

  

#l-smallfinger,   

#r-smallfinger{   

    height: 35px   

    width: 15px   

    border-radius: 50%   

    background: #fff   

    position: relative   

    top: 195px   

    left: 66px   

    transform: rotate(-40deg)   

}   

  

#r-smallfinger{   

    background: #fff   

    transform: rotate(40deg)   

    top: 195px   

    left: 37px   

}

「大白」腿部css

#left-leg,   

#right-leg{   

    height: 170px   

    width: 90px   

    border-radius: 40% 30% 10px 45%   

    background: #fff   

    position: relative   

    top: -640px   

    left: -45px   

    transform: rotate(-1deg)   

    z-index: -2   

    margin: 0 auto   

}   

  

#right-leg{   

    background: #fff   

    border-radius:30% 40% 45% 10px   

    margin: 0 auto   

    top: -810px   

    left: 50px   

    transform: rotate(1deg)   

}

完成