CSS

语言：

CSSSCSS

确定

html,

body {

width: 100%;

height: 100%;

margin: 0;

}

html {

font-size: 10px;

background: #ddd;

}

* {

box-padding: border-box;

}

.container {

width: 100%;

height: 100%;

}

.bg {

position: absolute;

width: 100%;

height: 100%;

overflow: hidden;

}

.bg:after {

position: absolute;

width: 200%;

height: 75%;

left: -50%;

bottom: 0;

content: '';

background-size: 5em 5em;

background-color: #ccc;

background-image: linear-gradient(90deg, #999 .05em, transparent .05em), linear-gradient(#999 .05em, transparent .05em);

transform: perspective( 400px) rotateX( 45deg);

z-index: 0;

}

.stage {

width: 30em;

height: 30em;

position: absolute;

margin-top: 25%;

margin-left: 50%;

transform: translate(-50%, -50%);

perspective: 1000px;

}

/* Cube */

.cube {

width: 100%;

height: 100%;

position: absolute;

transform-style: preserve-3d;

}

.cube > div {

margin: 0;

top: 5em;

left: 5em;

width: 20em;

height: 20em;

display: block;

position: absolute;

opacity: 0.5;

}

.cube .front {

transform: rotateY( 0deg) translateZ( 10em);

background: red;

}

.cube .back {

transform: rotateX( 180deg) translateZ( 10em);

background: green;

}

.cube .right {

transform: rotateY( 90deg) translateZ( 10em);

background: blue;

}

.cube .left {

transform: rotateY( -90deg) translateZ( 10em);

background: yellow;

}

.cube .top {

transform: rotateX( 90deg) translateZ( 10em);

background: orange;

}

.cube .bottom {

transform: rotateX( -90deg) translateZ( 10em);

background: purple;

}

/* Controls */

.controls {

position: absolute;

bottom: 0;

left: 0;

right: 0;

padding: 1em;

width: 250px;

margin: auto;

background: rgba(0, 0, 0, .5);

}

.form-row {

margin: .5em 0;

}

.form-row > * {

vertical-align: middle;

margin-right: .5em;

font-size: 1.5em;

}

label {

color: #fff;

}

input[type=text] {

width: 2.5em;

padding: .25em;

border: none;

border-radius: .5em;

}

input[type=range] {

-webkit-appearance: none;

}

input[type=range]:focus {

outline: none;

}

input[type=range]::-webkit-slider-runnable-track {

width: 100%;

height: 2px;

cursor: pointer;

animate: 0.2s;

box-shadow: 0px 0px 0px #000000;

background: #FFFFFF;

border-radius: 0px;

border: 0px solid #000000;

}

input[type=range]::-webkit-slider-thumb {

box-shadow: 0px 0px 0px #000000;

border: 0px solid #2497E3;

height: 20px;

width: 10px;

border-radius: 0px;

background: #FFFFFF;

cursor: pointer;

-webkit-appearance: none;

margin-top: -9px;

}

input[type=range]:focus::-webkit-slider-runnable-track {

background: #FFFFFF;

}

input[type=range]::-moz-range-track {

width: 100%;

height: 2px;

cursor: pointer;

animate: 0.2s;

box-shadow: 0px 0px 0px #000000;

background: #FFFFFF;

border-radius: 0px;

border: 0px solid #000000;

}

input[type=range]::-moz-range-thumb {

box-shadow: 0px 0px 0px #000000;

border: 0px solid #2497E3;

height: 20px;

width: 10px;

border-radius: 0px;

background: #FFFFFF;

cursor: pointer;

}

input[type=range]::-ms-track {

width: 100%;

height: 2px;

cursor: pointer;

animate: 0.2s;

background: transparent;

border-color: transparent;

color: transparent;

}

input[type=range]::-ms-fill-lower {

background: #FFFFFF;

border: 0px solid #000000;

border-radius: 0px;

box-shadow: 0px 0px 0px #000000;

}

input[type=range]::-ms-fill-upper {

background: #FFFFFF;

border: 0px solid #000000;

border-radius: 0px;

box-shadow: 0px 0px 0px #000000;

}

input[type=range]::-ms-thumb {

box-shadow: 0px 0px 0px #000000;

border: 0px solid #2497E3;

height: 20px;

width: 10px;

border-radius: 0px;

background: #FFFFFF;

cursor: pointer;

}

input[type=range]:focus::-ms-fill-lower {

background: #FFFFFF;

}

input[type=range]:focus::-ms-fill-upper {

background: #FFFFFF;

}

HTML5输出字母围成的正方形,通过CSS生成的立体正方形相关推荐

  1. CSS制作旋转立体正方形

    <div class="stage"><div class="container"><div class="side f ...

  2. html 创建一个正方形,css 如何设置带有正方形项目的列表

    css设置带有正方形项目的列表的方法:首先创建一个HTML示例文件:然后使用ul无序列表标签,并指定"list-style-type"为"square"即可设置 ...

  3. C语言例题理解（小写字母转换成大写字母，兔子生兔子问题，求100以内勾股数，整数逆序输出）

    例一(小写字母转换成大写字母) #include <stdio.h> int main() {char x,y;printf("输入一个小写字母:\n");x=getc ...

  4. 输入一个字符串，将字符串中的大写字母改成小写字母，小写字母不变，其他字符忽略，然后输出转换之后的结果。

    题目:输入一个字符串,将字符串中的大写字母改成小写字母,小写字母不变,其他字符忽略,然后输出转换之后的结果. 实现思路: 1.通过扫描器Scanner输入一个字符串. 2.字符串大写字母改小写字母,小 ...

  5. 输入一串字符串，将其中的大写字母换成小写，小写字母换成大写输出。

    题目: 输入一串字符串,将其中的大写字母换成小写,小写字母换成大写输出.例如输入abdAd,输出ABDaD. 分析: 题目的关键在于大小写的转换问题,ASCII字符编码的了解和转换问题. 对于ASCI ...

  6. C语言-如何将大写字母转化成小写字母输出(新手初学版）

    将大写字母转化成小写字母输出 **方法一:**前提:(输入以'.'结尾的一串字符) 使用scanf和printf函数. #include <stdio.h> int main() {cha ...

  7. 两条曲线所围成的面积_人教版数学六年级上册 5.3：圆的面积（一） 微课视频|知识点|课件解析|同步练习...

    [教学微课堂] [知识点] 一.圆的认识 1.日常生活中的圆 2.画图.感知圆的基本特征 (1)实物画图 (2)系绳画图 3.对比,感知圆的特征:我们以前学过的长方形.正方形.平行四边形.梯形.三角形 ...

  8. 转换成字符串_汇编语言--将字符串中小写字母转换成大写字母

    将字符串中小写字母转换成大写字母 思路: 将键盘上输入的字符读入 调用DOS 10号功能 利用偏移量的性质(类似指针的移动),逐一将字符转换为大写 在转换完的字符串后面 加上 结束符 '$' 利用DO ...

  9. 将单词的首字母转换成大写

    做个记录: 1.用sed方法: sed 's/^\w\|\s\w/\U&/g' 简单说明: \w 相当于 [a-zA-Z0-9] ,\s 表示 任何空白字符(包括空格,制表等).\U将后面的字 ...

最新文章

  1. python十二:字符串格式化
  2. 即时通讯网 - 即时通讯开发者社区! --备完
  3. HDU 4417 Super Mario（莫队 + 树状数组 + 离散化）
  4. Spring Boot教程(11) – 理解注解@ControllerAdvice
  5. 大数据分析技术未来发展会如何
  6. Transact-SQL管理与开发实例精粹
  7. libsvm 参数以及计算测试点相似度
  8. JS错误 theForm.submit();SCRIPT3: 找不到成员。
  9. 苹果开场铃声 android,推荐几款免费安卓、苹果手机铃声剪辑软件？
  10. C语言malloc函数的用法
  11. PS：制作螺旋波点背景色块
  12. 全国计算机一级证书重点知识,全国计算机一级
  13. 利用全长转录组多重阵列测序检测同源异构体
  14. Mysql主从（主从不同步解决办法，常见问题及解决办法）
  15. 嵌入式系统项目设计——基于LED、按键、蜂鸣器的打地鼠游戏（完整代码）
  16. IntelliJ IDEA的下载安装与破解
  17. Python逆向进阶：Web逆向私单
  18. 世界坐标系，相机坐标系，图像坐标系，像素坐标系转换
  19. 手板（prototype）
  20. Google产品经理面试题：村子里有100对夫妻，其中每个丈夫都瞒着自己的妻子偷情......

热门文章

  1. webpack5打包图片并放到指定文件夹下
  2. 基于微信小程序的新冠疫苗预约小程序
  3. uni-app怎么让左上角有个小房子的图标点击回到首页
  4. PYTHON面向对象章节深入讲解-张明阳-专题视频课程
  5. Nginx - 使用Nginx实现数据采集的构想
  6. java学生考勤系统视频_手把手教你做一个Java 学生信息、选课、签到考勤、成绩管理系统附带完整源码及视频开发教程...
  7. 合并文件夹内所有Excel文件（目前仅限于合并单层文件夹，如果文件夹下面有文件夹，暂未加入此功能，默认合并所有文件的所有Sheet）优化文件名_变更为：文件夹名字 + 合并的文件-(xls+xlsx)
  8. (DT系列一)DTS结构及其编译方法
  9. Unity资源加载方式
  10. python 获取硬盘信息失败请谨慎操作_【裸机装系统】获取硬盘信息失败，请谨慎操作！(示例代码)...