CSS3教程

当前位置: HTML5技术网 > CSS3教程 > 纯CSS仿制Google女生节Doodle

纯CSS仿制Google女生节Doodle

     喜欢google的女生节Doodle吗,试着自己用纯css仿制了一个,送给老妈、老婆、女儿的特别礼物。

    大家可以点这里在线观看效果,点这里下载收藏效果。

    实现原理

1.利用checkbox侦听处理单击事件。

2.单击按钮、花、背景分别作盒子,公用背景并作背景偏移。

3.单击按钮之后,利用:checked伪类和兄弟选择符,为花、背景盒子作动画。

下面来看html:

  1. <input type="checkbox" id="play" />  
  2. <div id="cont">  
  3.   <label id="btn" for="play"></label>  
  4.   <div id="circle"></div>  
  5. </div>  

css文件,具体参见注释。

1./* 设置容器 */ 
2.#cont{ 
3.  width:482px; 
4.  height:250px; 
5.  background:url("http://www.google.com/logos/2014/womensday14/sprite-initial.png"); 
6.  background-position:-20px -10px; 
7.  position:absolute; 
8.  left:50%; 
9.  top:50%; 
10.  margin:-125px 0 0 -241px; 
11.} 
12./* 设置按钮 */ 
13.#btn{ 
14.  width:60px; 
15.  height:78px; 
16.  position:absolute; 
17.  left:204px; 
18.  top:64px; 
19.  background:url("http://www.google.com/logos/2014/womensday14/sprite-initial.png"); 
20.  background-position:-1495px -110px;  
21.  /* 确保垂直层次在#circle上面 */ 
22.  z-index:10; 
23.} 
24.#circle{ 
25.  /* 初始状态下,花不显示 */ 
26.  opacity:0; 
27.  width:79px; 
28.  height:79px; 
29.  position:absolute; 
30.  top:60px; 
31.  left:184px; 
32.  background:url("http://www.google.com/logos/2014/womensday14/sprite-initial.png"); 
33.  background-position:-1495px -190px; 
34.  z-index:1; 
35.} 
36./* hover状态下按钮样式 */ 
37.#btn:hover{ 
38.  cursor:pointer; 
39.  background-position:-1495px -30px; 
40.} 
41./* 单击之后,按钮隐藏 */ 
42.#play:checked~#cont #btn{ 
43.  display:none; 
44.} 
45./* 单击之后,花显示,并轮转 */ 
46.#play:checked~#cont #circle{ 
47.  opacity:1; 
48.  animation:roll 1.8s linear infinite; 
49.} 
50./* 单击之后,背景动画,这里偷了个懒,真比较少,注意一定是steps动画效果 */ 
51.#play:checked~#cont{ 
52.  animation:run 1.2s steps(1,end) infinite; 
53.} 
54.@keyframes run{ 
55.  0%{background-position:-20px -10px;} 
56.  33%{background-position:-521px -10px;} 
57.  66%{background-position:-1012px -10px;} 
58.  100%{background-position:-20px -10px;} 
59.} 
60.@keyframes roll{ 
61.  0%{transform:rotate(0deg)} 
62.  100%{transform:rotate(360deg)} 
63.} 

【纯CSS仿制Google女生节Doodle】相关文章

1. 纯CSS仿制Google女生节Doodle

2. 纯CSS仿制Google女生节Doodle

3. Google七夕情人节Doodle背后技术揭秘

4. 创世纪( Doodle God)

5. LESS-Middleware:Node.js 和 LESS 的完美搭配

6. 谷歌将整合其博客平台Blogger与Google+服务

7. 谷歌推出给予HTML5技术的网页版Google Catalogs功能

8. 一款CSS3仿Google Play的垂直菜单

9. Facebook活跃用户正转向Twitter和Google+等服务

10. Google+是工具 Facebook是玩具

本文来源:https://www.51html5.com/a998.html

点击展开全部

﹝纯CSS仿制Google女生节Doodle﹞相关内容

「纯CSS仿制Google女生节Doodle」相关专题

其它栏目

也许您还喜欢