css3圣诞雪景球开源

<!DOCTYPE html>
<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>

大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦，群里还有不少技术大拿、行业大牛 可以一起探讨问题，我们也会安排专业的技术老师为大家答疑解惑呢!

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

  1. css3圣诞雪景球

    本来想多做几个了 无奈最近太忙 于是模仿做了一个在codepen看到的圣诞雪景球   算是送给自己的圣诞礼物 演示地址:http://www.qdfuns.com/notes/26668/d5e177 ...

  2. css3 圣诞红包雨效果

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

  3. CSS3之简易的3D模型构建[原创开源]

    CSS3之简易的3D模型构建[开源分享] 先上一张图(成果图):这个是使用 3D建模空间[源码之一] 制作出来的模型之一 当然这是一部分模型特写, 之前还制作过枪的3D模型等等. 感兴趣的朋友可以自己 ...

  4. 用js，css3 做的一个球

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

  5. 腾讯开源的轻量级CSS3动画库：JX.Animate

          JX.Animate 是由腾讯前端团队 AlloyTeam 推出的一个 CSS3 动画库,通过 JX(腾讯的前端框架)插件的形式提供. Why CSS3 众所周知在支持HTML5的浏览器中 ...

  6. 20 个免费开源的 CSS3 用户界面工具包

    ui.css Metro UI CSS Pure CSS jQuery jKit Solid HTML5/CSS3 UI Kit CSS3 UI Kit Alt CSS3 UI Kit MediaLo ...

  7. CSS3弹力球

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

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

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

  9. 2017了，回家前 "年末" 分享:下雨，飘雪，红包雨，碰撞球，自定义View

    (本博客为原创:http://www.cnblogs.com/linguanh/) 目录: 效果展示 感想 代码拆解 开源地址 效果展示 有没有兴趣继续看下去,直接看下"颜值"是第 ...

随机推荐

  1. hdu.1430.魔板(bfs + 康托展开）

    魔板 Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submis ...

  2. Hadoop 面试题 之Hive

    1.Hive 有哪些方式保存元数据,各有哪些特点. 15. Hive内部表和外部表的区别 23.hive底层与数据库交互原理Hive的Hql语句掌握情况? 36.使用Hive或自定义mr实现如下逻辑: ...

  3. linux 之常见的好用命令

    参考网址:软件匠艺小组之第八期把命令行玩飞起来 1.如果想要将文件重定向到文件里,而又想看重定向的内容, tee命令 例如:ls | tee foot.txt 2.如果想要字母显示为大写独特的,命令: ...

  4. OpenCV摄像头人脸识别

    注: 从外设摄像装置中获取图像帧,把每帧的图片与人脸特征进行匹配,用方框框住识别出来的人脸 需要用到的函数: CvHaarClassifierCascade* cvLoadHaarClassifier ...

  5. linux下QtCreator无法输入中文的情况

    解决linux下QtCreator无法输入中文的情况 本文由乌合之众 lym瞎编,欢迎转载 blog.cnblogs.net/oloroso 本文由乌合之众 lym瞎编,欢迎转载 my.oschina ...

  6. 5.2---小数的二进制表示（CC150）

    public static String printBin(double num) { StringBuffer str = new StringBuffer(); str.append('0'); ...

  7. SQL Sever2008r2 数据库服务各种无法启动的解决办法

    一.Sql Server服务远程过程调用失败解决 以前出现过这个问题,那时候是因为把实例安装在了D盘,后来D盘被格式化了.然后,这些就没了.今天早上打开电脑,竟然又出现这个问题,可是Server200 ...

  8. phpcms常用方法简介

    function thumb() /** * 生成缩略图函数 * @param $imgurl 图片路径 * @param $width 缩略图宽度 * @param $height 缩略图高度 * ...

  9. join

    一句话 join(param) 是把  array 连城一个字符串,中间用 param隔开

  10. struts2 servlet api 访问方式

    Action中访问ServletAPI. 主要就是接收表单参数及向域对象中存取值. 关于SevletAPI的方法在Action中有三种方式: 1.完全解耦合的形式: * 使用一个类:ActionCon ...