纯css3计算器特效

最新推荐文章于 2022-10-08 14:11:38 发布
最新推荐文章于 2022-10-08 14:11:38 发布
阅读量306 收藏
点赞数
分类专栏： 网页特效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45959525/article/details/107367911
版权

css3属性制作简单的计算器加减乘除运算代码。
在这里插入图片描述

<form>
		<div id="digit1">
			<input type="checkbox" id="d1-1" class="number1">
			<input type="checkbox" id="d1-2" class="number2">
			<input type="checkbox" id="d1-3" class="number3">
			<input type="checkbox" id="d1-4" class="number4">
			<input type="checkbox" id="d1-5" class="number5">
			<input type="checkbox" id="d1-6" class="number6">
			<input type="checkbox" id="d1-7" class="number7">
			<input type="checkbox" id="d1-8" class="number8">
			<input type="checkbox" id="d1-9" class="number9">
			<div id="digit2">
				<input type="checkbox" id="d2-0" class="number0">
				<input type="checkbox" id="d2-1" class="number1">
				<input type="checkbox" id="d2-2" class="number2">
				<input type="checkbox" id="d2-3" class="number3">
				<input type="checkbox" id="d2-4" class="number4">
				<input type="checkbox" id="d2-5" class="number5">
				<input type="checkbox" id="d2-6" class="number6">
				<input type="checkbox" id="d2-7" class="number7">
				<input type="checkbox" id="d2-8" class="number8">
				<input type="checkbox" id="d2-9" class="number9">
				<div id="digit3">
					<input type="checkbox" id="d3-0" class="number0">
					<input type="checkbox" id="d3-1" class="number1">
					<input type="checkbox" id="d3-2" class="number2">
					<input type="checkbox" id="d3-3" class="number3">
					<input type="checkbox" id="d3-4" class="number4">
					<input type="checkbox" id="d3-5" class="number5">
					<input type="checkbox" id="d3-6" class="number6">
					<input type="checkbox" id="d3-7" class="number7">
					<input type="checkbox" id="d3-8" class="number8">
					<input type="checkbox" id="d3-9" class="number9">
					<div id="digit4">
						<input type="checkbox" id="d4-0" class="number0">
						<input type="checkbox" id="d4-1" class="number1">
						<input type="checkbox" id="d4-2" class="number2">
						<input type="checkbox" id="d4-3" class="number3">
						<input type="checkbox" id="d4-4" class="number4">
						<input type="checkbox" id="d4-5" class="number5">
						<input type="checkbox" id="d4-6" class="number6">
						<input type="checkbox" id="d4-7" class="number7">
						<input type="checkbox" id="d4-8" class="number8">
						<input type="checkbox" id="d4-9" class="number9">
						<div id="digit5">
							<input type="checkbox" id="d5-0" class="number0">
							<input type="checkbox" id="d5-1" class="number1">
							<input type="checkbox" id="d5-2" class="number2">
							<input type="checkbox" id="d5-3" class="number3">
							<input type="checkbox" id="d5-4" class="number4">
							<input type="checkbox" id="d5-5" class="number5">
							<input type="checkbox" id="d5-6" class="number6">
							<input type="checkbox" id="d5-7" class="number7">
							<input type="checkbox" id="d5-8" class="number8">
							<input type="checkbox" id="d5-9" class="number9">
							<div id="digit6">
								<input type="checkbox" id="d6-0" class="number0">
								<input type="checkbox" id="d6-1" class="number1">
								<input type="checkbox" id="d6-2" class="number2">
								<input type="checkbox" id="d6-3" class="number3">
								<input type="checkbox" id="d6-4" class="number4">
								<input type="checkbox" id="d6-5" class="number5">
								<input type="checkbox" id="d6-6" class="number6">
								<input type="checkbox" id="d6-7" class="number7">
								<input type="checkbox" id="d6-8" class="number8">
								<input type="checkbox" id="d6-9" class="number9">
								<div id="digit7">
									<input type="checkbox" id="d7-0" class="number0">
									<input type="checkbox" id="d7-1" class="number1">
									<input type="checkbox" id="d7-2" class="number2">
									<input type="checkbox" id="d7-3" class="number3">
									<input type="checkbox" id="d7-4" class="number4">
									<input type="checkbox" id="d7-5" class="number5">
									<input type="checkbox" id="d7-6" class="number6">
									<input type="checkbox" id="d7-7" class="number7">
									<input type="checkbox" id="d7-8" class="number8">
									<input type="checkbox" id="d7-9" class="number9">
									<div id="digit8">
										<input type="checkbox" id="d8-0" class="number0">
										<input type="checkbox" id="d8-1" class="number1">
										<input type="checkbox" id="d8-2" class="number2">
										<input type="checkbox" id="d8-3" class="number3">
										<input type="checkbox" id="d8-4" class="number4">
										<input type="checkbox" id="d8-5" class="number5">
										<input type="checkbox" id="d8-6" class="number6">
										<input type="checkbox" id="d8-7" class="number7">
										<input type="checkbox" id="d8-8" class="number8">
										<input type="checkbox" id="d8-9" class="number9">
										<div id="operations">
											<input type="checkbox" id="add">
											<input type="checkbox" id="subtract">
											<input type="checkbox" id="multiply">
											<input type="checkbox" id="divide">
											<input type="checkbox" id="equals">
											<main>
												<div id="screen">
													<div id="input"></div>
													<div id="output"></div>
												</div>
												<div id="buttons">
													<button type="button">
														<label for="d8-7" class="digit8"></label>
														<label for="d7-7" class="digit7"></label>
														<label for="d6-7" class="digit6"></label>
														<label for="d5-7" class="digit5"></label>
														<label for="d4-7" class="digit4"></label>
														<label for="d3-7" class="digit3"></label>
														<label for="d2-7" class="digit2"></label>
														<label for="d1-7" class="digit1"></label>
														7
													</button>
													<button type="button">
														<label for="d8-8" class="digit8"></label>
														<label for="d7-8" class="digit7"></label>
														<label for="d6-8" class="digit6"></label>
														<label for="d5-8" class="digit5"></label>
														<label for="d4-8" class="digit4"></label>
														<label for="d3-8" class="digit3"></label>
														<label for="d2-8" class="digit2"></label>
														<label for="d1-8" class="digit1"></label>
														8
													</button>
													<button type="button">
														<label for="d8-9" class="digit8"></label>
														<label for="d7-9" class="digit7"></label>
														<label for="d6-9" class="digit6"></label>
														<label for="d5-9" class="digit5"></label>
														<label for="d4-9" class="digit4"></label>
														<label for="d3-9" class="digit3"></label>
														<label for="d2-9" class="digit2"></label>
														<label for="d1-9" class="digit1"></label>
														9
													</button>
													<button type="button"><label for="divide"></label>&divide;</button>
													<button type="button">
														<label for="d8-4" class="digit8"></label>
														<label for="d7-4" class="digit7"></label>
														<label for="d6-4" class="digit6"></label>
														<label for="d5-4" class="digit5"></label>
														<label for="d4-4" class="digit4"></label>
														<label for="d3-4" class="digit3"></label>
														<label for="d2-4" class="digit2"></label>
														<label for="d1-4" class="digit1"></label>
														4
													</button>
													<button type="button">
														<label for="d8-5" class="digit8"></label>
														<label for="d7-5" class="digit7"></label>
														<label for="d6-5" class="digit6"></label>
														<label for="d5-5" class="digit5"></label>
														<label for="d4-5" class="digit4"></label>
														<label for="d3-5" class="digit3"></label>
														<label for="d2-5" class="digit2"></label>
														<label for="d1-5" class="digit1"></label>
														5
													</button>
													<button type="button">
														<label for="d8-6" class="digit8"></label>
														<label for="d7-6" class="digit7"></label>
														<label for="d6-6" class="digit6"></label>
														<label for="d5-6" class="digit5"></label>
														<label for="d4-6" class="digit4"></label>
														<label for="d3-6" class="digit3"></label>
														<label for="d2-6" class="digit2"></label>
														<label for="d1-6" class="digit1"></label>
														6
													</button>
													<button type="button"><label for="multiply"></label>&times;</button>
													<button type="button">
														<label for="d8-1" class="digit8"></label>
														<label for="d7-1" class="digit7"></label>
														<label for="d6-1" class="digit6"></label>
														<label for="d5-1" class="digit5"></label>
														<label for="d4-1" class="digit4"></label>
														<label for="d3-1" class="digit3"></label>
														<label for="d2-1" class="digit2"></label>
														<label for="d1-1" class="digit1"></label>
														1
													</button>
													<button type="button">
														<label for="d8-2" class="digit8"></label>
														<label for="d7-2" class="digit7"></label>
														<label for="d6-2" class="digit6"></label>
														<label for="d5-2" class="digit5"></label>
														<label for="d4-2" class="digit4"></label>
														<label for="d3-2" class="digit3"></label>
														<label for="d2-2" class="digit2"></label>
														<label for="d1-2" class="digit1"></label>
														2
													</button>
													<button type="button">
														<label for="d8-3" class="digit8"></label>
														<label for="d7-3" class="digit7"></label>
														<label for="d6-3" class="digit6"></label>
														<label for="d5-3" class="digit5"></label>
														<label for="d4-3" class="digit4"></label>
														<label for="d3-3" class="digit3"></label>
														<label for="d2-3" class="digit2"></label>
														<label for="d1-3" class="digit1"></label>
														3
													</button>
													<button type="button"><label for="subtract"></label>-</button>
													<button type="button"><input type="reset" value="AC"></button>
													<button type="button">
														<label for="d8-0" class="digit8"></label>
														<label for="d7-0" class="digit7"></label>
														<label for="d6-0" class="digit6"></label>
														<label for="d5-0" class="digit5"></label>
														<label for="d4-0" class="digit4"></label>
														<label for="d3-0" class="digit3"></label>
														<label for="d2-0" class="digit2"></label>
														<label for="d1-0" class="digit1"></label>
														0
													</button>
													<button type="button"><label for="equals"></label>=</button>
													<button type="button"><label for="add"></label>+</button>
												</div>
											</main>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</form>

