学习
实践
活动
工具
TVP
写文章
专栏首页AlbertYang的编程之路十分钟实现炫酷透明计算器,CSS3+JavaScript实现3D炫酷计算器

十分钟实现炫酷透明计算器,CSS3+JavaScript实现3D炫酷计算器

今天带大家实现了一个炫酷的透明计算器,实现的过程中需要用到

vanillatiltjs,一个平滑的3D倾斜javascript库,具体的使用和下载地址如下:

https://micku7zu.github.io/vanilla-tilt.js/

具体实现代码如下:

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>炫酷透明计算器:公众号AlbertYang</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div class="containter">
      <form class="calculator" name="calc">
        <input type="text" name="txt" class="value" readonly="readonly" />
        <span class="num clear" onclick="document.calc.txt.value = ''">C</span>
        <span class="num" onclick="document.calc.txt.value += '/'">/</span>
        <span class="num" onclick="document.calc.txt.value += '*'">*</span>
        <span class="num" onclick="document.calc.txt.value += '7'">7</span>
        <span class="num" onclick="document.calc.txt.value += '8'">8</span>
        <span class="num" onclick="document.calc.txt.value += '9'">9</span>
        <span class="num" onclick="document.calc.txt.value += '-'">-</span>
        <span class="num" onclick="document.calc.txt.value += '4'">4</span>
        <span class="num" onclick="document.calc.txt.value += '5'">5</span>
        <span class="num" onclick="document.calc.txt.value += '6'">6</span>
        <span class="num" onclick="document.calc.txt.value += '+'">+</span>
        <span class="num" onclick="document.calc.txt.value += '1'">1</span>
        <span class="num" onclick="document.calc.txt.value += '2'">2</span>
        <span class="num" onclick="document.calc.txt.value += '3'">3</span>
        <span class="num" onclick="document.calc.txt.value += '0'">0</span>
        <span class="num" onclick="document.calc.txt.value += '00'">00</span>
        <span class="num" onclick="document.calc.txt.value += '.'">.</span>
        <span class="num equal" onclick="document.calc.txt.value  = eval(document.calc.txt.value)">=</span>
      </form>
    </div>
    <script type="text/javascript" src="vanilla-tilt.js"></script>
    <script type="text/javascript">
      VanillaTilt.init(document.querySelector(".containter"), {
        max: 15,
        speed: 400,
        glare: true,
        "max-glare": 0.05,
        easing: "cubic-bezier(.03,.98,.52,.99)"
      });
</script>
  </body>
</html>

CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: darkslateblue;
}
body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#e91e63, #ffc107);
  clip-path: circle(20% at 30% 20%);
}
body::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#ffffff, #da00ff);
  clip-path: circle(20% at 70% 90%);
}
.containter {
  position: relative;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  overflow: hidden;
  z-index: 100;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.3);
}
.containter .calculator {
  position: relative;
  display: grid;
}
.calculator .value {
  grid-column: span 4;
  height: 150px;
  width: 320px;
  text-align: center;
  border: none;
  outline: none;
  padding: 10px;
  font-size: 20px;
  background-color: transparent;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.calculator span {
  display: grid;
  place-items: center;
  height: 80px;
  width: 80px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  transition: 0.5s;
}
.calculator span:hover {
  background: rgba(255, 255, 255, 0.05);
  transition: 0s;
}
.calculator span:active {
  background: #00bcd4;
  color: black;
  font-size: 24px;
  font-weight: 600;
}
.calculator .equal,
.calculator .clear {
  grid-column: span 2;
  width: 160px;
  background: rgba(255, 255, 255, 0.05);
}

由于本人能力和知识有限,如果有写的不对的地方,还请各位大佬批评指正,点击阅读原文留言。如果想继续学习提高,欢迎关注我,每天学习进步一点点,就是领先的开始,加油。如果觉得本文对你有帮助的话,欢迎转发,在看,点赞!!!

文章分享自微信公众号:
AlbertYang

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

作者:AlbertYang
原始发表时间:2020-12-18
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 网页|实现酷炫3D相册

    (2)为相框设置样式,用transform:rotateY(-10deg)为它设置旋转效果,用transform-style:preserve-3d来为图片设置...

    算法与编程之美
  • Flutter 实现酷炫的3D效果

    Flutter 中3D效果是通过 Transform 组件实现的,没有变换效果的实现:

    老孟Flutter
  • html+css实现漂亮透明的登录页面,HTML实现炫酷登录页面

    今天带大家,用html+css实现一个漂亮的登录页面,代码中关键部分我都做了注释,具体实现过程请看下面的视频和代码。

    AlbertYang
  • 使用CSS3实现酷炫的3D旋转视图

    3D动画效果现在越来越普及,已经被广泛的应用到了各个平台,比如阿里云,华为云,webpack官网等。它可以更接近于真实的展示我们的产品和介绍,带来极强的视觉冲击...

    徐小夕
  • 前端:使用CSS3实现酷炫的3D旋转透视

    3D动画效果现在越来越普及,已经被广泛的应用到了各个平台。它可以更接近于真实的展示我们的产品和介绍,带来极强的视觉冲击感。所以说,为了让自己更加优秀,css3 ...

    徐小夕
  • 《前端实战总结》之使用CSS3实现酷炫的3D旋转透视

    3D动画效果现在越来越普及,已经被广泛的应用到了各个平台,比如阿里云,华为云,webpack官网等。它可以更接近于真实的展示我们的产品和介绍,带来极强的视觉冲击...

    徐小夕
  • 《前端5分钟》之使用CSS3实现酷炫的3D旋转透视

    3D动画效果现在越来越普及,已经被广泛的应用到了各个平台,比如阿里云,华为云,webpack官网等。它可以更接近于真实的展示我们的产品和介绍,带来极强的视觉冲击...

    徐小夕
  • 一款优秀的BI软件应该具备哪些功能

    现在市面上有众多的BI软件,功能也五花八门,用户在选择BI软件的时候不知道该如何去评判。下面笔者就简单谈一谈一款优秀的BI软件应该具备哪些功能。

    数据前沿
  • 【案例】如何制作纯css3酷炫3D科技感菜单动画特效

    今天段老师给同学们带来的是一段纯CSS3实现的超炫酷3D菜单特效(实现了互动效果的菜单导航效果)。

    用户1730674
  • 一个Python GUI神器,双手彻底解放!

    它支持4个框架,包括tkinter,Qt,WxPython和Remi。与直接使用基础框架编写代码相比,PySimpleGUI代码更简单、更短,因为PySimpl...

    Python数据科学
  • 移动端复杂运营页解决方案的探索和实践

    摘要 如何成为一名优秀的切图工程师?百度资深研发工程师潘征与大家分享自己的工作心得。 ? ROLE移动端酷炫运营页 2014年开始,我在我们部门负责移动端酷炫运...

    IT大咖说
  • 程序员必备开发神器【MAC篇】

    上图,Alfred 图标,放大镜+小帽子,个人理解的意思就是搜索+酷,而且酷占了大部分,没错,一旦使用你了Alfred,你就会觉得自己非常的酷,就像你打绝地求生...

    先知先觉
  • 那些前端常用的网站插件

    这套工具集中的大部分你可能见过,也可能没见过,如果有哪个/些让你眼前一亮,那么我的分享就很值了。 这个列表包含许多种类的资源,所以这里我将它们分组整理。 Jav...

    企鹅号小编
  • 3分钟画出酷炫动态地图的秘诀!

    地图可视化,更常见的作用是“展示”,在某个报告,某份PPT里,来几张让外行看了大呼牛X的炫酷地图,然后我们莞尔一笑,深藏功与名。

    用户1564362
  • 一个小彩蛋

    今天要介绍的就是大神的 Scalpel,可以实现在手机上 3D 展示届满布局,而且用起来超级简单!

    蜻蜓队长
  • 程序员必备狂拽炫酷吊炸天的动效神器

    薛定喵君

扫码关注腾讯云开发者

领取腾讯云代金券