专栏首页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(AlbertYang666),作者:AlbertYang

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-12-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

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

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

    企鹅号小编
  • 一周极客热文:厌倦了编程书?3种提高编程技能的有趣方法来帮忙

    Code Combat 如果你曾经从书上学习编写代码,你就知道那有多乏味。为什么不试试一些激动人心的方法来使学习更有乐趣呢?下面介绍的这些网站每个都有自己独特...

    钱曙光
  • 程序员必备狂拽炫酷吊炸天的动效神器

    薛定喵君
  • GitHub 上有意思的项目推荐

    前端GoGoGo
  • html5自学教程:8个炫酷CSS动画及源码分享

    在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用...

    用户7705674
  • 【案例】如何制作纯css3酷炫3D科技感菜单动画特效

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

    用户1730674
  • 10个CSS3动画工具,值得你收藏!

    人类对于运动的食物往往会投入更多的关注,因此巧妙的使用动画能够极大地提升网站的用户体验,快速唤起用户对重要元素的关注。

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

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

    徐小夕
  • 30个最优CSS动画案例分享,轻松让网页用户随心而“动”

    CSS或CSS3动画,包括常见的鼠标悬停动画,网页加载动画,页面切换动画,文本动画以及背景动画等等,能够有效地提升网页趣味性和视觉吸引力。这也是为什么CSS/C...

    奔跑的小鹿
  • H5动效的常见制作手法 - 腾讯ISUX

    腾讯ISUX
  • 手把手教你玩转 CSS3 3D 技术

    css3的3d起步 要玩转css3的3d,就必须了解几个词汇,便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现...

    用户1289394
  • 新手学习web前端的基础知识内容有哪些

    前几年,很多人看到IT行业越来越火,就想转行成为程序员。那时候转行还是很简单的,不一定要掌握很多技术知识,如果你是前端人员,甚至会写个静态页面就可以去应聘了。但...

    千锋哈尔滨IT培训
  • 移动端复杂运营页解决方案的探索和实践

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

    IT大咖说
  • 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

    Sb_Coco
  • 分享一个WebGL开发的网站-用JavaScript + WebGL开发3D模型

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

    Jerry Wang
  • 史上最全的web前端学习教程汇总!

    第一阶段:HTML+CSS HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础:js基础教程、js内置对象常用方...

    企鹅号小编
  • 10个免费好用功能强大的网页动画效果库

    动效设计是2018年的热门趋势之一。如果你仔细找找的话,会发现许多有趣的用来构建UI动效的工具,而这些素材和工具正在成为越来越多设计项目中不可或缺的催化剂。今天...

    IT派
  • Web3D地图来了!腾讯位置服务JavaScript API GL正式版发布

    ? 腾讯位置服务在半年前推出JavaScript API GL beta版,这期间很多开发者将其采用到自己的项目中,同时为我们反馈使用问题与建议,帮助Java...

    腾讯位置服务
  • 细数:英特尔IDF2015上的那些黑科技

    穿梭在现实于虚拟之间,萌大叔刷脸解锁,听话的蜘蛛人,会写字的无人机,电子音乐与声波的奇妙表演……一整场的黑科技,让人目不暇接,在场的观众也无不兴奋。 不一样的开...

    机器人网

扫码关注云+社区

领取腾讯云代金券