/* ### LOGIC ################ */
.number9 + * { --digit: 0; }
.number0:checked + * + * + * + * + * + * + * + * + * + * { --digit: 0; }
.number1:checked + * + * + * + * + * + * + * + * + * { --digit: 1; }
.number2:checked + * + * + * + * + * + * + * + * { --digit: 2; }
.number3:checked + * + * + * + * + * + * + * { --digit: 3; }
.number4:checked + * + * + * + * + * + * { --digit: 4; }
.number5:checked + * + * + * + * + * { --digit: 5; }
.number6:checked + * + * + * + * { --digit: 6; }
.number7:checked + * + * + * { --digit: 7; }
.number8:checked + * + * { --digit: 8; }
.number9:checked + * { --digit: 9; }

#digit1 > :checked ~ :last-child { --digit-1: var(--digit); --value-1: var(--digit); }
#digit2 > :checked ~ :last-child { --digit-2: var(--digit); --value-1: calc(var(--digit-1) * 10 + var(--digit-2)); }
#digit3 > :checked ~ :last-child { --digit-3: var(--digit); --value-1: calc(var(--digit-1) * 100 + var(--digit-2) * 10 + var(--digit-3)); }
#digit4 > :checked ~ :last-child { --digit-4: var(--digit); --value-1: calc(var(--digit-1) * 1000 + var(--digit-2) * 100 + var(--digit-3) * 10 + var(--digit-4)); }
#digit5 > :checked ~ :last-child { --digit-5: var(--digit); --value-2: var(--digit-5); }
#digit6 > :checked ~ :last-child { --digit-6: var(--digit); --value-2: calc(var(--digit-5) * 10 + var(--digit-6)); }
#digit7 > :checked ~ :last-child { --digit-7: var(--digit); --value-2: calc(var(--digit-5) * 100 + var(--digit-6) * 10 + var(--digit-7)); }
#digit8 > :checked ~ :last-child { --digit-8: var(--digit); --value-2: calc(var(--digit-5) * 1000 + var(--digit-6) * 100 + var(--digit-7) * 10 + var(--digit-8)); }

