怎样应用html5与css3进行google涂鸦动漫

日期:2021-02-26 类型:科技新闻 

关键词:自助建站免费建站平台,网站的建设服务,自助建站平台,如何自己建网站,怎么建设网站

今日大家将详细介绍,怎样应用css3进行google涂鸦动漫。当你点一下demo网页页面的【刚开始】按钮以后,网页页面中的骑手和马匹可能健身运动起来,http://demo.jb51.net/js/2012/googlecss3/
  这里必须强调的1点是,ie不适用css3的动漫特性,再度埋怨下万恶的ie。可是大家不可以以此为理由不去拥抱css3。
  大家先看来html编码。

拷贝编码
编码以下:

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/google-doodle-animation-in-css3-without-javascript.css"/>
</head>
<body>
<div id="logo">
<div class="frame">
<img src="img/muybridge12-hp-v.png"/>
</div>
<label for="play_button" id="play_label"></label>
<input type="checkbox" id="play_button" name="play_button"/>
<span id="play_image">
<img src="img/muybridge12-hp-p.jpg"/>
</span>
<div class="horse"></div>
<div class="horse"></div>
<div class="horse"></div>
</div>
</body>
</html>

下面是一部分css。

拷贝编码
编码以下:

*{margin:0px;padding:0px;}
#logo{position: relative;}
.horse{
width:469px;
height:54px;
background: url('../img/muybridge12-hp-f.jpg');
}
.frame{position:absolute;left:0;top:0;z-index: 1;}
#play_button{display: none;}
#play_label{
width:67px;
height:54px;
display:block;
position: absolute;
left:201px;
top:54px;
z-index: 2;
}
#play_image{
position: absolute;
left:201px;
top:54px;
z-index: 0;
overflow: hidden;
width: 68px;
height: 55px;
}
#play_image img{
position: absolute;
left: 0;
top: 0;
}

这一部分编码没太大难度,我就不做详尽解读了。css基本并不是很扎实的读者,或许会疑虑【刚开始】按钮是怎样完成精准定位的。能够自主阅读文章position特性,掌握absolute实际功效。
  下面是上述html和css编码进行的网页页面实际效果。
pic
下面大家来详细介绍怎样造成动漫实际效果。大家最先必须界定重要帧,他要求动漫在不一样环节的实际效果。大伙儿能够根据http://www.w3schools.com/css3/css3_animations.asp 掌握更多信息内容。
  大家建立了1个名为horse-ride的重要帧,对于chrome和firefox必须在前面加上-webkit-或是-moz-前缀。0%和100%各自编码刚开始和完毕,能够依据必须提升新的case,例如50%时的动漫实际效果。

拷贝编码
编码以下:

@-webkit-keyframes horse-ride {
% {background-position: 0 0;}
% {background-position: ⑻04px 0;}
}
@-moz-keyframes horse-ride {
% {background-position: 0 0;}
% {background-position: ⑻04px 0;}
}

下面,大家来为horse加上css3的动漫实际效果。

拷贝编码
编码以下:

#play_button:checked ~.horse{
-webkit-animation:horse-ride 0.5s steps(12,end) infinite;
-webkit-animation-delay:2.5s;
-moz-animation:horse-ride 0.5s steps(12,end) infinite;
-moz-animation-delay:2.5s;
background-position: ⑵412px 0;
-webkit-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
-moz-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

这里最先详细介绍:checked和~,:checked是伪类,指当#play_button选定时的css实际效果,~指的是#play_button的弟兄连接点。
  接下来详细介绍.horse有关的css特性。animation中大家应用了4个值,先后意味着:重要帧(大家上面界定的horse-ride),动漫间距時间,动漫实际效果和实行次数。以后大家又根据animation-delay设定动漫延迟时间時间。根据transition和background-position结合起来,设定情况的过渡动漫。
  最终大家为【刚开始】按钮加上动漫实际效果。

拷贝编码
编码以下:

#play_button:checked ~#play_image img{
left:⑹8px;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
}

