在小时候我们都有这一个赌侠梦，今天我们就用css来实现一下筛子吧
效果图
实现思路
筛子一共拥有六个面，这里我们就用无序列表盒子进行承载，无序列表里面总共有六个盒子，筛子的点我们通过伪元素的方式实现，由于我们的伪元素只有两个可以操控，所以我们在点数不够的情况下在往里面添加盒子，利用添加盒子的伪元素进行其他点数的实现，这里我们往无序列表中添加i元素作为多余盒子，在通过flex布局结合定位的方式实现点数的布局排列，最后通过css中的transform-style: preserve-3d;属性实现让子元素在3D空间中展示，这样比较好看，然后再通过css属性进行控制每个子元素的排列位置，以此来实现一个方形筛子的六个面，在利用css设置好筛子的旋转点，最后在声明一个css动画，让ul元素通过css属性进行转动
页面结构
<ul> <!-- 一个点 --> <li></li> <!-- 二个点 --> <li></li> <!-- 三个点 --> <li> <i></i> </li> <!-- 四个点 --> <li> <i></i> <i></i> </li> <!-- 五个点 --> <li> <i></i> <i></i> </li> <!-- 六个点 --> <li> <i></i> <i></i> </li> </ul>
页面初始样式
消除页面初始样式且清除无序列表的默认样式
* { margin: 0; padding: 0; list-style: none; }
筛子
给父元素设置样式，父元素通过定位的方式居于页面的正中间，设置开启3D属性且设置旋转中心
ul { position: absolute; top: calc(50% - 50px); left:calc(50% - 50px); width: 100px; height: 100px; transform-style: preserve-3d; display: flex; justify-content: center; flex-wrap: wrap; transform-origin: center center; animation: rotate 3s linear infinite; }
给子元素设置统一的边框背景等样式，开启定位便于后续实现3D的效果
ul>li { box-sizing: border-box; position: absolute; padding: 10px; width: 100px; height: 100px; background: rgb(199, 185, 185); border: 2px solid #000; }
点数，这里样式基本一样，使用并集选择器
ul>li:nth-child(1)::after, ul>li:nth-child(2)::after, ul>li:nth-child(2)::before, ul>li:nth-child(3)::after, ul>li:nth-child(3)::before, ul>li:nth-child(3) i, ul>li:nth-child(4) i::after, ul>li:nth-child(4) i::before, ul>li:nth-child(5)::after, ul>li:nth-child(5) i::after, ul>li:nth-child(5) i::before, ul>li:nth-child(6)::before, ul>li:nth-child(6)::after, ul>li:nth-child(6) i::after, ul>li:nth-child(6) i::before { content: ''; width: 15px; height: 15px; border-radius: 50%; background: #000; }
给每个子元素开启flex布局，可以操控伪元素和i标签的伪元素，通过他们作为筛子的点数，在通过定位的方式定位点数的位置
一个点
ul>li:nth-child(1) { display: flex; justify-content: center; align-items: center; transform: translateZ(50px); }
二个点
ul>li:nth-child(2) { display: flex; justify-content: space-around; align-items: center; transform: rotateY(180deg) translateZ(50px); }
三个点
ul>li:nth-child(3) { display: flex; flex-direction: column; justify-content: space-around; align-items: center; transform: rotateY(90deg) translateZ(50px); }
四个点
ul>li:nth-child(4) { display: flex; flex-direction: column; justify-content: space-between; align-items: center; transform: rotateY(-90deg) translateZ(50px); } ul>li:nth-child(4) i { width: 100%; display: flex; justify-content: space-between; }
五个点
ul>li:nth-child(5) { display: flex; flex-direction: column; justify-content: space-between; align-items: center; transform: rotateX(90deg) translateZ(50px); } ul>li:nth-child(5) i { width: 100%; display: flex; justify-content: space-between; } ul>li:nth-child(5)::after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
六个点
ul>li:nth-child(6) { display: flex; flex-direction: column; justify-content: space-between; align-items: center; transform: rotateX(-90deg) translateZ(50px); } ul>li:nth-child(6) i { width: 100%; display: flex; justify-content: space-between; } ul>li:nth-child(6)::after { position: absolute; top: 50%; right: 10px; transform: translate(0, -50%); } ul>li:nth-child(6)::before { position: absolute; top: 50%; left: 10px; transform: translate(0, -50%); }
声明一个动画且让父元素进行使用
ul { animation: rotate 3s linear infinite; } @keyframes rotate { 0% { transform: rotate3d(1, 1, 1, 0deg); } 100% { transform: rotate3d(1, 1, 1, 360deg); } }
代码我已经放到码上掘金上了，快来看看吧
我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！
