CSS

语言：

CSSSCSS

确定

html {

background: #215560;

}

.container {

margin: auto;

height: 300px;

width: 300px;

animation: fade-in 2.5s;

}

.moon {

height: 60px;

width: 60px;

background: white;

border-radius: 50%;

position: absolute;

float: left;

margin: 0 5%;

}

.orientation {

margin-top: 20%;

transform: rotateX(-23deg) rotateY(-133deg) translateY(115px) translateZ(230px);

transform-style: preserve-3d;

}

.towers > *,

.bridges > *,

.wall > *,

.top,

.ocean,

.basics,

.top:after,

.side:after,

.side,

.tower2:after,

.tower2-support:before,

.tower2-support:after,

.support-side:before,

.support-side:after,

.waterbridge1:before,

.waterbridge1:after,

.waterbridge2,

.waterbridge2:after,

.waterfall,

.bridge1,

.bridge1:after,

.bridge2,

.bridge2:after,

.block1:before,

.block2:before,

.block3:before,

.block1:after,

.block2:after,

.block3:after,

.block4:before,

.block4:after,

.bridge3:after,

.wall-right:after,

.wall-depth:after,

.stair1:after,

.stair3:after,

.stair2:after,

.base-wrapper {

position: absolute;

transform-style: preserve-3d;

content: "";

}

.top {

border-left: 13px solid transparent;

border-bottom: 23px solid #f5d2d8;

transform: translateY(-29px) translateZ(0px);

}

.top:after,

.side:after {

height: 15px;

width: 4px;

background-size: 6px 6px;

box-shadow: 1px 0px rgba(78, 40, 63, 0.3);

}