大伙儿能够自身动手能力尝试开发设计了。
  demo免费下载详细地址:google-doodle-animation-in-css3-without-javascript.zip今日大家将详细介绍,怎样应用css3进行google涂鸦动漫。当你点一下demo网页页面的【刚开始】按钮以后,网页页面中的骑手和马匹可能健身运动起来,http://www.mycookingroom.com/demo/google-doodle-animation-in-css3-without-javascript.html。
  这里必须强调的1点是,ie不适用css3的动漫特性,再度埋怨下万恶的ie。可是大家不可以以此为理由不去拥抱css3。
  大家先看来html编码。

拷贝编码
编码以下:

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/google-doodle-animation-in-css3-without-javascript.css"/>
</head>
<body>
<div id="logo">
<div class="frame">
<img src="img/muybridge12-hp-v.png"/>
</div>
<label for="play_button" id="play_label"></label>
<input type="checkbox" id="play_button" name="play_button"/>
<span id="play_image">
<img src="img/muybridge12-hp-p.jpg"/>
</span>
<div class="horse"></div>
<div class="horse"></div>
<div class="horse"></div>
</div>
</body>
</html>

下面是一部分css。

拷贝编码
编码以下:

*{margin:0px;padding:0px;}
#logo{position: relative;}
.horse{
width:469px;
height:54px;
background: url('../img/muybridge12-hp-f.jpg');
}
.frame{position:absolute;left:0;top:0;z-index: 1;}
#play_button{display: none;}
#play_label{
width:67px;
height:54px;
display:block;
position: absolute;
left:201px;
top:54px;
z-index: 2;
}
#play_image{
position: absolute;
left:201px;
top:54px;
z-index: 0;
overflow: hidden;
width: 68px;
height: 55px;
}
#play_image img{
position: absolute;
left: 0;
top: 0;
}

这一部分编码没太大难度,我就不做详尽解读了。css基本并不是很扎实的读者,或许会疑虑【刚开始】按钮是怎样完成精准定位的。能够自主阅读文章position特性,掌握absolute实际功效。
  下面是上述html和css编码进行的网页页面实际效果。
pic
下面大家来详细介绍怎样造成动漫实际效果。大家最先必须界定重要帧,他要求动漫在不一样环节的实际效果。大伙儿能够根据http://www.w3schools.com/css3/css3_animations.asp 掌握更多信息内容。
  大家建立了1个名为horse-ride的重要帧,对于chrome和firefox必须在前面加上-webkit-或是-moz-前缀。0%和100%各自编码刚开始和完毕,能够依据必须提升新的case,例如50%时的动漫实际效果。

拷贝编码
编码以下:

@-webkit-keyframes horse-ride {
% {background-position: 0 0;}
% {background-position: ⑻04px 0;}
}
@-moz-keyframes horse-ride {
% {background-position: 0 0;}
% {background-position: ⑻04px 0;}
}

下面,大家来为horse加上css3的动漫实际效果。

拷贝编码
编码以下:

#play_button:checked ~.horse{
-webkit-animation:horse-ride 0.5s steps(12,end) infinite;
-webkit-animation-delay:2.5s;
-moz-animation:horse-ride 0.5s steps(12,end) infinite;
-moz-animation-delay:2.5s;
background-position: ⑵412px 0;
-webkit-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
-moz-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

这里最先详细介绍:checked和~,:checked是伪类,指当#play_button选定时的css实际效果,~指的是#play_button的弟兄连接点。
  接下来详细介绍.horse有关的css特性。animation中大家应用了4个值,先后意味着:重要帧(大家上面界定的horse-ride),动漫间距時间,动漫实际效果和实行次数。以后大家又根据animation-delay设定动漫延迟时间時间。根据transition和background-position结合起来,设定情况的过渡动漫。
  最终大家为【刚开始】按钮加上动漫实际效果。

拷贝编码
编码以下:

#play_button:checked ~#play_image img{
left:⑹8px;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
}

大伙儿能够自身动手能力尝试开发设计了。
  demo免费下载详细地址:http://xiazai.jb51.net/201212/yuanma/googlecss3_jb51.rar