#add:checked      ~ #equals:checked ~ main { --out: calc(var(--value-1) + var(--value-2)); }
#subtract:checked ~ #equals:checked ~ main { --out: calc(var(--value-1) - var(--value-2)); }
#multiply:checked ~ #equals:checked ~ main { --out: calc(var(--value-1) * var(--value-2)); }
#divide:checked   ~ #equals:checked ~ main { --out: calc(var(--value-1) / var(--value-2)); }

main { counter-reset: value1 var(--value-1, 0) value2 var(--value-2, 0) out var(--out, 0); }

/*    a
*/
 #input::after { content: ""; }
#output::after { content: counter(value1); }

/*    a
      +
*/
#operations > :checked ~ #equals:not(:checked) ~ main #input::after { content: counter(value1); }

#add:checked      ~ #equals:not(:checked) ~ main  #output::after { content: "+"; }
#subtract:checked ~ #equals:not(:checked) ~ main  #output::after { content: "-"; }
#multiply:checked ~ #equals:not(:checked) ~ main  #output::after { content: "\00D7"; }
#divide:checked   ~ #equals:not(:checked) ~ main  #output::after { content: "\00f7"; }

/*   a +
       b
*/
#digit5 :checked ~ div #add:checked      ~ #equals:not(:checked) ~ main  #input::after { content: counter(value1) " + "; }
#digit5 :checked ~ div #subtract:checked ~ #equals:not(:checked) ~ main  #input::after { content: counter(value1) " - "; }
#digit5 :checked ~ div #multiply:checked ~ #equals:not(:checked) ~ main  #input::after { content: counter(value1) " \00D7  "; }
#digit5 :checked ~ div #divide:checked   ~ #equals:not(:checked) ~ main  #input::after { content: counter(value1) " \00f7 "; }

