css
关注
分享
扫一扫
梧桐深院
这个作者很懒，什么都没留下…
展开
-
解决css转盘游戏中transform:rotate不能多次转动问题
解决css转盘游戏中transform:rotate不能多次转动问题用css的transform属性实现的转盘游戏，都是让元素转动指定的角度来实现抽奖的目的。假如我们的转盘被分成了八份，每一份就是45度，如下图：当我们要抽中某一个时，一般都会把指针指向扇形的中间，所以如果要指向第一个扇形的中间，就是转动22.5度，在上图，我们用指针的逆时针转动，来解释转盘的顺时针转动。要指向其它的扇形就是再依次增加45度。但是这样每次转盘的转动都不会超过一圈，对于一个抽奖游戏来说，可能效果不太好。所以我们随机出某个原创 2021-07-03 22:27:49 · 1399 阅读 · 4 评论 -
步骤分解：教你五步实现css转盘抽奖小游戏
教你五步实现css转盘抽奖小游戏先看一下整体效果。分解思路：第一步：先画一个园这里是class="box"代码段第二步：在圆上面再画一个圆圈，加点阴影效果，有那么点立体的感觉这里是在上面的基础累加上class="turntable"代码段第三步：画小圆灯累加上class="little-circle"代码段，这里小圆灯等分用到了transform-origin属性，找准旋转的圆心即可。第四步：画扇形奖品区画扇形是一个比较头疼的问题，这里是用平行四边形代替，把多余的部分遮住，留原创 2021-07-03 13:42:28 · 2403 阅读 · 3 评论 -
我是如何发现用css边框（border）可以实现画三角形的
平时我用css的border属性，都是用很小的像素，反映到界面上就是很细的边框，像下面这样。<style>.triangle{ width:100px; height:100px; border:1px solid red;}</style><div class="triangle"></div>可怕的是，我也一直认为只能这样用。当有一天，我为了调试，把各个边框像素放大，并且使用了不同的颜色，奇迹出现了。<style>.原创 2021-06-30 10:54:01 · 258 阅读 · 2 评论 -
css两端对齐-justify不生效问题
参考文档：https://developer.mozilla.org/en-US/docs/Web/CSS/text-align问题遇到justify不生效的情况，往往是我们的文本只有一行导致的，但是文档明确的说了，justify对最后一行不生效，当你只有一行文本的时候，那么它也是最后 一行，所以不生效。解决：利用CSS伪元素::after用来创建一个伪元素，添加一行内容，并且将其隐藏，这样我们要显示的内容就不是最后一行了，justify就会生效。<html><head>原创 2021-05-31 10:43:51 · 2006 阅读 · 0 评论 -
css outline属性，实现选区以外加半透明遮罩
outline:rgb(220,220,220,0.7) solid 5000px;原创 2021-04-27 08:48:36 · 515 阅读 · 0 评论