您的位置:澳门新葡萄京娱乐网站 > web前端 > 纯 CSS3 实现的 Web 小游戏

纯 CSS3 实现的 Web 小游戏

2019-12-22 07:06

图片 1

Carve Me

文件内阴影效果,能够模拟出雕刻的作用,使用 CSS3 text-shadow 天性实现。

图片 2

 

生龙活虎款纯css3实现的超炫动漫背画特效,css3超炫

以前为我们介绍了数不清款由纯css3贯彻的特效。明日要再给大家带给风度翩翩款纯css3达成的超炫动漫背画特效。代码特别轻松,未有引用任何别的js代码。css代码也非常少。效果极度炫。一齐看下效果图:

图片 3

在线预览   源码下载

金玉锦绣的代码。

html代码:

 <div class='fake-gif'>









    </div>

css3代码:

        body{
    background: #000;
    -webkit-perspective:35px;
   -moz-perspective:35px;
    -ms-perspective:35px;
     -o-perspective:35px;
        perspective:35px;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -webkit-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);
    -moz-transform:rotateX(45deg) rotateY(0deg) rotateZ(45deg);
    -ms-transform:rotateX(45deg) rotateY(0deg) rotateZ(45deg);
    -o-transform:rotateX(45deg) rotateY(0deg) rotateZ(45deg);
    transform:rotateX(45deg) rotateY(0deg) rotateZ(45deg);
    }


    .fake-gif {
  position: relative;
  margin: 10rem auto 0 auto;
  width: 20rem;
  height: 20rem;


}
.fake-gif .stripe {
  position: absolute;
  border-radius: 50%;
  -webkit-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
  -webkit-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}
