css骰子布局٩ξ°v°ʔو~

最新推荐文章于 2024-03-01 16:16:38 发布
最新推荐文章于 2024-03-01 16:16:38 发布
阅读量707 收藏 3
点赞数
分类专栏： 大一下 笔记 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51226264/article/details/116807705
版权

css骰子布局٩ξ°v°ʔو~

关于骰子布局，顾名思义就是用css来做出一个骰子，只不过是骰子的展开图。 在日常生活中我们知道，骰子相对的面眼数之和为7眼。

在这里插入图片描述

就是这个样子，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="touzi w1">
        <div class="circle1 m1"></div>
    </div>
    <div class="touzi w2">
        <div class="circle2 m2"></div>
        <div class="circle2 m3"></div>
    </div>
    <div class="touzi w3">
        <div class="circle3 m4"></div>
        <div class="circle3 m5"></div>
        <div class="circle3 m6"></div>
    </div>
    <div class="touzi w4">
        <div class="circle4 m7"></div>
        <div class="circle4 m8"></div>
        <div class="circle4 m9"></div>
        <div class="circle4 m10"></div>
    </div>
    <div class="touzi w5">
        <div class="circle5 m11"></div>
        <div class="circle5 m12"></div>
        <div class="circle5 m13"></div>
        <div class="circle5 m14"></div>
        <div class="circle5 m15"></div>
</div>
    <div class="touzi w6">
        <div class="circle6 m16"></div>
        <div class="circle6 m17"></div>
        <div class="circle6 m18"></div>
        <div class="circle6 m19"></div>
        <div class="circle6 m20"></div>
        <div class="circle6 m21"></div>
    </div>
</body>
</html>

class="touzi"即为骰子的的面，用w1——w6来区分面。
而每个面下面有着相应的眼数，即为circle，circle1——6分别是六面各自的眼，每个面之间的眼大小应该相同，而彼此之间位置不同，所以我设置了m用来控制每个眼在自己的面里的位置。
那么如何来确定眼的位置呢，就要用到子绝父相了。他不光可以控制面的位置，也可以控制眼的位置

* {
    margin: 0;
    padding: 0;
}
.touzi {
    /* margin: 20px; */
    float: left;
    width: 98px;
    height: 98px;
    border: 1px solid #787878;
    background-color: #e2e2e2;
    border-radius: 15%;
    position: relative;
}
.w1 {
    top: 200px;
    left: 300px;
}
.w2 {
    top: 300px;
    left: 100px;
}
.w3 {
    top: 300px;
    left: 300px;
}
.w4 {
    top: 300px;
    left: 0;
}
.w5 {
    top: 300px;
    left: 0;
}
.w6 {
    top: 400px;
    left: -200px;
}
.circle1 {
    width: 50px;
    height: 50px;
    background-color:beige;
    border-radius: 100%;
}
.m1 {
    position: absolute;
    top: 25px;
    left: 25px;
}
.circle2 {
    width: 40px;
    height: 40px;
    background-color: beige;
    border-radius: 100%;
}
.m2 {
    position: absolute;
    top: 5px;
    left: 30px;
}
.m3 {
    position: absolute;
    bottom: 5px;
    left: 30px;
}
.circle3 {
    width: 30px;
    height: 30px;
    background-color: beige;
    border-radius: 100%;
}
.m4 {
    position: absolute;
    top: 5px;
    left: 5px;
}
.m5 {
    position: absolute;
    top: 35px;
    left: 35px;
}
.m6 {
    position: absolute;
    bottom: 5px;
    right: 5px;
}
.circle4 {
    width: 30px;
    height: 30px;
    background-color: beige;
    border-radius: 100%;
}
.m7 {
    position: absolute;
    top: 5px;
    left: 5px;
}
.m8 {
    position: absolute;
    top: 5px;
    right: 5px;
}
.m9 {
    position: absolute;
    bottom: 5px;
    left: 5px;
}
.m10 {
    position: absolute;
    bottom: 5px;
    right: 5px;
}
.circle5 {
    width: 30px;
    height: 30px;
    background-color: beige;
    border-radius: 100%;
}
.m11 {
    position: absolute;
    top: 5px;
    left: 5px;
}
.m12 {
    position: absolute;
    top: 5px;
    right: 5px;
}
.m13 {
    position: absolute;
    top: 35px;
    left: 35px;
}
.m14 {
    position: absolute;
    bottom: 5px;
    left: 5px;
}
.m15 {
    position: absolute;
    bottom: 5px;
    right: 5px;
}
.circle6 {
    width: 25px;
    height: 25px;
    background-color: beige;
    border-radius: 100%;
}
.m16 {
    position: absolute;
    top: 5px;
    left: 5px;
}
.m17 {
    position: absolute;
    top: 5px;
    right: 5px;
}
.m18 {
    position: absolute;
    top: 37.5px;
    left: 5px;
}
.m19 {
    position: absolute;
    top: 37.5px;
    right: 5px;
}
.m20 {
    position: absolute;
    bottom: 5px;
    left: 5px;
}
.m21 {
    position: absolute;
    bottom: 5px;
    right: 5px;
}

