纯css实现if与函数数字运算及计算器示例代码-html代码-BFW代码库

纯css实现if与函数数字运算及计算器示例代码

代码语言：html

代码描述：纯css实现if与函数数字运算及计算器示例代码，没有任何一行js代码，通过css的新特性if与function来实现计算器。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
  
<style>
@import url(https://fonts.bunny.net/css?family=cutive-mono:400|jura:300,500);
@layer base, demo;

@layer demo {
	.math-wrapper {
		display: none;
	}
	@supports (appearance: base-select) {
		/* this is not the ideal check but currently there is no way to check if a browser supports the if() or function() functions. As this code also uses custom select styling I am using that to check */
		:root {
			--option-radius: 5px;
			--option-color: var(--clr-text);
			--option-color-current: hotpink;
			--option-color-hover: dodgerblue;
		}
		.math-wrapper {
			display: block;
			--math: if(
				style(--operation: "+"): --add(var(--value-1), var(--value-2)) ;
					style(--operation: "-"): --subtract(var(--value-1), var(--value-2)) ;
					style(--operation: "*"): --multiply(var(--value-1), var(--value-2)) ;
					style(--operation: "/"): --div.........完整代码请登录后点击上方下载按钮下载查看