.top:after {

background: repeating-linear-gradient(#f0bdc6, #f0bdc6 3px, transparent 3px, transparent 6px), repeating-linear-gradient(to right, #f0bdc6, #f0bdc6 2px, #d6abc9 2px, #664a9f 2px, #664a9f 4px, transparent 8px);

transform: translateX(-6px) translateY(15px) rotateZ(-90deg) translateZ(-4px);

}

.side {

border-left: 10px solid transparent;

border-bottom: 20px solid #f5a1b8;

transform: translateY(-23px) translateZ(7px) rotateZ(-30deg);

}

.side:after {

background: repeating-linear-gradient(#f089a4, #f089a4 3px, transparent 3px, transparent 6px), repeating-linear-gradient(to right, #f089a4, #f089a4 2px, #d6abc9 2px, #664a9f 2px, #664a9f 4px, transparent 8px);

transform: translateX(-5px) rotatex(-20deg) translateY(13px) rotateZ(-91deg) translateZ(3px);

}

.tower1 .t1-front {

height: 270px;

width: 11px;

}

.tower1 .t1-side {

height: 270px;

width: 10px;

transform: translateX(10px) rotateY(-90deg) translateY(-273px) translateZ(-1px);

}

.tower2 .t2-front {

height: 90px;

width: 11px;

}

.tower2 .t2-side {

height: 90px;

width: 10px;

transform: translateX(10px) rotateY(-90deg) translateY(-93px) translateZ(-1px);

}

.tower3 .t3-front {

height: 54px;

width: 11px;

}

.tower3 .t3-side {

height: 54px;

width: 10px;

transform: translateX(10px) rotateY(-90deg) translateY(-57px) translateZ(-1px);

}

.tower1 {

transform: translateY(-25px) translateZ(-115px);

}

.tower1 .t1-front {

background: linear-gradient(#f5d2d8, #f5d2d8, #cea7c2, #c9bad1);

}

.tower2 {

transform: translateX(-205px) translateY(100px) translateZ(23px);

}

.tower2 .t2-front {

background: linear-gradient(#f5d2d8, #f5d2d8, #957b98);

}

.tower2:after {

height: 15px;

width: 5px;

background: linear-gradient(#8e4667, #6c354e);

border-radius: 30% 30% 0 0;

transform: translateX(3px) translateY(-129px);

}

.tower2-support:before {

height: 3px;

width: 14px;

background: #8575a3;

transform: translateX(-3px) rotateY(-5deg) translateY(-1px) translateZ(2px);

}

.tower2-support {

height: 25px;

width: 11px;

background: linear-gradient(#957b98, #d6abc9);

transform: translateX(-3px) translateY(75px) translateZ(-163px);

}

.tower2-support:after {

height: 25px;

width: 4px;

background: #c06e83;

transform: translateX(10px);

}

.tower3 {

transform: translateY(150px) translateZ(-50px);

}

.tower3 .t3-front {

background: linear-gradient(#f5d2d8, #f1bec5, #626a9b, #31519c);

}

.t1-side,

.t2-side,

.t3-side {

background: linear-gradient(#f2819f, #f2819f, #f2819f, #d15883, #d169a8);

}

.tower3-support {

height: 23px;

width: 6px;

background: #224996;

transform: translateX(204px) translateY(92px) translateZ(-236px);

}

.tower3-support .support-side {

height: 23px;

width: 6px;

background: linear-gradient(#bd4d99, #957b98);

transform: translateX(4px) translateZ(2px) rotateY(90deg);

}

.support-side:before {

height: 0px;

width: 9px;

border-top: 5px solid #1c47a5;

border-left: 4px solid transparent;

transform: translateX(-5px) translateY(-5px);

}

.support-side:after {

height: 0px;

width: 6px;

border-top: 5px solid #1c47a5;

border-right: 4px solid transparent;

border-left: 4px solide transparent;

transform: translateX(7px) translateY(-8px) rotateZ(-30deg) translateZ(-11px);

}

.window {

height: 16px;

width: 4px;

background: #5b2d42;

border-radius: 55% 55% 0 0;

float: top;

transform: translateX(3px) translateY(4px);

}

.waterbridge1:before {

height: 34px;

width: 5px;

background: #f2819f;

transform: translateX(46px) translateY(-4px) rotateY(90deg) translateZ(-52px);

}

.waterbridge1 {

height: 33px;

width: 8px;

background: linear-gradient(#f2819f, #ffa4b5, #ffa4b5, #f5d2d8);

transform: rotateX(-85deg) translateX(46px) translateY(133px) rotateZ(180deg) translateZ(40px);

}

.waterbridge1:after {

height: 25px;

width: 12px;

background: linear-gradient(-140deg, #f2819f, #f2819f, #0aa9fb, #0aa9fb, #0aa9fb, #06d7fe);

transform: translateX(-39px) translateY(-33px) translateZ(-30px);

}

.waterbridge2 {

height: 20px;

width: 8px;

background: linear-gradient(#f2819f, #f089a4);

transform: rotateX(-85deg) translateX(13px) translateY(113px) rotateZ(180deg) translateZ(55px);

}

.waterbridge2:after {

height: 18px;

width: 3px;

background: #e9537a;

transform: rotateY(90deg) translateZ(-3px);

}

.waterfall {

height: 100px;

width: 15px;

animation: water 4s ease-in-out 2s infinite normal;

background: linear-gradient(-140deg, #06d7fe, #0aa9fb, #0aa9fb, #66ffff, #0aa9fb, #0aa9fb, #0066ff, #66ffff);

background-size: 200px 300px;

transform: translateX(-66px) translateY(130px) translateZ(-20px);

}

.bridge1 {

height: 120px;

width: 11px;

background: #ffdddd;

transform: rotateX(-82deg) translateX(40px) translateY(160px) rotateZ(180deg) translateZ(80px);

}

.bridge1:after {

height: 4px;

width: 120px;

background: linear-gradient(to right, #f292ad, #f193ab, #cc71aa);

transform: translateY(55px) translateX(-63px) rotateY(90deg) rotateZ(-90deg);

}

.bridge2 {

height: 13px;

width: 67px;

background: linear-gradient(to left, #f5d2d8, #f66da5, #f5d2d8, #f5d2d8);

transform: translateX(-88px) rotateX(90deg) rotateZ(-5deg) translateY(-45px) translateZ(-172px);

}

.bridge2:after {

height: 4px;

width: 67px;

background: linear-gradient(to left, #f5d2d8, #606096, #d6abc9, #d6abc9, #d8adcb);

transform: rotateX(90deg) translateX(2px) translateZ(56px);

}

.block-wrapper {

transform: translateY(10px) translateX(0px) rotateZ(-3deg);

}

.block1 {

height: 12px;

width: 12px;

transform: translateX(-19px) translateY(-14px) rotateZ(5deg);

}

.block2 {

height: 12px;

width: 12px;

transform: translateX(-38px) translateY(-28px) rotateZ(5deg);

}

.block3 {

height: 12px;

width: 12px;

transform: translateX(-57px) translateY(-42px) rotateZ(5deg);

}

.block4 {

height: 17px;

width: 17px;

transform: translateX(-84px) translateY(-60px) rotateZ(5deg);

}

.block1,

.block2,

.block3,

.block4 {

background: #ffdeef;

position: relative;

}

.block1:before,

.block2:before,

.block3:before {

height: 12px;

width: 6px;

background: #f2819f;

transform: skewY(-40deg) translateY(8px) translateX(12px);

}

.block1:after,

.block2:after,

.block3:after {

height: 6px;

width: 12px;

background: #e4c3d6;

transform: skewX(-47deg) translateY(-5px) translateX(-2px);

}

.block4:before {

height: 17px;

width: 9px;

background: #f2819f;

transform: skewY(-40deg) translateY(11px) translateX(16px);

}

.block4:after {

height: 7px;

width: 17px;

background: #eca8b4;

transform: skewX(-47deg) translateY(-7px) translateX(-3px);

}

.bridge3 {

height: 40px;

width: 11px;

background: linear-gradient(-130deg, #f089a4, #f089a4, #f5d2d8, #f5d2d8, #f5d2d8, #f5d2d8, #f2819f);

transform: rotateX(-86deg) translateX(5px) translateY(140px) rotateZ(180deg) translateZ(-25px);

}

.bridge3:after {

height: 47px;

width: 4px;

background: #ed7293;

transform: translateX(-3px) rotateY(90deg) translateY(-6px);

}

.wall-left {

height: 200px;

width: 4px;

background: linear-gradient(#f3a8bc, #f089a4);

transform: translateX(-9px) translateY(45px) translateZ(-110px);

}

.wall-curve {

fill: #f3a8bc;

transform: translateX(-183px) translateY(116px) translateZ(19px);

}

.wall-right {

height: 140px;

width: 15px;

background: linear-gradient(to top, #dc98b0, #ec8ea9, #f3a8bc);

transform: translateX(-200px) translateY(146px) translateZ(24px);

}

.wall-right:after {

height: 150px;

width: 5px;

background: linear-gradient(#6755a7, #ba569e 10px, #ea85a3 20px);

transform: translateX(15px);

}

.wall-depth {

height: 50px;

width: 4px;

background: #ea85a3;

transform: translateY(140px) translateX(50px) translateZ(-196px);

}

.wall-depth:after {

height: 22px;

width: 6px;

background: repeating-linear-gradient(to right, #f089a4, #f089a4 3px, #ea5c81 3px, #ea5c81 6px);

transform: translateY(-27px) translateX(47px) translateZ(-56px);

}

.wall-top {

height: 5px;

width: 40px;

background: repeating-linear-gradient(to left, #f5d2d8, #f5d2d8 5px, transparent 5px, #d03e6d 10px);

transform: translateX(-40px) translateY(38px) translateZ(-116px) rotateX(90deg);

}

.stair1,

.stair3 {

background: repeating-linear-gradient(to bottom, #f5d2d8, #f5d2d8 2px, #f089a4 2px, #f486a3 3px);

height: 45px;

width: 12px;

transform: translateX(319px) translateZ(-479px) skewX(-30deg);

}

.stair1:after,

.stair3:after,

.stair3:after {

height: 45px;

width: 3px;

background: #d470ae;

transform: translateX(11px);

}

.stair2 {

background: repeating-linear-gradient(30deg, #ffb4ba, #ffb4ba 2px, #e95d8e 2px, #f486a3 3px);

height: 13px;

width: 25px;

transform: rotateX(94deg) translateY(-90px) translateZ(-152px) skewY(-35deg);

}

.stair2:after {

height: 4px;

width: 25px;

background: #e085ad;

transform: translateY(-4px);

}

.stair3 {

transform: translateX(38px) translateZ(-202px) skewX(-33deg) translateY(28px);

}

.ocean {

height: 200px;

width: 200px;

background: linear-gradient(#06d7fe, #08b3f9);

margin: auto;

transform: rotateX(97deg) rotateZ(-3deg) translateX(-330px) translateY(70px) translateZ(-260px);

}

.ripple-wrapper {

transform: translateX(30px) translateY(105px);

}

.rip1 {

border: 4px solid white;

height: 65px;

width: 65px;

animation: ripple-effect 2.2s ease-in infinite, fade-in 2.2s ease-in infinite reverse;

}

.rip2 {

border: 4px solid white;

height: 55px;

width: 55px;

animation: ripple-effect 2s ease-in infinite .5s;

}

.base-wrapper {

transform: rotateY(90deg) rotateX(45deg) translateX(-3px) translateZ(20px) translateY(90px);

}

.square:nth-of-type(1n) {

height: 7px;

width: 7px;

animation: base 1s ease-in infinite alternate 1s;

background: white;

}

.square:nth-of-type(2n) {

height: 7px;

width: 7px;

animation: base 1s ease-in infinite alternate 2s;

background: white;

}

.square:nth-of-type(3n) {

height: 7px;

width: 7px;

animation: base 1s ease-in infinite alternate 0.5s;

background: white;

}

.square:nth-of-type(4n) {

height: 7px;

width: 7px;

animation: base 1s ease-in infinite alternate 1s;

background: white;

}

@keyframes fade-in {

0% {

opacity: 0;

}

100% {

opacity: 1;

}

}

@keyframes water {

0% {

background-position: 0% 50%;

}

50% {

background-position: 75% 50%;

}

100% {

background-position: 100% 50%;

}

}

@keyframes ripple-effect {

0% {

opacity: 100%;

transform: scale(0.4);

}

100% {

opacity: 0%;

transform: scale(1);

}

}

@keyframes base {

0% {

transform: scale(0.5);

}

100% {

transform: scale(1.2);

}

}

html绘制城堡,HTML5动画 - 山谷城堡相关推荐

  1. HTML5 canvas绘制雪花飘落动画（需求分析、知识点、程序编写分布详解）

    HTML5 canvas绘制雪花飘落动画(需求分析.知识点.程序编写分布详解) 原文:HTML5 canvas绘制雪花飘落动画(需求分析.知识点.程序编写分布详解) 看到网上很多展示html5雪花飞动 ...

  2. html5快速制作,html5动画制作（教你如何快速绘制HTML5动画）

    html5动画制作(教你如何快速绘制HTML5动画) 本周在给学生讲授JavaScript课程中setInterval方法时,想到了我们在网上看到的各类GIF动图比较有意思,就将其引入到教学中,教学内 ...

  3. 儿童卡通城堡banner动画

    儿童卡通城堡banner动画是一款带可爱声音的矢量卡通动画banner素材.flash素材 下载地址: http://www.huiyi8.com/sc/6005.html (转载请注明此处)

  4. html5贝塞尔曲线,用canvas绘制一个曲线动画——深入理解贝塞尔曲线

    前言 在前端开发中,贝赛尔曲线无处不在: 它可以用来绘制曲线,在svg和canvas中,原生提供的曲线绘制都是使用贝赛尔曲线 它也可以用来描述一个缓动算法,设置css的transition-timin ...

  5. 7个华丽的基于Canvas的HTML5动画

    说起HTML5,可能让你印象更深的是其基于Canvas的动画特效,虽然Canvas在HTML5中的应用并不全都是动画制作,但其动画效果确实让人震惊.本文收集了7个最让人难忘的HTML5 Canvas动 ...

  6. html5 特效框架,超级惊艳 10款HTML5动画特效推荐

    原标题:超级惊艳 10款HTML5动画特效推荐 今天我们要来推荐10款超级惊艳的HTML5动画特效,有一些是基于CSS3和jQuery的,比较实用,特别是前几个HTML5动画,简直酷毙了,现在将它们分 ...

  7. html5有哪些小特效,超级惊艳 10款HTML5动画特效推荐

    今天我们要来推荐 10 款超级惊艳的 HTML5 动画特效,有一些是基于 CSS3 和 jQuery 的,比较实用,特别是前几个 HTML5 动画,简直酷毙了,现在将它们分享给大家,也许你能用到这些 ...

  8. html5 游戏 动画设计,11款效果惊艳的HTML5动画应用

    11款效果惊艳的HTML5动画应用 来源:极客头条 HTML5真的很棒,我们这个网站也每天在为大家分享很多炫酷而实用的HTML5和CSS3应用.今天要分享的有很多效果惊艳而且好玩的HTML5动画应用, ...

  9. HTML特效推荐,超级惊艳 10款HTML5动画特效推荐[转]

    ylbtech_html5_democss 今天咱们要来推荐 10 款超级惊艳的 HTML5 动画特效,有一些是基于 CSS3 和 jQuery 的,比较实用,特别是前几个 HTML5 动画,简直酷毙 ...

最新文章

  1. Python 刷英语六级段落匹配仅需 3 秒？
  2. 史上最全的数据库面试题，不看后悔篇！
  3. CveService.java
  4. springboot page size过大导致内存溢出_Spring Boot 内存泄露怎么办呢？看这里看这里！！...
  5. 【转】2.2[译]async/await中阻塞死锁
  6. php导出服务器表格乱码,phpExcel导出， 在本地正常，在服务器乱码解决办法
  7. php会不会被人工智能取代,人工智能真的会取代前端开发吗？
  8. 外网接口（浏览器接口）调取设备数据，放到数据库里
  9. 金万维异速联服务器重装,金万维异速联客户端常见错误提示及解决办法
  10. c# 高级开发应用：防止界面卡死之Application.DoEvents应用
  11. 74CMS 3.0 SQL注入漏洞前台
  12. 学Python，用Python自动创建PDF文档，实现办公自动化
  13. Qt报错：calling ‘split‘ with incomplete return type ‘QStringList‘
  14. 东软慧聚助力汽车“芯”节能减排
  15. 解决论文写作排版中，两端对齐导致文字间距被word补过大的问题
  16. 社区发现算法1——LPA 算法群
  17. 黑暗逃生服务器显示无,《黑暗逃生》常见问题 已知问题及解决方案
  18. osg::将ive的文件转化为osg格式
  19. 极客学院单线程爬虫py3.x版本
  20. 自动跳转手机版和电脑版html代码,分享两个手机访问pc网站自动跳转手机端网站代码...

热门文章

  1. 数据库创建存储过程_创建存储过程来修复孤立的数据库用户
  2. Qt osg QWidget osgViewer::Viewer
  3. vue-cli配置移动端自适应
  4. Windows安装ActiveMQ记录
  5. 避免将属性的可见属性层次结构用作用户定义的层次结构中的级别
  6. POI上传Excel的小问题处理
  7. centos7启用EPEL Repository
  8. HDU 3328 Flipper 栈 模拟
  9. cakephp 2.0 源码解读（一）
  10. css 属性名 查询表