CSS实战：CSS实现折扇效果(可以表白哦)

最新推荐文章于 2023-12-05 14:53:07 发布

中南滴水哥

最新推荐文章于 2023-12-05 14:53:07 发布

阅读量2.6k

点赞数 2

分类专栏：前端文章标签： css html html5 css3 前端

本文链接：https://blog.csdn.net/qq_43742385/article/details/109688555

版权

前端专栏收录该内容

54 篇文章 2 订阅

订阅专栏

前言：使用CSS做出折扇的开合效果，当鼠标悬浮上去就会开扇，移开就合扇。适合装逼，也可以用来表白哈。

开发工具：visual studio code
语言：HTML+CSS
环境：windows10
GitHub地址：扇子开合
效果图：
在这里插入图片描述
思路分析：
首先要实现十三个扇叶，考虑使用无序列表，使用13个li即可，要让这13个li能重叠显示，只需要让他们绝对定位就行。然后要让他能鼠标悬浮就旋转，考虑使用hover伪元素，同时让不同的li旋转不同的角度，最后加入过渡效果，改变旋转的圆心就行了。

完整代码：

<!--
 * @Author: CSU_XZY
 * @Date: 2020-11-13 23:49:51
 * @LastEditors: CSU_XZY
 * @LastEditTime: 2020-11-14 00:23:50
 * @FilePath: \第二天c:\Users\XZY\Desktop\前端\CSS\扇子开合\fan.html
 * @Description: just to play
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        color: bisque;
        height: 100vh;
    }
    .fan{
        width: 600px;
        height: 300px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -150px;
        margin-left: -300px;
        list-style: none;
        /* border: 1px solid green; */
        
    }
    .fan li{
        position: absolute;
        width: 60px;
        height: 200px;
        background-color: aqua;
        left: 50%;
        top: 50%;
        margin-left: -30px;
        margin-top: -100px;
        text-align: center;
        font-size: 30px;
        transform-origin: center bottom;
        transition: all 1s linear;
    }
    .fan li:nth-of-type(5n)
    {
        background-color: blueviolet;
    }
    .fan li:nth-of-type(5n+1)
    {
        background-color: orange;
    }
    .fan li:nth-of-type(5n+2)
    {
        background-color: aqua;
    }
    .fan li:nth-of-type(5n+3)
    {
        background-color: red;
    }
    .fan li:nth-of-type(5n+4)
    {
        background-color: green;
    }
    .fan:hover li:nth-child(1){
        transform: rotate(15deg);
    }
    .fan:hover li:nth-child(2){
        transform: rotate(30deg);
    }
    .fan:hover li:nth-child(3){
        transform: rotate(45deg);
    }
    .fan:hover li:nth-child(4){
        transform: rotate(60deg);
    }
    .fan:hover li:nth-child(5){
        transform: rotate(75deg);
    }
    .fan:hover li:nth-child(6){
        transform: rotate(90deg);
    }
    .fan:hover li:nth-child(7){
        transform: rotate(0deg);
    }
    .fan:hover li:nth-child(8){
        transform: rotate(-15deg);
    }
    .fan:hover li:nth-child(9){
        transform: rotate(-30deg);
    }
    .fan:hover li:nth-child(10){
        transform: rotate(-45deg);
    }
    .fan:hover li:nth-child(11){
        transform: rotate(-60deg);
    }
    .fan:hover li:nth-child(12){
        transform: rotate(-75deg);
    }
    .fan:hover li:nth-child(13){
        transform: rotate(-90deg);
    }
    
</style>
<body>
    <ul class="fan">
        <li>级</li>
        <li>无</li>
        <li>敌</li>
        <li>喜</li>
        <li>欢</li>
        <li>你</li>
        <li>超</li>        
        <li>的</li>        
        <li>真</li>
        <li>我</li>
        <li>柱</li>
        <li>富</li>
        <li>梁</li>       
    </ul>
</body>
</html>