本来想多做几个了 无奈最近太忙 于是模仿做了一个在codepen看到的圣诞雪景球   算是送给自己的圣诞礼物

演示地址：http://www.qdfuns.com/notes/26668/d5e1776243f8272941de3e65dd094db2.html

想看原文的地址在这里http://codepen.io/chilliconcode/pen/rWpvOe

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>CSS动画圣诞雪景球</title>

     <embed src="age/sd.mp3" autostart="true" loop="-1" controls="ControlPanel" width="0" height="0">

 <style type="text/css">

 @charset "UTF-8";

 body{

     background:#4bb093;

 }

 ul,ol,li{

     list-style-type:none;

 }

 body,div,ul,li,p{ margin:0; padding:0;}

 img{border:0;}

 .snow_globe{

     width: 400px;

     height: 400px;

     margin:100px auto;

     position: relative;

 }

 .circular_white{

     width: 400px;

     height: 400px;

     border-radius:100%;

     position: absolute;

     background:rgba(255, 255, 255, 0.5);

 }

 .cir_cen{

     width: 380px;

     height: 380px;

     z-index: 3;

     margin-top: 10px;

     margin-left: 10px;

     display: inline-block;

     border-radius:100%;

     position: absolute;

     background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 68%, #f5f5f5 68%, #ebeff5 79%, #c7d7e0 100%);

 }

 .step{

     width: 356px;

     height: 40px;

     background: #fff;

     position: relative;

     top: 236px;

     border-radius: 100%;

     margin: auto;

 }

 .son_btm{

     width: 110px;

     height: 110px;

     margin:150px 0 0 135px;

     border-radius: 100%;

     position: absolute;

     background:#fff;

     box-shadow: -5px 10px 20px -10px #cccccc;

     z-index: 99;

 }

 .son_top{

     width: 80px;

     height: 80px;

     margin:90px 0 0 150px;

     border-radius: 100%;

     position: absolute;

     background:#fff;

     z-index: 99;

 }

 .eye{

     width: 6px;

     height: 6px;

     z-index:99;

     background:#613900;

     border-radius:100%;

     margin-top: 110px;

     margin-left: 170px;

     position: absolute;

 }

 .eye_2{

     width: 8px;

     height: 8px;

     z-index: 99;

     background: #613900;

     border-radius: 100%;

     margin-top: 108px;

     margin-left: 190px;

     position: absolute;

 }

 .nose{

     background-color: transparent;

     display: inline-block;

     position: absolute;

     top: 120px;

     left: 140px;

     border-top: 8px solid transparent;

     border-bottom: 8px solid transparent;

     border-right: 40px solid #f97d00;

     border-radius: 30px;

     z-index: 99;

 }

 .scarf{

     width: 70px;

     height: 10px;

     background-color: #ec4800;

     position: absolute;

     top: 150px;

     left: 155px;

     z-index: 99;

     transform: rotate(3deg);

     border-radius: 30%;

 }

 .scarf_2{

     width: 10px;

     height: 30px;

     background-color: #d34100;

     display: inline-block;

     position: absolute;

     top: 145px;

     left: 200px;

     z-index: 99;

     transform: rotate(-25deg);

     border-radius: 30%;

 }

 .hat{

 width: 100px;

     height: 15px;

     border-radius: 50%;

     background-color: #613900;

     position: absolute;

     z-index: 99;

     top: 90px;

     left: 145px;

     transform: rotate(10deg);

 }

 .hat_2{

     width: 80px;

     height: 40px;

     background-color: #613900;

     display: inline-block;

     position: relative;

     top: -35px;

     left: 10px;

 }

 .ribbon {

     height: 10px;

     width: 80px;

     background-color: #ec4800;

     position: relative;

     top: -65px;

     left: 10px;

     z-index: 6;

 }

 .hat_3{

     z-index: 5;

     display: inline-block;

     position: relative;

     top: -100px;

     left: 10px;

     width: 80px;

     height: 5px;

     border-radius: 50%;

     background-color: #3b2200;

 }

 .shape{

     width: 5px;

     height: 5px;

     margin-top: 140px;

     margin-left: 50px;

     z-index: 99;

     border-radius: 100%;

     position: absolute;

     border-radius:100%;

     box-shadow: 119px 0px 0px 0px #ed5614, 125px 2px 0px 0px #ed5614, 132px 2px 0px 0px #ed5614, 138px -2px 0px 0px #ed5614;

 }

 .shape_1{

     width: 10px;

     height: 10px;

     margin-top: 160px;

     margin-left: 50px;

     z-index: 99;

     position: absolute;

     border-radius: 100%;

     box-shadow: 130px 15px 0px -2px #613900, 130px 28px 0px -1px #613900, 130px 41px 0px 0px #613900, 130px 55px 0px 0px #613900;

 }

 .snowflake{

   overflow: hidden;

 }

 .snow {

   width: 380px;

   height: 350px;

   border-radius: 100%;

   position: absolute;

   top: 10px;

   left: 10px;

   overflow: hidden;

   opacity: 0.8;

 }

 /* 雪花是胡乱写的... 这个方法模仿自http://codepen.io/chilliconcode/pen/rWpvOe */

 .snow_1 {

     color: #fff;

     opacity: 0.5;

     animation: sfanim linear 30s;

     -webkit-animation: sfanim linear 30s;

     animation-iteration-count: infinite;

     -webkit-animation-iteration-count: infinite;

     text-shadow:0px 20px, -6px 20px, -13px 20px, -20px 18px, -19px 20px, 380px 171px, 550px 80px, 269px 50px, 20px 151px, 221px 344px, 229px 136px, 237px 280px, 303px 30px, 211px 314px, 378px 285px, 388px 117px, 70px 295px, 149px 318px, 96px 66px, 129px 217px, 138px 218px, 241px 310px, 231px 368px, 18px 327px, 173px 213px, 118px 10px, 246px 208px, 159px 244px, 268px 376px, 167px 262px, 85px 238px, 277px 47px, 386px 192px, 259px 364px, 325px 327px, 279px 201px, 303px 517px, 32px 489px, 323px 519px, 98px 583px, 126px 635px, 0px 571px, 380px 461px, 269px 417px, 0px 551px, 121px 744px, 229px 536px, 237px 680px, 303px 430px, 211px 714px, 378px 685px, 10px 687px, 93px 745px, 292px 724px, 223px 692px, 156px 560px, 253px 458px, 205px 595px, 145px 506px, 79px 712px, 182px 759px, 279px 499px, 349px 524px, 5px 433px, 216px 547px,120px 666px, 50px 666px, 214px 421px, 364px 404px, 202px 652px, 354px 632px, 312px 500px;

 }

 .snow_2 {

     color: #fff;

     animation: sfanim linear 15s;

     -webkit-animation: sfanim linear 15s;

     animation-iteration-count: infinite;

     -webkit-animation-iteration-count: infinite;

     text-shadow: 600px 500px, 50px 625px, 351px 741px, 20px 632px, 250px 652px, 388px 698px, 235px 762px, 50px 714px, 385px 742px, 185px 635px, 156px 560px, 364px 485px, 340px 620px, 394px 428px, 187px 748px, 217px 624px, 356px 630px, 33px 758px, 238px 762px, 357px 586px, 253px 798px, 68px 786px, 164px 662px, 119px 598px, 221px 557px, 126px 537px, 282px 503px, 11px 455px, 219px 632px, 60px 597px, 41px 529px, 247px 451px, 217px 644px, 304px 400px, 214px 421px, 287px 757px, 76px 404px, 376px 735px, 169px 572px, 245px 790px, 66px 717px, 375px 85px, 11px 289px, 254px 384px, 5px 286px, 266px 305px, 388px 298px, 180px 307px, 36px 13px, 74px 295px, 238px 290px, 384px 235px, 1px 294px, 45px 138px, 131px 350px, 258px 120px, 157px 305px, 96px 349px, 325px 319px, 132px 288px, 167px 111px,  41px 129px, 247px 51px, 217px 244px, 304px 0px, 214px 21px, 287px 357px, 76px 4px, 376px 335px, 169px 172px, 245px 390px, 66px 317px;

 }

 @keyframes sfanim {

   0% {

     -webkit-transform: translate(0px, -500px);

             transform: translate(0px, -500px);

   }

   100% {

     -webkit-transform: translate(0px, 100px);

             transform: translate(0px, 100px);

   }

 }

 @-webkit-keyframes sfanim {

   0% {

     -webkit-transform: translate(0px, -500px);

             transform: translate(0px, -500px);

   }

   100% {

     -webkit-transform: translate(0px, 100px);

             transform: translate(0px, 100px);

   }

 }

 .toum {

     width: 400px;

     height: 400px;

     border-radius: 100%;

     position: absolute;

     background:linear-gradient(315deg, rgba(255, 255, 255,0.9) 0%, rgba(253, 251, 251, 0.2) 47%, rgb(191, 253, 239) 100%);

     background:-webkit-linear-gradient(315deg, rgba(255, 255, 255,0.9) 0%, rgba(253, 251, 251, 0.2) 47%, rgb(191, 253, 239) 100%);

 }

 .arch {

     width: 560px;

     height: 133.33333px;

     position: absolute;

     bottom: -342px;

     margin-left: -80px;

     position: relative;

     -webkit-clip-path: polygon(30% 10%, 70% 10%, 80% 100%, 20% 100%);

     z-index: 99999;

     overflow: hidden;

 }

 .arch_1 {

     height: 180px;

     width: 400px;

     border-radius: 100%;

     border: 20px solid #ffcb12;

     position: absolute;

     bottom: 74px;

     left: 60px;

 }

 .arch_2 {

     height: 180px;

     width: 400px;

     border-radius: 100%;

     border: 40px solid #ebbb11;

     position: absolute;

     bottom: 35px;

     left: 46px;

 }

 .shadow{

     width: 400px;

     height: 40px;

     background: #449e85;

     position: relative;

     top: 280px;

     border-radius: 100%;

     margin: auto;

 }

 </style>

 </head>

 <body>

 <div class="snow_globe">

     <div class="circular_white"></div>

     <div class="cir_cen">

         <div class="step"></div>

     </div>

     <div class="snowman">

         <div class="son_btm"></div>

         <div class="son_top"></div>

         <div class="shape"></div>

         <div class="shape_1"></div>

         <div class="hat">

             <div class="hat_2"></div>

             <div class="ribbon"></div>

             <div class="hat_3"></div>

         </div>

         <div class="eye"></div>

         <div class="eye_2"></div>

         <div class="nose"></div>

         <div class="scarf"></div>

         <div class="scarf_2"></div>

     </div>

     <div class="snowflake">

         <div class="snow">

           <div class="snow_1">

             <p>*</p>

           </div>

           <div class="snow_2">

             <p>*</p>

           </div>

         </div>

    </div>

    <div class="toum"></div>

     <div class="arch">

         <div class="arch_1"></div>

         <div class="arch_2"></div>

     </div>

     <div class="shadow"></div>

 </div>

 </body>

 </html>

　　

