论坛 › 马黑黑教程专版 › CSS+HTML纸风车

马黑黑 发表于 2024-8-27 19:48

CSS+HTML纸风车

本帖最后由 马黑黑 于 2024-8-27 19:50 编辑 <br /><br /><style>
.mdiv {
        --size: 300px;
        margin: 50px auto;
        width: var(--size);
        height: var(--size);
        border: 1px solid gray;
        transition: 3s;
        position: relative;
}
.mdiv:hover { transform: rotate(360deg); }
.mdiv > span {
        position: absolute;
        left: calc(var(--size) / 4);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: calc(var(--size) / 4) calc(var(--size) / 4) calc(var(--size) / 4) 0;
        border-color: transparent lightblue steelblue transparent;
        transform-origin: 100% 100%;
}
.mdiv > span:nth-of-type(2) { transform: rotate(90deg); }
.mdiv > span:nth-of-type(3) { transform: rotate(180deg); }
.mdiv > span:nth-of-type(4) { transform: rotate(270deg); }
</style>

<div class="mdiv">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>

马黑黑 发表于 2024-8-27 19:51

<h2>一楼代码</h2>
<div class="hE"><pre>
&lt;style&gt;
.mdiv {
        --size: 300px;
        margin: 50px auto;
        width: var(--size);
        height: var(--size);
        border: 1px solid gray;
        transition: 3s;
        position: relative;
}
.mdiv:hover { transform: rotate(360deg); }
.mdiv &gt; span {
        position: absolute;
        left: calc(var(--size) / 4);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: calc(var(--size) / 4) calc(var(--size) / 4) calc(var(--size) / 4) 0;
        border-color: transparent lightblue steelblue transparent;
        transform-origin: 100% 100%;
}
.mdiv &gt; span:nth-of-type(2) { transform: rotate(90deg); }
.mdiv &gt; span:nth-of-type(3) { transform: rotate(180deg); }
.mdiv &gt; span:nth-of-type(4) { transform: rotate(270deg); }
&lt;/style&gt;

&lt;div class="mdiv"&gt;
        &lt;span&gt;&lt;/span&gt;
        &lt;span&gt;&lt;/span&gt;
        &lt;span&gt;&lt;/span&gt;
        &lt;span&gt;&lt;/span&gt;
&lt;/div&gt;
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>

马黑黑 发表于 2024-8-27 19:54

说明：

一、父元素边框只为观察使用；
二、CSS变量 --size 是父元素的宽高尺寸，也是子元素 span 的left属性定位和边框宽度（border-width）的依据；
三、父元素的伪类选择器 :hover 只为动画演示需要；
四、父元素下不应存在其他的span标签，要单纯。

红影 发表于 2024-8-27 20:28

这个有趣，鼠标触动，可以转动360度，鼠标移开又转回去了{:4_173:}

红影 发表于 2024-8-27 20:52

看了半天，有点想不通，border-width:数值不需要单位的么？默认是px吧。
然后border-color:的设置下，感觉已经到了75的地方，怎么还需要设置left，，，我再去想想

醉美水芙蓉 发表于 2024-8-27 21:10

红影 发表于 2024-8-27 21:13

想起了以前的三角形等形状，就是不设宽高，然后用透明加颜色就能弄出三角形。
不过那个时候是四个方向一样的border-width:，现在左边的是0，有点想不出来。哦，我知道了，左边border-width:是0，所以贴着左边了，加上上下的border-width:，如此宽度是1/4，高度是1/2，如此取border-color的上是透明，就已经得到其中的叶片了，最后面的那个不管是不是透明都没什么了，也就是border-color: transparent lightblue steelblue transparent;随便放什么颜色都没影响。
嗯，看明白了{:4_205:}

红影 发表于 2024-8-27 21:16

怪不得要设left: ，这样可以放到中间去，然后旋转基点用transform-origin: 100% 100%;，其实这个是叶瓣右下角，同时也是父元素的中心点，再旋转就行了。
--size 的设置巧妙，都能被用上。{:4_187:}

