css3圣诞水晶球

最新推荐文章于 2024-04-27 17:15:07 发布
最新推荐文章于 2024-04-27 17:15:07 发布
阅读量1k 收藏 3
点赞数 2
文章标签： 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>
想看原文的地址在这里http://codepen.io/chilliconcode/pen/rWpvOe
哦 对了 观看的同时可以戴上耳机 emoticon

qq_30909577
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html如何实现立体效果,CSS3实现3D立体效果
weixin_30224231的博客
06-03 2412
CSS3实现3D效果 1. 涉及到的几个CSS3属性 首先大家需要了解transform属性，主要有平移(translate),缩放(scale),拉伸(skew),旋转(rotate)。 这里涉及到3d转换的主要介绍旋转。 下面通过一组rotate效果直观理解rotateX,rotateY,rotateZ区别。 代码： .box{ width: 200px;height: 200px; back...
h5球的立体效果_CSS3实现球体旋转
weixin_39655049的博客
12-19 1115
本帖最后由 欧水萍 于 2016-11-11 15:11 编辑CSS3实现球体旋转本教程简述如何用CSS3实现旋转的球体效果如下图所示，球体沿着中间的轴旋转：要理解的知识点1 三维空间的透视属性css属性：perspectiveperspective 属性有两个值，none 和 自己定义的具体像素，例如1000px。注意：当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是...
纯CSS3制作3D旋转球体
11-04
纯c制作3D旋转球体 纯CSS3制作3D旋转球体 纯CSS3制作3D旋转球体
前端学习笔记day03 水晶球制作（盒子阴影）
weixin_30512043的博客
12-01 137
1. 水晶球 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width...
html5+css3雪花效果,html5 css3雪花水晶球动画场景特效
weixin_36115475的博客
06-04 380
html5 css3雪花水晶球动画场景特效，一个漂亮的基于canvas绘制卡通风格水晶球内部下雪动画特效。查看演示下载资源：16次 下载资源下载积分：10积分js代码 (function() {var c1 = document.getElementById("c1");var c2 = document.getElementById("...
【C语言玩转圣诞节】100行代码画出圣诞水晶球
热门推荐
C语言C++学习俱乐部：765860056
12-23 1万+
序 我爱你，不是因为你是一个怎样的人，而是因为我喜欢与你在一起时的感觉。 嗨！这里是狐狸~~ 今天是2021年12月23号，后天就是圣诞节了，再过一个星期就是2022年了，最近总是感觉伤感，有些事情就是比想象中来的快一些，希望大家都可以把握2021年最后的时间，不留遗憾吧，后天圣诞节，今天再教大家一个圣诞项目吧，圣诞水晶球，今天这个呢代码不多，但难度会有点，因为这个涉及桌面，就是可以在桌面实现，希望大家可以认真看，认真学吧。 同样，先给大家看效果吧 效果还是很不错的，再加上一个音乐，女朋友看.
会动的水晶球
zh994990183的博客
08-12 176
* { /* 修改标签和模型类型 */ box-sizing: border-box; } html { height: 100%; } body { margin: 0; height: 100...
你想不到的！CSS 实现的各种球体效果【附在线演示】
萌萌的It人 www.itmmd.com
07-16 2449
CSS 可以实现很多你想不到的效果，今天我们来尝试使用 CSS 实现各种球体效果。有两种方法可以实现，第一种是使用大量的元素创建实际的 3D 球体，这种方法有潜在的性能问题；另外一种是使用 CSS3 渐变和阴影特性来实现，实现方法简单，效果精美。 为保证效果，请使用 Chrome、Firefox、Safari 等现代浏览器浏览。 您可能感兴趣的相关文章 Metronic
css 实现三维立体旋转效果
weixin_38881784的博客
04-28 4741
css实现三维立体旋转效果
CSS3进阶：酷炫的3D旋转透视
yeana1的博客
07-16 6175
最近觉得自己 CSS3 过于薄弱，想着深入学习一番，遂以这个 LOGO 为切入口，好好研究学习了一下相关的 CSS3 属性。webpack 的 LOGO 动画效果乍看不是很难，深入了解之后，觉得内部其实大有学问，自己折腾了一番，做了一系列相关的 CSS3 动画效果。 先上 demo ，没有将精力放在兼容上，请用 chrome 打开。 本文完整的代码，以及更多的 CSS3 效果，
html5 canvas 三维旋转的水晶球特效.rar
07-10
html5 canvas 三维旋转的水晶球特效，除了使用CSS3技术外，还引用了一个regl.min.js特效库，类似jquery的插件库。其实这个球看上去更像是一个光棱球，能看到反射出的光线，另外背景的渲染也很到位，使整体的三维效果更强烈。
11个震撼的javascript网页效果
03-07
不多说，11个JS做的特效 不是我做的，但是值得看看 零分分先给大家，需要的自取 1.JavaScript图片特效 2.Js拖动特效，一串水晶球(很强大) 3.Tank网页版 4.很有意思的图片分裂复制效果 5.漂亮的jquery时钟效果 6.有点炫的JavaScript立体图片展示 ......
CSS3圣诞老人微笑表情动画特效
07-24
CSS3圣诞老人微笑表情动画特效是一款纯css3 keyframes绘制的卡通圣诞老人微笑表情动画特效。
纯CSS3绘制圣诞老人雪花特效
07-24
纯CSS3绘制圣诞老人雪花特效是一款2020年圣诞节圣诞老人雪花动画特效。
卡通圣诞礼物CSS3特效
06-24
卡通圣诞礼物CSS3特效是一款圆形玻璃球里面的圣诞节日礼物闪闪发光动画特效。
CSS3圣诞礼物盒打开动画特效
07-24
CSS3圣诞礼物盒打开动画特效是一款纯CSS3绘制的圣诞礼物盒打开小熊出现动画特效。
纯CSS3圣诞节日快乐动画特效
07-24
纯CSS3圣诞节日快乐动画特效是一款圣诞节快乐活动页面动画特效。
CSS3新增特性（二）
m0_48670609的博客
04-24 1251
接上一篇，CSS3新增特性，包括 2D 转换（位移、缩放、旋转、倾斜）和 3D 转换，以及动画。
CSS3（响应式布局）
最新发布
l_al_al_a的博客
04-27 712
/只在x方向上重复。//只在y方向上重复。//前一个时间用于表示过渡效果持续时间，后一个时间用于表示过渡效果的延迟。# 和 #注意：其中angle对应单位为：deg。# 及 #
手绘csshtml圣诞树代码
12-27
很抱歉，我无法提供手绘CSS/HTML圣诞树代码。但是，我可以为您提供一个简单的CSS/HTML代码示例，用于绘制一个基本的圣诞树形状： ```html <!DOCTYPE html> .tree { position: relative; width: 0; height: 0;...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值