css3圣诞雪景球的更多相关文章

  1. css3圣诞雪景球开源

    css3圣诞雪景球开源 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  2. css3 圣诞红包雨效果

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

  3. 用js，css3 做的一个球

    用css3属性很容易做一个立方体,但是要做一个球体,会相对复杂些 原理是:球可以看做是由无数个圆圈构成,然后就可以用圆圈来做球, 下面的例子是我做的一个小球,由72个圆圈组成.如果把每个圆圈的背景颜色 ...

  4. CSS3弹力球

    如下代码实现方块在限定区域内不停弹跳. <!DOCTYPE html> <html> <head> <style> div { width:100px; ...

  5. 慕课网H5圣诞主题

    继七夕之后,我又出了一个圣诞主题的课程.圣诞主题是基于HTML5+CSS+JS编写与实现的,同时也是七夕主题的故事延续.圣诞主题依旧延续着七夕主题设计的思路,引入了3个经典的场景页面,在每个场景中表述 ...

  6. Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十二】

    2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...

  7. CSS3动画几个平时没注意的属性

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

  8. css3实践之摩天轮式图片轮播+3D正方体+3D标签云（perspective、transform-style、perspective-origin）

    本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...

  9. cubic-bezier贝塞尔曲线css3动画工具

    今天在一本叫<HTML5触摸界面设计与开发>上看到一个做弹跳球的复杂动画效果,首先加速下降,停止,然后弹起时逐渐减速.是用cubic-bezier贝塞尔曲线来完成的.所以特地去学习了一下关 ...

随机推荐

  1. Google地图开发总结

    我们经常使用地图查位置.看公交.看街景,同时地图还开放第三方的API给开发者.利用这些API进行地图的个性化的展示和控制,例如北京被水淹了,开发一个网页显示北京被淹的地图,地图上面标志被水淹的位置.严 ...

  2. Entity Framework 教程——什么是Entity Framework

    什么是Entity Framework 编写和管理ADO.NET是一个繁琐而又无聊的工作.微软为你的应用提供了一个名为"Entity Framework"的ORM框架来自动化管理你 ...

  3. 有点激动，WPF换肤搞定了！

    一如既往没废话! wpf桌面应用开发都是window内引入很多个UserControl. 如果你有通过不同颜色来换肤的需求,那么下面我就将整个过程! 分2个步骤: 1.主窗体背景色替换: 2.同时界面 ...

  4. 超越 JSON: Spearal 序列化协议简介

      Spearal 是一个新的开源的序列化协议,这个协议旨在初步替换JSON 将HTML和移动应用连接到Java的后端. Spearal的主要目的是提供一个序列协议,这个协议即使是在端点间传输的复杂的 ...

  5. c#中get set 的使用

    在早期学习c#的过程中,经常遇到这样的语句: public string StudentName { get{return stuName;} set{stuName=value;} } 当时也不是很 ...

  6. 三个linux系统共存，修改默认启动

     一个mint,一个ubuntu,想要默认启动ubuntu,那么咱们这么来:修改启动顺序,我们需要修改Ubuntu的GRUB配置文件.使用常见的编辑程序如"gedit"就可以很方便 ...

  7. SVNKit支持SSH连接

    SVNKit这个开源工具,用于Java语言访问SVN库,咋看的时候很方便,其实坑特别多.我在这里只想跟大家说一句,如果你还没有用过,请不要在生产环境使用这个东西了,兼容性问题搞死你(替换方案是直接用s ...

  8. springmvc<一>一种资源返回多种形式【ContentNegotiatingViewResolver】

    restful服务中一个重要的特性就是一种资源可以有多种表现形式,在springmvc中可以使用ContentNegotiatingViewResolver这个视图解析器来实现这种方式. 描述资源的三 ...

  9. 【JavaWeb】Spring+SpringMVC+MyBatis+SpringSecurity+EhCache+JCaptcha 完整Web基础框架（前言）

    一直希望能够搭建一个完整的,基础Web框架,方便日后接一些外快的时候,能够省时省力,终于花了一周的时间,把这个东西搞定了.特此写下此博客,一来是纪念,二来是希望能够为别人提供方便.顺带说一下,恩,组合 ...

  10. 学习廖雪峰的git教程

    地址:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 1.git add:添加文件 ...