#digit5 :checked ~ div #operations > :checked ~ #equals:not(:checked) ~ main #output::after,
#digit5 :checked ~     #operations > :checked ~ #equals:not(:checked) ~ main #output::after { content: counter(value2); }

/* a + b
       c
*/
#add:checked      ~ #equals:checked ~ main  #input::after { content: counter(value1) " + " counter(value2); }
#subtract:checked ~ #equals:checked ~ main  #input::after { content: counter(value1) " - " counter(value2); }
#multiply:checked ~ #equals:checked ~ main  #input::after { content: counter(value1) " \00D7  " counter(value2); }
#divide:checked   ~ #equals:checked ~ main  #input::after { content: counter(value1) " \00f7  " counter(value2); }


#equals:checked ~ main #output::after { content: counter(out); }

/* dividing by 0 */
#digit5 > .number0:checked ~ div #divide:checked ~ #equals:checked ~ main #output::after { content: "Oi"; }

#digit5 > .number0:checked ~ div #divide:checked ~ #equals:checked ~ main #output::after { content: "Oi"; }
#digit5 :not(.number0):checked ~ div #divide:checked ~ #equals:checked ~ main #output::after { content: counter(out); }

button {
	position: relative;
	border: none;
}

label {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}

label.digit5,
label.digit6,
label.digit7,
label.digit8 { display: none; }

#operations > :checked ~ main label { display: block; }

#digit1 > :checked ~ div label.digit1 { display: none; }
#digit2 > :checked ~ div label.digit2 { display: none; }
#digit3 > :checked ~ div label.digit3 { display: none; }
#digit4 > :checked ~ div label.digit4 { display: none; }

#digit5 > :checked ~ div label.digit5 { display: none; }
#digit6 > :checked ~ div label.digit6 { display: none; }
#digit7 > :checked ~ div label.digit7 { display: none; }
#digit8 > :checked ~ div label.digit8 { display: none; }

#operations > :checked ~ #equals:not(:checked) ~ main label:nth-child(n + 4) { display: none; }
#operations > :checked ~ #equals:not(:checked) ~ main label.digit5 { display: block; }

#operations > :checked ~ #equals:checked ~ main label { display: none !important; }

