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和其他老师还有众多的小伙伴们进行沟通交流哦，群里还有不少技术大拿、行业大牛 可以一起探讨问题，我们也会安排专业的技术老师为大家答疑解惑呢!

时间： 2024-12-08 06:40:04

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

css3圣诞雪景球

本来想多做几个了 无奈最近太忙 于是模仿做了一个在codepen看到的圣诞雪景球   算是送给自己的圣诞礼物 演示地址:http://www.qdfuns.com/notes/26668/d5e1776243f8272941de3e65dd094db2.html 想看原文的地址在这里http://codepen.io/chilliconcode/pen/rWpvOe 1 <html lang="en"> 2 <head> 3 <meta charset=&

前端资源汇总[转载]

JavaScript 框架/库 Animations vivus:可以动态描绘 SVG 的 JS 库, 支持多种动画 Web Animation:Javascript 实现的 Web Animation API scrollReveal.js:使元素以非常酷帅的方式进入画布 (Viewpoint) snabbt.js:一个利用 Javascript 和 CSS transform 的 animation 库 matter-js:2D 物理效果引擎,碰撞.弹跳等 parallax:一个用于响应智能

20位最值得关注的 JS 开发者

过去的一年对 Node.js 和 JavaScript 总的来说毫无疑问意义重大. 2015 年,我们见证了 Node.js 和 io.js 的合并,ESLint 1.0 的引入以及 ES6 标准的采用,也经历了很多其他令人兴奋的事. 按照 bitHound 的惯例,我们再次给出2015年度"20位最值得关注的 JS 开发者"榜单,这里有我们熟悉的家伙,也有一些新面孔.因此准备好,在2016年,这些人都将是你想要保持关注的. 1. Eric Elliott 对大名鼎鼎的的 Eric E

CSS3弹力球

如下代码实现方块在限定区域内不停弹跳. <!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; position:relative; animation:myfirst 5s linear 2s infinite alternate; /* Firefox: */ -moz-animation:myfirst 5s linear 2s inf

使ie9以下版本支持canvas,css3等主流html5技术的方法

1.前言.   ie6,7,8支持html5,看起来比较难,其实有一种方法很通用,就是引入js和css,这种可插拔的引入对开发很有帮助.比如,下面是一个让网页支持canvas和css3的例子. 2.例子. 下面是一个在canvas画布中显示一个红球的例子的html. Java代码   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TIT

CSS3 Box-sizing

CSS3 Box-sizing 转载: http://www.w3cplus.com/content/css3-box-sizing 作者:大漠 日期:2011-06-18 点击:39755 background-sizing css3属性详解 编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货. 点击链接查看最新前端内容,或到各大应用市场搜索「 掘金」下载APP,技术干货尽在掌握中. box-sizing是CSS3的bo

自己总结的 iOS ,Mac 开源项目以及库,知识点------持续更新

自己在 git  上看到一个非常好的总结的东西,但是呢, fork  了几次,就是 fork  不到我的 git 上,干脆复制进去,但是,也是认真去每一个每一个去认真看了,并且也是补充了一些,感觉非常棒,所以好东西要分享,为啥用 CN 博客,有个好处,可以随时修改,可以持续更新,不用每次都要再发表,感觉这样棒棒的 我们 自己总结的iOS.mac开源项目及库,持续更新.... github排名 https://github.com/trending,github搜索:https://github.

CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化

目录 一.浏览器兼容 1.1.概要 1.2.浏览器内核 1.3.浏览器市场份额(Browser Market Share) 1.4.兼容的一般标准 1.5.CSS Reset 1.6.CSS Hack 1.6.1.条件注释法 1.6.2.样式内属性标记法 1.6.3.选择器前缀法 1.7.文档模式 (X-UA-Compatible) 1.8.javascript兼容 二.前端性能优化 2.1.概要 2.2.减少HTTP请求数量 2.2.1.图片地图 2.2.2.精灵图片(Sprite) 2.2.

开源电子书

操作系统 开源世界旅行手册 鸟哥的Linux私房菜 The Linux Command Line (中英文版) Linux 设备驱动 (第三版) 深入分析Linux内核源码 UNIX TOOLBOX Docker中文指南 Docker -- 从入门到实践 Docker入门实战 Docker Cheat Sheet FreeRADIUS新手入门 Mac 开发配置手册 FreeBSD 使用手册 Linux 命令行(中文版) Linux 构建指南 Linux工具快速教程 Linux Documenta