红影 发表于 2024-8-27 21:18

去试了一下，把border-color: transparent lightblue steelblue transparent;里的steelblue也变成透明，出来的效果也挺好玩的{:4_173:}

红影 发表于 2024-8-27 21:21

<style>
.hy {
        --size: 300px;
        margin: 50px auto;
        width: var(--size);
        height: var(--size);
        transition: 3s;
        position: relative;
}
.hy:hover { transform: rotate(360deg); }
.hy > span {
        position: absolute;
        left: calc(var(--size) / 4);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: calc(var(--size) / 4) calc(var(--size) / 4) calc(var(--size) / 4) 0;
        border-color: transparent lightblue transparent transparent;
        transform-origin: 100% 100%;
}
.hy > span:nth-of-type(2) { transform: rotate(90deg); }
.hy > span:nth-of-type(3) { transform: rotate(180deg); }
.hy > span:nth-of-type(4) { transform: rotate(270deg); }
</style>

<div class="hy">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>

马黑黑 发表于 2024-8-27 21:36

红影 发表于 2024-8-27 21:18
去试了一下，把border-color: transparent lightblue steelblue transparent;里的steelblue也变成透明，出 ...

很多可能

马黑黑 发表于 2024-8-27 21:36

红影 发表于 2024-8-27 20:28
这个有趣，鼠标触动，可以转动360度，鼠标移开又转回去了

这是经典的 transition 动画

马黑黑 发表于 2024-8-27 21:37

红影 发表于 2024-8-27 21:16
怪不得要设left: ，这样可以放到中间去，然后旋转基点用transform-origin: 100% 100%;，其实这个是叶瓣右下 ...

酱紫，修改一个数字就成了，这是CSS变量的用处之一

红影 发表于 2024-8-27 21:54

马黑黑 发表于 2024-8-27 21:36
这是经典的 transition 动画

取border-width: calc(var(--size) / 4) 0 calc(var(--size) / 4) calc(var(--size) / 4);

也就是切掉右边，还能变成逆时针转的叶瓣

红影 发表于 2024-8-27 21:55

<style>
.hy11 {
        --size: 300px;
        margin: 50px auto;
        width: var(--size);
        height: var(--size);
        border: 1px solid gray;
        transition: 3s;
        position: relative;
}
.hy11:hover { transform: rotate(-360deg); }
.hy11 > span {
        position: absolute;
        left: calc(var(--size) / 2);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: calc(var(--size) / 4) 0 calc(var(--size) / 4) calc(var(--size) / 4);
        border-color: transparent transparent lightblue steelblue;
        transform-origin: 0% 100%;
}
.hy11 > span:nth-of-type(2) { transform: rotate(90deg); }
.hy11 > span:nth-of-type(3) { transform: rotate(180deg); }
.hy11 > span:nth-of-type(4) { transform: rotate(270deg); }
</style>

<div class="hy11">
        <span></span>
<span></span>
<span></span>
<span></span>
       
</div>

马黑黑 发表于 2024-8-27 22:06

红影 发表于 2024-8-27 21:54
取border-width: calc(var(--size) / 4) 0 calc(var(--size) / 4) calc(var(--size) / 4);

也就是切掉 ...

对，多试试会有惊喜。开始时，可以不用 CSS变量 和 calc函数，也不用那么多的子元素

红影 发表于 2024-8-27 22:24

马黑黑 发表于 2024-8-27 21:36
很多可能

是啊，很好玩{:4_173:}

小辣椒 发表于 2024-8-27 22:24

这个风车做的太漂亮了{:4_199:}

红影 发表于 2024-8-27 22:25

马黑黑 发表于 2024-8-27 21:36
这是经典的 transition 动画

border-width 和 border-color 结合创造的美好效果。

红影 发表于 2024-8-27 22:26

马黑黑 发表于 2024-8-27 21:37
酱紫，修改一个数字就成了，这是CSS变量的用处之一

嗯嗯，感受到，这样的变量非常好用。

查看完整版本: CSS+HTML纸风车