#digit5 > :checked ~ div #operations > :checked ~ #equals:not(:checked) ~ main label.digit5 { display: none; }
#digit5 > .number0:checked ~ div  #operations > :checked ~ #equals:not(:checked) ~ main label.digit5 { display: block; }
#digit5 > .number0:checked ~ :checked ~ div  #operations > :checked ~ #equals:not(:checked) ~ main label.digit5 { display: none; }

label[for=equals]{ display: none; }
#digit5 > :checked ~ div #operations > :checked ~ #equals ~ main label[for=equals]{ display: block; }

#operations > :checked ~ main button:nth-child(4n) label { display: none; }

#digit5 > .number0:checked ~ div main button:nth-child(14) label { pointer-events: none; }
#digit5 > .number0:checked ~ :checked ~ div main button:nth-child(14) label { pointer-events: initial; }

input[type=checkbox]{
	position: fixed;
	right: 0;
	top: 0;
	display: block;
	width: 1px;
	height: 1px;
	opacity: 0.01;
	transform: scale(0.01);
}

/* ### DESIGN #######################*/
body {
	font: 20px / 1.5 Roboto, arial, sans-serif;
	height: 100vh;
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	background-color: khaki;
}

main {
	width: 100vw;
	max-width: 400px;
	height: 100vh;
  min-height: 500px;
	max-height: 600px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 10px 2px rgba(0, 0, 0, 0.1),
		0 5px 20px 5px rgba(0, 0, 0, 0.08),
		0 2px 6px rgba(0, 0, 0, 0.1);
	background-color: #f7f5eb;
}

#screen {
	height: 250px;
	text-align: right;
	color: rgba(0, 0, 0, 0.7);
}

#input {
	height: 50px;
	line-height: 50px;
	padding: 50px 36px 0;
}

#output {
	height: 150px;
	line-height: 100px;
	padding: 0 36px;
	font-size: 80px;
}

#buttons {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-columns: repeat(4, 1fr);
	background-color: #555;
}


button::-moz-focus-inner, input::-moz-focus-inner { border: 0; }

button {
	color: rgba(255, 255, 255, 0.7);
	background: none;
	font-size: 20px;
	font-family: inherit;
	outline: none;
	padding: 0;
	overflow: hidden;
}

button::after {
	content: "";
	background-color: rgba(255, 255, 255, 0.1);
	opacity: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	transition: .2s;
	pointer-events: none;
}

button:hover::after {
	opacity: 1;
}

button::before {
	content: "";
	background-color: rgba(255, 255, 255, 0.1);
	width: 100px;
	height: 100px;
	border-radius: 50%;
	position: absolute;
	left: 50%;
	top: 50%;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.8);
	transition: .3s;
	animation: .2s 0s 1 bloop;
	pointer-events: none;
}