当我只设置了眼的位置时，是这样的

在这里插入图片描述

而当我设置了面的位置后，是这样的

在这里插入图片描述
在定位面的时候要注意，面的相对位置是根据其原本的位置所进行的改变

有 机 弄 蛙
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3的Flexbox骰子布局的实现及问题讲解
12-30
本文中只是熟悉基本属性的用法，并完成一组骰子各个面的制作。在下面的内容我不会涉及flexbox一些比较棘手的问题，比如旧版本语法、供应商前缀、浏览器怪癖等： 一、First Face我们知道，骰子有六个面，每个面的点的个数代表该面的值，第一个面由一个水平垂直居中的点组成。下面来看具体的实现： CSS Code复制内容到剪贴板  <section u00a0name=01 class>      <span u00a0class=dot></span>     </section>    face-01 {    display: flex;   
Css样式--骰子3d
陈十七的博客
12-09 278
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>骰子3D图</title> <style class="text/css"> .wrap{ width:100px; height:100px; ...
【CSS flex布局】用flex写个骰子
Hemri2580的博客
10-20 1209
用flex写个骰子
CSS 自测题 -- 用 flex 布局绘制骰子（一、二、三【含斜三点】、四、五、六点）
最新发布
朝阳39的博客
03-01 1263
height;width;border;;/* 容器内元素使用flex布局 */display;/* 主轴居中对齐 */;.point;height;width;background;/* align-self 写在子元素上，覆盖父元素指定的交叉轴对齐方式 */align-self;
css3 flex 布局——骰子
且听风吟的博客
11-26 674
flex 布局小demo——骰子练习单项目两个项目三个项目四个项目九个项目 单项目 （1） <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>flex 布局——骰子</title> <style type="text/css"...
点文件：٩（'ω'）و我的点文件٩（'ω'）و
02-10
:smiling_face_with_halo: 点文件 :smiling_face_with_sunglasses: bash -c "$(curl -L dot.lkj.io)" 产品 外壳： 插件管理器： 主题： ide： 环境：unix（macOS）+ 手动设定 打开GPG钥匙串，放下gpg文件，然后...
shelAnime:٩（ˊᗜˋ *）
05-22
标题 "shelAnime:٩（ˊᗜˋ *）" 提示我们这可能与一个与动画表情符号相关的Shell脚本或项目有关。描述中的 "٩（ˊᗜˋ *）" 是一种网络表情符号，通常在动漫爱好者或二次元文化中使用，表示兴奋或愉快的情绪。"sh...
Firepower_Migration_Tool_v2.5-6263.exe
07-18
Cisco Secure Firewall Management Tools
Firepower_Migration_Tool_v2.4-5845.exe
07-18
Cisco Secure Firewall Management Tools
isr4300-universalk9.17.02.01v.SPA.bin
12-20
isr4300-universalk9.17.02.01v.SPA.bin
掷骰：使用CSS3动画的简单3D骰子掷骰
01-28
掷骰子 CSS3 Animation提供的简单3D骰子滚动动画制作器。 香草JS 将dist / roll-a-die.js复制到您的库文件夹中将其加载到HTML脚本中 [removed][removed] 您可以使用链接https://unpkg.com/roll-a-die@1.3.0/dist/roll-a-die.js 。 切记将包裹号更新为最新的。 调用带有其选项的方法。 rollADie({ element, numberOfDice: 2, callback}); 使用npm（和CommonJS构建器） 使用npm安装。 npm install --save roll-a-die 用纱安装。 yarn add roll-a-die 导入图书馆 ES5 const rollADie = require('roll-a-die'); ES6 import rollADie from 'roll-a-die'; 调用方法 rollADie({ element,
骰子样式html.html
05-21
骰子样式写法，类似骰子的样子，让自己更好 掌握编程的能力，我认为可以试着自己动手操作，也是对自己的一次测试哦！
css制作一个骰子
抚首
05-28 807
CSS代码： *{ margin: 0; padding: 0; } #box{ width: 200px; height: 200px; position: relative; left: 200px; top: 200px; transition: 5s all; transform-origin: center; perspective: 1000; /* 透视 眼睛距离屏幕的距离 */ tran
CSS实例：纯CSS实现polka dot，flex布局实现骰子
weixin_43509051的博客
08-20 245
最近看了很多CSS的东西，对CSS的布局有了更深一步的了解，下面两个实例感觉很有意思，都是用很精简的代码来实现的，上代码： 1.polka dot 关于polka dot是什么 background: #655; background-image: radial-gradient(tan 20%, transparent 0), radial-gradient(...
CSS布局之使用Flex布局画骰子（3点）
ThisEqualThis的博客
02-15 690
这次画3个点的骰子。大家可以先看图片默写代码，然后与文中代码做校验，来验证自己是否理解了Flex布局。若无基础，请优先阅读学习此文档。
html css做骰子,用CSS-flex写个骰子
weixin_30735701的博客
06-18 634
上班中午休息时间试着用flex做了一个CSS骰子，效果如下：demo主要是flex布局，写的时候用到的还有scss和一点vue，vue只是用作生成结构。HTMLvar vm = new Vue({el:'#app',data:{cellNumber:6},computed:{numberNum:function(){var old = this.cellNumber;if(old == ''){o...
利用css做一个立体的骰子模型
m0_49266584的博客
10-17 771
利用css做一个立体的骰子模型 今天是学前端的第3个星期，一般我们用css写的东西都是平面的或者说，给我们的感觉是2D的，那我们今天来做一个3D的骰子模型。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS(3D骰子)</title> <style> *{ pad
立体骰子（css3和js）
weixin_30815469的博客
02-23 223
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src='jquery-3.0.0.min.js'></script> <s...
多列布局HTML骰子,CSS多列布局
weixin_39731845的博客
06-20 115
需要注意的是：本篇文章的布局，都未对父元素进行清除浮动的操作，所以在有一些使用了float的布局中，需要在parent容器清除浮动，才能在实际情况下使用。(清除浮动的方式在这里不做讨论)一列定宽一列遇新是直朋能到分览自适应这部分的html结构如下新直能分支调二浏页器朋代说：leftrightright大家先来看看直接在左侧添加浮动是怎么样的吧：不要觉得诧异！因为float最开始的出现就是为了实现这...
先锋BDP-150：技术详解与关键特征
- 文档提到了播放音频文件的符号（ՊӠࡤـ، ٩٩٩، ю ю ю），以及播放视频时的控制代码，如࣐ᙟՊӶ، ی، ۲، ی، ی等，这些可能是与音频视频解码、播放列表控制或格式兼容性相关的。 4. 状态指示和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值