.fake-gif .stripe:nth-child(odd) {
  left: 0;
  width: 100%;
  height: 5%;
background-color: rgba(109, 60, 209, 0.5);
box-shadow: 0px 6px 40px #5800FF, inset 0px 2px 5px #DF00FF;

}
.fake-gif .stripe:nth-child(even) {
  top: 0;
  width: 5%;
  height: 100%;
 background-color: rgba(0, 240, 40, 0.5);
box-shadow: 0px 6px 40px #007D35, inset 0px 2px 5px #7CFFB5;
}
.fake-gif .stripe:nth-child(4n 1) {
  z-index: 3;
}
.fake-gif .stripe:nth-child(4n 2) {
  z-index: 4;
}
.fake-gif .stripe:nth-child(4n 3) {
  z-index: 1;
}
.fake-gif .stripe:nth-child(4n) {
  z-index: 2;
}
.fake-gif .stripe:nth-child(2) {
  left: 4.7%;
  -webkit-animation: move-y 2.7s 0.2s infinite;
  animation: move-y 2.7s 0.2s infinite;
}
.fake-gif .stripe:nth-child(4) {
  left: 11.9%;
  -webkit-animation: move-y 2.7s 0.4s infinite;
  animation: move-y 2.7s 0.4s infinite;
}
.fake-gif .stripe:nth-child(6) {
  left: 19.1%;
  -webkit-animation: move-y 2.7s 0.6s infinite;
  animation: move-y 2.7s 0.6s infinite;
}
.fake-gif .stripe:nth-child(8) {
  left: 26.3%;
  -webkit-animation: move-y 2.7s 0.8s infinite;
  animation: move-y 2.7s 0.8s infinite;
}
.fake-gif .stripe:nth-child(10) {
  left: 33.5%;
  -webkit-animation: move-y 2.7s 1s infinite;
  animation: move-y 2.7s 1s infinite;
}
.fake-gif .stripe:nth-child(12) {
  left: 40.7%;
  -webkit-animation: move-y 2.7s 1.2s infinite;
  animation: move-y 2.7s 1.2s infinite;
}
.fake-gif .stripe:nth-child(14) {
  left: 47.9%;
  -webkit-animation: move-y 2.7s 1.4s infinite;
  animation: move-y 2.7s 1.4s infinite;
}
.fake-gif .stripe:nth-child(16) {
  left: 55.1%;
  -webkit-animation: move-y 2.7s 1.6s infinite;
  animation: move-y 2.7s 1.6s infinite;
}
.fake-gif .stripe:nth-child(18) {
  left: 62.3%;
  -webkit-animation: move-y 2.7s 1.8s infinite;
  animation: move-y 2.7s 1.8s infinite;
}
.fake-gif .stripe:nth-child(20) {
  left: 69.5%;
  -webkit-animation: move-y 2.7s 2s infinite;
  animation: move-y 2.7s 2s infinite;
}
.fake-gif .stripe:nth-child(22) {
  left: 76.7%;
  -webkit-animation: move-y 2.7s 2.2s infinite;
  animation: move-y 2.7s 2.2s infinite;
}
.fake-gif .stripe:nth-child(24) {
  left: 83.9%;
  -webkit-animation: move-y 2.7s 2.4s infinite;
  animation: move-y 2.7s 2.4s infinite;
}
.fake-gif .stripe:nth-child(26) {
  left: 91.1%;
  -webkit-animation: move-y 2.7s 2.6s infinite;
  animation: move-y 2.7s 2.6s infinite;
}
.fake-gif .stripe:nth-child(1) {
  top: 3.6%;
  -webkit-animation: move-x 2.7s 0.1s infinite;
  animation: move-x 2.7s 0.1s infinite;
}
.fake-gif .stripe:nth-child(3) {
  top: 10.8%;
  -webkit-animation: move-x 2.7s 0.3s infinite;
  animation: move-x 2.7s 0.3s infinite;
}
.fake-gif .stripe:nth-child(5) {
  top: 18%;
  -webkit-animation: move-x 2.7s 0.5s infinite;
  animation: move-x 2.7s 0.5s infinite;
}
.fake-gif .stripe:nth-child(7) {
  top: 25.2%;
  -webkit-animation: move-x 2.7s 0.7s infinite;
  animation: move-x 2.7s 0.7s infinite;
}
.fake-gif .stripe:nth-child(9) {
  top: 32.4%;
  -webkit-animation: move-x 2.7s 0.9s infinite;
  animation: move-x 2.7s 0.9s infinite;
}
.fake-gif .stripe:nth-child(11) {
  top: 39.6%;
  -webkit-animation: move-x 2.7s 1.1s infinite;
  animation: move-x 2.7s 1.1s infinite;
}
.fake-gif .stripe:nth-child(13) {
  top: 46.8%;
  -webkit-animation: move-x 2.7s 1.3s infinite;
  animation: move-x 2.7s 1.3s infinite;
}
.fake-gif .stripe:nth-child(15) {
  top: 54%;
  -webkit-animation: move-x 2.7s 1.5s infinite;
  animation: move-x 2.7s 1.5s infinite;
}
.fake-gif .stripe:nth-child(17) {
  top: 61.2%;
  -webkit-animation: move-x 2.7s 1.7s infinite;
  animation: move-x 2.7s 1.7s infinite;
}
.fake-gif .stripe:nth-child(19) {
  top: 68.4%;
  -webkit-animation: move-x 2.7s 1.9s infinite;
  animation: move-x 2.7s 1.9s infinite;
}
.fake-gif .stripe:nth-child(21) {
  top: 75.6%;
  -webkit-animation: move-x 2.7s 2.1s infinite;
  animation: move-x 2.7s 2.1s infinite;
}
.fake-gif .stripe:nth-child(23) {
  top: 82.8%;
  -webkit-animation: move-x 2.7s 2.3s infinite;
  animation: move-x 2.7s 2.3s infinite;
}
.fake-gif .stripe:nth-child(25) {
  top: 90%;
  -webkit-animation: move-x 2.7s 2.5s infinite;
  animation: move-x 2.7s 2.5s infinite;
}

@-webkit-keyframes move-y {
  0%, 100% {
    -webkit-transform: translateZ(-25px);
    transform: translateZ(-25px);
  }

  50% {
    -webkit-transform: translateZ(25px);
    transform: translateZ(25px);
  }
}

