什么网站做旅行计划,个人引擎网站什么做,h5美食制作网站模板,免费空间试用效果展示 页面结构组成
从上述的效果可以看出#xff0c;计算机的页面比较规整#xff0c;适合grid布局。
CSS3 知识点
grid 布局
实现计算机布局
div classcontainerform classcalculator namecalcinput type…效果展示 页面结构组成
从上述的效果可以看出计算机的页面比较规整适合grid布局。
CSS3 知识点
grid 布局
实现计算机布局
div classcontainerform classcalculator namecalcinput typetext readonly classvalue nametxt /span classnum clear onclickcalc.txt.value C/spanspan classnum onclickdocument.calc.txt.value ///spanspan classnum onclickdocument.calc.txt.value **/spanspan classnum onclickdocument.calc.txt.value 77/spanspan classnum onclickdocument.calc.txt.value 88/spanspan classnum onclickdocument.calc.txt.value 99/spanspan classnum onclickdocument.calc.txt.value --/spanspan classnum onclickdocument.calc.txt.value 44/spanspan classnum onclickdocument.calc.txt.value 55/spanspan classnum onclickdocument.calc.txt.value 66/spanspan classnum plus onclickdocument.calc.txt.value /spanspan classnum onclickdocument.calc.txt.value 11/spanspan classnum onclickdocument.calc.txt.value 22/spanspan classnum onclickdocument.calc.txt.value 33/spanspan classnum onclickdocument.calc.txt.value 00/spanspan classnum onclickdocument.calc.txt.value 0000/spanspan classnum onclickdocument.calc.txt.value ../spanspan classnum onclickdocument.calc.txt.value /span/form
/div.container {position: relative;background: rgba(255, 255, 255, 0.05);border-radius: 6px;overflow: hidden;z-index: 10;backdrop-filter: blur(15px);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.2);
}.container .calculator {position: relative;display: grid;
}.container .calculator .value {grid-column: span 4;height: 140px;width: 300px;text-align: right;border: none;outline: none;padding: 10px;font-size: 30px;background: transparent;color: #fff;border-bottom: 1px solid rgba(255, 255, 255, 0.05);border-right: 1px solid rgba(255, 255, 255, 0.05);
}.container .calculator span {display: grid;place-items: center;width: 75px;height: 75px;color: #fff;font-weight: 400;cursor: pointer;font-size: 20px;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;
}/* 使用 grid-column 和 grid-row 进行单元格合并 */
.container .calculator .clear {grid-column: span 2;width: 150px;background: rgba(255, 255, 255, 0.05);
}.container .calculator .plus {grid-row: span 2;height: 150px;
}.container .calculator .equal {background: rgba(255, 255, 255, 0.05);
}使用VanillaTilt工具函数让计算器随鼠标旋转
计算器会这鼠标的位置进行旋转我们采用VanillaTilt工具来帮我们实现。
VanillaTilt.init(document.querySelector(.container), {max: 25,speed: 400,
});完整代码下载
完整代码下载
