CSS3实现带阴影的弹球

最新推荐文章于 2021-12-09 21:07:19 发布
最新推荐文章于 2021-12-09 21:07:19 发布
阅读量85 收藏
点赞数
原文链接：http://www.cnblogs.com/xiaobaizhiqian/p/8366500.html
版权

实现div上下跳动时，底部阴影随着变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3实现带阴影的弹球</title>
    <style type="text/css">
        .box{
            width: 400px;
            height: 300px;
            border: 1px #cccccc solid;
            /*距上下30，左右居中*/
            margin: 30px auto;
            /* 设置相对定位，以便子元素使用绝对定位 */
            position: relative;
        }
        .box .ball, .box .ball:after{
            border-radius: 50%;
            position: absolute;
            left: 50%;
            background: linear-gradient(top, #ffffff, #999999);
            background: -webkit-linear-gradient(top, #ffffff, #999999);
            background: -moz-linear-gradient(top, #ffffff, #999999);
            background: -ms-linear-gradient(top, #ffffff, #999999);
            background: -o-linear-gradient(top, #ffffff, #999999);
        }
        .box .ball{
            width: 140px;
            height: 140px;
            top: 0;
            /*因为是绝对定位，距左边百分之50，这里距左是左边距盒子左边，所以这里需要通过margin向左移动宽度一般的距离*/
            margin-left: -70px;
            -webkit-box-shadow: inset 0 0 30px #999999,inset 0 -15px 70px #999999;
            -moz-box-shadow: inset 0 0 30px #999999,inset 0 -15px 70px #999999;
            box-shadow: inset 0 0 30px #999999,inset 0 -15px 70px #999999;
            -webkit-animation: jump 5s ease-in infinite;
            -o-animation: jump 5s ease-in infinite;
            animation: jump 5s ease-in infinite;
            /*让球遮住阴影（使球显示在阴影上方）*/
            z-index: 1;
        }
        .box .ball:after{
            content: "";
            display: block;
            width: 70px;
            height: 30px;
            border-radius: 50%;
            top: 10px;
            margin-left: -35px;
        }
        .box .shadow{
            width: 80px;
            height: 60px;
            border-radius: 50%;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -40px;
            background: rgba(20, 20, 20, .1);
            -webkit-box-shadow: 0 0 25px 20px rgba(20, 20, 20, .1);
            -moz-box-shadow: 0 0 25px 20px rgba(20, 20, 20, .1);
            box-shadow: 0 0 25px 20px rgba(20, 20, 20, .1);
            -webkit-transform: scaleY(.3);
            -moz-transform: scaleY(.3);
            -ms-transform: scaleY(.3);
            -o-transform: scaleY(.3);
            transform: scaleY(.3);
            -webkit-animation: shrink 5s ease-in infinite;
            -o-animation: shrink 5s ease-in infinite;
            animation: shrink 5s ease-in infinite;
        }
        @-webkit-keyframes jump {
            0%{ top: 0; }
            65%{ top: 160px; height: 140px; }
            75%{ height: 120px; }
            100%{ top: 0; height: 140px; }
        }
        @-o-keyframes jump {
            0%{ top: 0; }
            65%{ top: 160px; height: 140px; }
            75%{ height: 120px; }
            100%{ top: 0; height: 140px; }
        }
        @keyframes jump {
            0%{ top: 0; }
            65%{ top: 160px; height: 140px; }
            75%{ height: 120px; }
            100%{ top: 0; height: 140px; }
        }
        @-webkit-keyframes shrink {
            0%{ width: 90px; height: 60px; }
            65%{ width: 10px; height: 5px; margin-left: -5px; background: rgba(20, 20,20, .3);
                -webkit-box-shadow: 0 0 25px 20px rgba(20, 20, 20, .3);
                -moz-box-shadow: 0 0 25px 20px rgba(20, 20, 20, .3);
                box-shadow: 0 0 25px 20px rgba(20, 20, 20, .3); }
            100%{ width: 90px; height: 60px; background: rgba(20, 20,20, .1);
                -webkit-box-shadow: 0 0 25px 20px rgba(20, 20, 20, .1);
                -moz-box-shadow: 0 0 25px 20px rgba(20, 20, 20, .1);
                box-shadow: 0 0 25px 20px rgba(20, 20, 20, .1); }
        }
    </style>
</head>
<body>
<div class="box">
    <div class="ball"></div>
    <div class="shadow"></div>
</div>
</body>
</html>

 

转载于:https://www.cnblogs.com/xiaobaizhiqian/p/8366500.html

weixin_30416871
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
台球html网页特效代码,你想不到的! web前端中CSS 实现的各种球体效果
weixin_31528001的博客
06-04 650
CSS 可以实现很多你想不到的效果，今天我们来尝试使用 CSS 实现各种球体效果。有两种方法可以实现，第一种是使用大量的元素创建实际的 3D 球体，这种方法有潜在的性能问题；另外一种是使用 CSS3 渐变和阴影特性来实现，实现方法简单，效果精美。为保证效果，请使用 Chrome、Firefox、Safari 等现代浏览器浏览。基本形状我们先来实现一个基本的圆，HTML 代码如下：径向渐变上面实现了...
【CSS】动画animation所含各项参数内容
Evenurs的url
06-09 6138
主要描述CSS3中，对于animation动画效果设置语句中，各个参数的详细说明，以及范例代码。
动画效果的实现
mshkkhhgy的博客
11-15 344
关于做360的动画效果： 先是搜集相关的图片，之后用Photoshop将图片抠出来。 用sublime text3写出相关的代码。链接相关的css样式； 运用所学的css3属性，在样式里添加声明动画的@keyframes  名字 { from{ 加入转换的属性 如：transform：translate(0px); } to{ 如：transform：transl
【css】css3实现弹跳小球
weixin_42582523的博客
12-09 559
html: <div></div> <div></div> css: *{ margin: 0; padding: 0; } body { width: 100vw; height: 100vh; display: flex; flex-direction: colu...
js实现带积分弹球小游戏
10-15
主要为大家详细介绍了js实现带积分弹球小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
python3实现弹弹球小游戏
09-18
主要介绍了python3实现弹弹球小游戏，图形用户界面tkinter，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
java实现简单的弹球游戏
08-29
主要为大家详细介绍了java实现简单的弹球游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
css3 小球 弹跳 坠落 效果
pcz675938069的博客
01-14 1347
今天,我们准备利用CSS3动画来做一个实验。在我们的前一篇文章中，我们讨论了如何利用CSS3动画实现改造“移动字幕”的效果。这次，我们将会尝试利用弹跳效果制作一个“通知栏”。   ·VIEW DEMO   准备开始 让我们先新建一个新的HTML工程文件，并且输入下面的代码用来构建这个通知栏。 view plaincopy to clipboardprint? &lt;div...
css3实现弹球效果
chouxiao5566的博客
06-13 439
<style> *{margin:0px;padding:0px;list-style: none;} .box{width:400px;height:300px;border:1px solid #ccc;margin:30px auto;position:relative;...
HTML5小球弹跳动画 很不错的3D小球
08-23
今天我要向大家分享一款很逼真的HTML5动画特效，它是3个色彩各异的弹跳小球，每一个小球在弹跳的时候都会有变化的小球投影，让整个动画更加逼真，而且具有3D的视觉效果。之前分享过小球跳动的Loading动画，效果也非常不错。
JavaScript滑竿弹球游戏（部分效果用css3）
02-28
JavaScript滑竿弹球游戏（部分效果用css3），用键盘的左右键控制滑竿。用回车键也可以开始，用空格键也可以暂停。
ease,seae-in,ease-in-out,ease-out,效果
热门推荐
昔人'
12-10 3万+
值 描述 linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。(匀速) ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）（相对于匀速，中间快，两头慢）。 ease-in 规定以慢速开始的过渡效果（等于 cubic-
css3橙色球形_如何使用CSS3实现球体运动阴影
weixin_31983133的博客
12-23 292
CSS语言：CSSSCSS确定.frame {position: absolute;top: 50%;left: 50%;width: 400px;height: 400px;margin-top: -200px;margin-left: -200px;border-radius: 2px;box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.25);overf...
css小球落地阴影,CSS3实现带阴影的弹球
weixin_34060561的博客
08-03 461
实现div上下跳动时，底部阴影随着变化CSS3实现带阴影的弹球.box{width: 400px;height: 300px;border: 1px #cccccc solid;/*距上下30，左右居中*/margin: 30px auto;/* 设置相对定位，以便子元素使用绝对定位 */position: relative;}.box .ball, .box .ball:after{border...
CSS3绘制弹球动画效果
weixin_30897233的博客
12-05 267
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width:400px; ...
CSS3 仿京东边框从中间逐渐放大效果
李二狗的博客
02-16 3437
昨天看一个朋友发的京东的效果 然后就自己扒了下来  确实感觉到css3的强大  话不多说 贴代码   #box{     width: 300px;     height: 300px;     transition: all 5s;     position: relative;   }   #box ::before{     co
css动画-animation各个属性详解
weixin_45810135的博客
10-04 1万+
css3的animation很容易就能实现各种酷炫的动画，虽然看到别人的成果图会觉得很难，但是如果掌握好各种动画属性，做好酷炫吊炸天的动画都不在话下，好，切入正题。 一、动画属性： 动画属性包括： ①animation-name， ②animation-duration， ③animation-timing-function， ④animation-delay， ⑤animation-iteration-count， ⑥animation-direction， ⑦animation-fill-mode， ⑧
css3动画 小球弹跳
weixin_43352942的博客
07-07 844
效果如下： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小球弹跳</title> <style> * { margin: 0; paddi
de2-115实现fpga弹球游戏
最新发布
07-07
### 回答1： de2-115是一款FPGA开发板，它可以用于设计和实现各种数字电路和嵌入式系统。要在de2-115上实现弹球游戏，需要以下步骤： 1. 设计游戏逻辑：首先，需要设计游戏的逻辑，包括弹球的运动方向，碰撞检测，得分逻辑等。可以使用硬件描述语言（如VHDL或Verilog）来描述游戏逻辑。 2. 编写硬件描述语言代码：将游戏逻辑转换为硬件描述语言代码，并对其进行编写。使用硬件描述语言可以将游戏逻辑转化为可在FPGA上实现的电路。 3. 进行仿真和验证：在将代码加载到FPGA之前，可以使用仿真工具对其进行验证。仿真工具可以模拟游戏逻辑的行为，并验证其正确性。 4. 系统集成：将已验证的代码加载到de2-115开发板上的FPGA中。这可以通过将代码编译成可以在开发板上运行的位流文件来实现。 5. 连接输入输出设备：弹球游戏需要接收玩家的输入操作（如移动弹板），并将游戏画面显示在显示屏上。可以通过连接外设（如键盘和显示器）来实现输入和输出功能。 6. 调试和优化：在加载代码到FPGA之后，可能会发现一些问题或需要进一步优化。可以使用调试工具对游戏进行调试，并根据需要进行优化，以提高性能或改进游戏体验。 综上所述，通过以上步骤可以在de2-115上实现弹球游戏。这个过程需要有一定的硬件设计和编程知识，以及对FPGA开发板的理解和使用能力。 ### 回答2： de2-115是一款常用于FPGA（现场可编程门阵列）系统设计的开发板。要实现FPGA弹球游戏，我们可以用de2-115开发板上的FPGA芯片来实现游戏的逻辑和控制。 在实现弹球游戏的过程中，首先需要使用硬件描述语言（如VHDL或Verilog）编写游戏的逻辑代码。这些代码会定义游戏的规则，控制球的移动，检测碰撞和计算分数等功能。 我们可以利用de2-115开发板上的输入输出接口，连接输入的按钮或开关来控制游戏的开始、暂停、继续和重新开始等功能。同时，我们可以使用板上的LED灯来显示游戏的分数或其他重要信息。 为了让玩家能够看到游戏画面，我们可以使用开发板上的VGA接口连接一个显示器。通过编写逻辑代码，我们可以将游戏画面绘制在显示器上，并且实时更新球的位置和移动情况。 此外，我们还可以利用板上的音频接口，给游戏增加声音效果。例如，当球和挡板碰撞时，可以播放一个撞击声音，或者在游戏结束时播放一段胜利或失败的音乐。 最后，在实现完成后，我们可以通过将逻辑代码下载到de2-115开发板的FPGA芯片中，运行游戏并进行测试。如果需要的话，我们还可以进行调试和优化，以达到更好的游戏性能和用户体验。 总结来说，利用de2-115开发板上的FPGA芯片和各种输入输出接口，我们可以很方便地实现弹球游戏，包括游戏逻辑、控制、显示和音效等功能。 ### 回答3： de2-115实现FPGA弹球游戏可以按照以下步骤进行： 1. 首先，在DE2-115 FPGA开发板上进行设计，我们需要使用Quartus Prime软件来创建我们的项目。 2. 在Quartus Prime中，我们需要使用硬件描述语言（HDL）来编写我们的游戏逻辑。可以使用Verilog或VHDL进行编程。 3. 游戏的主要组成部分是球和挡板。我们需要为球和挡板设计相应的模块。 4. 对于球模块，我们需要定义球的位置、速度和移动方向。我们可以使用计时器来控制球的移动，并在碰撞检测时改变球的方向。 5. 对于挡板模块，我们需要定义挡板的位置、大小和移动方式。我们可以使用开发板上的按钮或开关来控制挡板的移动，以阻止球的移动。 6. 在游戏的主模块中，我们需要将球和挡板模块相互连接，并在FPGA开发板的显示器上显示游戏画面。我们可以使用VGA接口来连接显示器，并使用适当的时钟信号来控制帧率。 7. 在游戏的逻辑中，我们需要实现碰撞检测和分数计算等功能。当球碰到挡板时，分数会增加，并且球的方向会改变。 8. 最后，我们需要将设计好的游戏逻辑编译并烧录到FPGA开发板上，以实现游戏的运行。 通过以上步骤，我们可以在DE2-115 FPGA开发板上成功实现一个基于硬件描述语言的弹球游戏。这样的设计不仅可以提高我们对FPGA开发的理解，还可以帮助我们熟悉使用Quartus Prime软件进行FPGA开发。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值