@-webkit-keyframes move {
  0%, 100% {
    -webkit-transform: rotateX(-25deg) rotateY(-25deg);
    transform: rotateX(-25deg) rotateY(-25deg);
  }

  50% {
    -webkit-transform: rotateX(25px) rotateY(25deg);
    transform: rotateX(25px) rotateY(25deg);
  }
}

@keyframes move-y {
  0%, 100% {
    -webkit-transform: translateY(-25%);
    transform: translateY(-25%);
  }

  50% {
    -webkit-transform: translateY(25%);
    transform: translateY(25%);
  }
}
@-webkit-keyframes move-x {
  0%, 100% {
    -webkit-transform: translateZ(-25px);
    transform: translateZ(-25px);
  }

  50% {
    -webkit-transform: translateZ(25px);
    transform: translateZ(25px);
  }
}
@keyframes move-x {
  0%, 100% {
    -webkit-transform: translateX(-25%);
    transform: translateX(-25%);
  }

  50% {
    -webkit-transform: translateX(25%);
    transform: translateX(25%);
  }
}

注:本文爱编制程序原创小说,转发请注脚最先的作品地址:

CSS3是CSS的进步版本,插足了好些个新的天性,如圆角、边框、文字阴影、盒阴影、媒体询问、多栏布局、PAJEROGBA和光滑度等特点,因而得以兑现无数非常精粹的功能,那是CSS2比不断的。有个别基于CSS3落到实处的功力照旧足以和Flash相比美。本文介绍的7款游戏,正是使用CSS3开采,以致未曾应用JavaScript。此中某个游戏使用了在线编辑器,你能够由此转移代码来直观地察看效果的变型。1. CSS3 Panic Game那是三个简约但令人记念深入的玩乐,近似于打地鼠游戏,只行使HTML和CSS3,未有行使JavaScript。游戏,该游戏有6000行CSS3代码,在这之中前500行事CSS3代码,剩下的都以文本格式的图像编码。代码/演示:2. CSS Maze Puzzle Game采纳CSS3创造的迷宫游戏,使用鼠标从左侧箭头处早先,穿越迷宫,到达右下角。演示:3. Ninja Jarimaru游戏的使用者将扮演忍者弗雷德Jones剧中人物,在游玩中冒险、打野。使用鼠标进行支配,如前行、后退、跳跃等。演示:_beta/game/index.html4. Cow Click Shooting Game那是二个SLG游戏,通过鼠标点击来音乐游戏中冒出的牛,比较简单,但很有意思。演示:_game/css_game.htm源码:5. Cops and Robbers CSS Puzzle该游戏和上边的迷宫相似,通过鼠标来移动警察,幸免人犯从迷宫逃脱。演示:6. CSS3 of the Dead那是叁个纯CSS3完毕的AVG游戏,通过鼠标点击实行射击。代码/演示:7. Noughts and Crosses Game杰出的范围叉叉游戏,一个人用叉,一位用圈,此中一方连成3个就能够胜球,跟五子棋相像。该游戏中,使用CSS绘制的笑容来替代圈叉。代码/演示: webdeveloperjuice

Bokeh

行使 CSS3 渐变特新达成的相通摄影中的散景(Bokeh)效果。

图片 4

 

一个国外超炫的jquery图片切换效果

Direction-Aware Hover Effect with CSS3 and jQuery
How to create a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse.

是不是其生机勃勃例子吗?不领悟是或不是你要求的效用,供仿效
参谋资料:tympanus.net/...query/  

以前为大家介绍了相当多款由纯css3贯彻的特效。今日要再给我们带给风流倜傥款纯css3实现的超炫动漫...

3D Domo

接受 CSS3 绘制的立体人物,他的名字叫 DOMO。

图片 5

 

令人好奇的超炫网页演示:那正是CSS3写的

