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

前言：使用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>

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

CSS布局案例 5-51 折扇效果
文章目录前言实现过程 1.步骤 2.代码 3.效果前言使用css3实现折扇效果. 实现过程 1.步骤折扇效果实现步骤:1.先制作一个底座,还有几个扇叶(绝对定位实现组合)2.旋转几个扇叶3. ...
纯HTML+CSS实战之制作相框效果
效果如图所示主要运用了盒子阴影,图片阴影,边框属性三个要点代码如下: <!DOCTYPE html> <html lang="en"> <head ...
CSS实战 - 波纹扩散效果
1.实现效果效果一:涟漪扩散效果效果二:波动扩散效果 2.实现原理在 div 里定义圆形,使用 css 的动画,让圆形的大小由小到大进行变化. ① 涟漪扩散: 定义了3个带边框的空圆,让这3个圆 ...
短视频平台源码，css实现折扇效果
短视频平台源码,css实现折扇效果相关的代码 <!DOCTYPE html> <html lang="en"> <head><meta c ...
纯CSS简单案例合集（折扇效果，资料卡，定格轮播，菜单三角形）
目录 ①折扇效果(2d动画) ②资料卡 ③定格轮播(鼠标移上去会暂停) 度数,速度,颜色之类的可以自己再调整效果图如下 <!DOCTYPE html> <html lang=&qu ...
CSS如何实现内凹角效果 By 大漠
记得@Lea Verou的<CSS Secrets>一书和前几天@Chris Coyier刚发的帖子都介绍了CSS怎么实现元素斜切口的效果.我也尝试着借助Vue的能力,把这种效果构建成一个 ...
java实现展示框,如何使用纯CSS实现蝴蝶标本的展示框效果
本篇文章给大家带来的内容是关于如何使用纯CSS实现蝴蝶标本的展示框效果 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载每日前端实战系列的全部源代码请从 git ...
CSS实战样式：文字两侧加居中横线
CSS实战样式:文字两侧加居中横线原文: https://www.freesion.com/article/4444809147/ 在日常的开发中,会遇到这样的需求,比如移动web开发中的登录页的底 ...
程序员520❤七夕情人节表白代码Html+Js+Css花瓣相册网页模板❤程序员表白必备
❉ 520程序员求婚Html+Js+Css花瓣相册❤ (爱心3D动画,自定义文字)/ 程序员表白必备一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白, 非常经典的程序员式的表达爱 ...

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

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

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

最新文章

热门文章