@keyframes bloop{
	from { transform: translate(-50%, -50%); opacity: 1; }
	to { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

button:active::before {
	opacity: 1;
	transform: translate(-50%, -50%);	
	animation: none;
}

button:nth-child(4n){
	background-color: #f4e660;
	color: rgba(0, 0, 0, 0.6);
}

button:nth-child(4n)::after, button:nth-child(4n)::before{
	background-color: rgba(121, 104, 6, 0.1);
}

button, button * {
	cursor: pointer;
}


button:nth-child(13){
	overflow: visible;
}
button:nth-child(13)::before, button:nth-child(13)::after{
	content: none;
}

input[type=reset]{
	background: #f4e660;
	border: none;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: rgba(0, 0, 0, 0.6);
	font-size: inherit;
	font-family: inherit;
	padding: 0;
	outline: none;
	transition: .2s;
}

input[type=reset]:hover{ background-color: #e7d956; }
input[type=reset]:active { background-color: #dccd4d; }





@media screen and (max-width: 600px){
	main {
		max-width: none;
		max-height: none;
	}

}
W Y L
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3-制作简单和科学的计算器
jimbooks的博客
08-02 558
CSS3-制作简单和科学的计算器 如果浏览不顺畅请到原文章出处：https://www.sky8g.com/css3-make-calculator/ 请注意可能会提示风险，这是csdn设置网站设置的问题，请放心访问，谢谢。 https://www.sky8g.com/css3-make-calculator/ 本篇文章原创文章禁止抄袭和复制，否者必究。今天给大家讲解下，利用css...
纯css3加减乘除计算器代码
07-24
纯css3加减乘除计算器代码是一款css3属性制作简单的计算器加减乘除运算代码。
css做计算器,CSS3 纯CSS计算器
weixin_36269334的博客
08-04 437
CSS语言：CSSSCSS确定:root {--step: 14px;--bg: #666;--color: #fff;--color-scale: #fff;--bg-scale: #111;--bg-checked: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.7));--bg-unche...
简约计算器效果 html+css
你好呀，很高兴你在看这里~
02-01 1705
效果： 实现： 定义标签, .result是显示计算结果框，.anniu里放数字和运算符按钮，.zero是清除按钮，它们都在表单域 form里： <form class="kuang" name="kuang" > <input type="text" class="result" name="result"> <div class="anniu"> <span onclick="kuang.resul
纯css计算器代码可计算
ICode联盟
10-08 89
纯css计算器代码，可计算简单的加减乘除。
css3彩色计算器特效代码
03-20
css3彩色计算器是一款基于css3实现的3D彩色鼠标控制的计算器。 css3彩色计算器演示图： 点击查看演示：
html5 css3响应式彩色计算器动画特效
11-24
html5 css3响应式彩色计算器动画特效
纯css3加减乘除计算器代码.zip
10-09
非常实用的特效代码，可以完美运行，可以二次修改！
霓虹透明玻璃状计算器CSS3特效.zip
最新发布
10-15
非常实用好看的特效代码，可以完美运行，可以二次修改！
CSS3实现ios7计算器 CSS3实现ios7计算器网页特效.zip
11-17
CSS3实现ios7计算器 CSS3实现ios7计算器网页特效.zip
纯div+css计算器（作业）
11-17
按作业要求做的纯DIV+CSS计算器，没有加jsp的功能，只是为了熟悉div+css的基本知识，强调的是外观相似。 说得很明白了。
CSS3制作个性漂亮计算器特效
03-15
CSS3制作个性漂亮计算器特效
css 计算器
03-31
css控制做得 网页计算器 简介 美观 供参考
CSS样式实现计算器
xyh_qianxiao的博客
04-02 1966
css样式就是把样式和元素分开了，相当于程序中的函数一样，复用性增强了。 计算器样式： 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--被style夹着的都叫CSS样式，全部都是英文全拼写--> <!--标签选择器，对所有的标签都是一样的样式-->
用CSS做计算器（可使用）
qq_43463419的博客
04-01 327
用CSS做计算器（可使用） electronic calculator ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210401112921765.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDYzNDE5,size_16,color_FFFFFF,t_70#pic_
【计算器】纯html+css+js实现
qq_44497467的博客
09-08 147
1.onClick（）处理传入this指针即为点击的标签。通过innerText获取到点击的按钮的值。4.由于赶时间还未完成用户输入控制。2.eval（）计算字符串里的公式。3.JS 字符串方法巩固。
计算器html5+css3+jQuery实现
qq_31674229的博客
03-09 690
下载地址：https://download.csdn.net/download/qq_31674229/10277981小弟在面试中遇到一个前端的问题，公司采取的是机试，共有三个问题。简单的排序，敲敲代码，就搞定。创建两个线程，分别对数据进行操作。考察的是线程的使用。（继承Thread类和实现Runnable接口）使用html5+css3+jQuery实现一个计算器。设计图如下：（公司给的没这个美...
css写一个计算器叭
deliefu3790的博客
07-20 129
显示效果如图，emoji可替换为数字。 代码是这样的： 因为不是很难（因为我很懒），就不多加说明了，具体参考代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content...
【前端】HTML和CSS案例 计算器页面效果（起点闭关计划）
weixin_48680173的博客
02-19 449
关于
纯CSS3实现边框跑马灯特效
05-17
可以使用CSS3的动画属性和伪元素来实现边框跑马灯特效。 首先，需要给元素设置一个固定的宽度和高度，并设置边框样式。然后，使用伪元素::before和::after来创建两个半透明的遮罩层，覆盖在元素的边框上方。 接...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值