在此之前非常多索要编写制定复杂的 JavaScript 代码工夫贯彻的成效,近期只需求简单的写几句 CSS3 代码就会促成。后天那篇作品就向大家大饱眼福十多个令人惊惧的 CSS3 特性应用示范,让大家心得一下 CSS3 的吸重力。Monster使用CSS3 绘制的意外生物,移动你的鼠标看看会有怎么着遵守?小心被吃了呀!Tilt ShiftCSS3 完成的文书立体效果和旋转效果,点击文字步向编辑状态,能够输入文字。OLYMPUS那是一张相机图片?No!那是纯 CSS3 绘制的莱卡相机,未使用别的图片。Responsive Illustration使用CSS3 Media Query 本性达成的响应式设计(Responsive Design)的身体力行。Portals纯CSS3 完毕的时光隧道效果,令人不敢相信使用 CSS 代码就会写出那般的机能。Bowie绘声绘色的眨眼效果,特别的浪漫!Focus内容核心效应,鼠标悬浮的地点内容自动集中。Rain这一个演示模拟的是雨滴下降的成效,鼠标悬浮后移开,字符就能回退。Carve Me文本内阴影效果,能够模拟出雕刻的职能,使用 CSS3 text-shadow 性子完毕。Bokeh使用CSS3 渐变特新达成的好像油画中的散景(Bokeh)效果。Flashlight使用CSS3 本性模拟的不得了非常的龙岩效果。Icons会动的Logo,鼠标悬浮就可以知到效果。Solar System使用CSS3 性格模拟的太阳系(Solar System)。  

  正在发展中的 CSS3 是对 CSS 标准的四个超级大的改进和升高,它使得 Web 开垦人士能够非常轻易的在网址中参预洋气的信守。在此以前超级多内需编写制定复杂的 JavaScript 代码工夫兑现的法力,近期只必要轻易的写几句 CSS3 代码就能够促成。明天那篇小说就向大家享受16个令人咋舌的 CSS3 天性应用示范,让大家体会一下 CSS3 的魔力。

Leica

那是一张相机图片?No!那是纯 CSS3 绘制的莱卡相机,未接收别的图片。

图片 6

 

Rain

本条演示模拟的是雨水下跌的功效,鼠标悬浮后移开,字符就能够收缩。

图片 7

 

Monster

运用 CSS3 绘制的不测生物,移动你的鼠标看看会有啥效果?小心被吃了哟!

图片 8

 

Icons

会动的Logo,鼠标悬浮就能够看出功用。

图片 9

 

Flashlight

接收 CSS3 本性模拟的要命特别的普照效果。

图片 10

 

你只怕还垂怜

  • 十多少个可怜灿烂的 CSS3 本性应用示范
  • 贰十六个纯 CSS3 构建的精美LOGO图案
  • 24款非常实用的CSS3工具终极收藏
  • 推荐介绍13个能够的CSS3按键完结方案
  • CSS3能够达成的两种十分的帅很炫的意义

 

Tilt Shift

CSS3 完毕的文件立体效果和旋转效果,点击文字步入编辑状态,能够输入文字。

图片 11

 

Responsive Illustration

选择 CSS3 Media Query 性情落成的响应式设计(Responsive Design)的示范。

图片 12

 

你或然还心爱

 

  • 三21个令人愕然的 CSS3 动漫效果演示
  • 二十二个太酷的 CSS3 文本效果示例及学科
  • 14款相当的厉害的 CSS 网格系统生成工具
  • 35款迷你的 CSS3 和 HTML5 网页模板
  • 选用CSS3能够达成的三种太酷很炫的职能

 

文本链接:Web本领前沿:那么些令人欢乐的CSS3特性应用示范

编译来源:梦想天空 ◆ 关怀前端开荒技艺 ◆ 分享网页设计能源


Portals

纯 CSS3 实现的时光隧道效果,令人不敢相信使用 CSS 代码就能够写出这样的作用。

图片 13

 

Bowie

栩栩欲活的眨眼效果,极其的鲜活!

图片 14

 

Focus

剧情核心效应,鼠标悬浮的地点内容自动聚集。

图片 15

 

Solar System

应用 CSS3 天性模拟的太阳系(Solar System)。

图片 16

 

本文由澳门新葡萄京娱乐网站发布于web前端,转载请注明出处:纯 CSS3 实现的 Web 小游戏

关键词: