html+css：折扇效果

body中

<div class="box"><div>作赋凌相如</div><div>十五观奇书</div><div>深藏身与名</div><div>事了拂衣去</div><div>千里不留行</div><div>我本楚狂人</div><div>凤歌笑孔丘</div><div>仰天大笑出门去</div><div>我辈岂是蓬蒿人</div><div>兴酣落笔摇五岳</div><div>诗成笑傲凌沧洲</div><div>天生我才必有用</div><div>仰天大笑出门去</div>
</div>

css样式：

* {margin:0;padding:0;
}
.box {width:600px;height:300px;border-bottom:3px solid;margin:100px auto;position:relative;
}
.box div {width:50px;height:210px;background-color:#9D2933;position:absolute;left:270px;top:50px;box-shadow:3px 3px 5px #333;border-radius:0px 0px 90px 90px;transform-origin:center bottom;transition:all 1s ease-out 0s;transform-origin:50% 90%;text-align:center;font-size:14px;line-height:30px;font-style:italic;font-weight:bolder;letter-spacing:12px;text-shadow:1px 1px 1px #09f;color:#fff;
}
.box div:nth-child(1) {background-color:orange;
}
.box:hover div:nth-child(1) {transform:rotate(15deg);opacity:0.8;text-shadow:2px 2px 10px #09f;
}
.box div:nth-child(2) {background-color:yellow;
}
.box:hover div:nth-child(2) {transform:rotate(30deg);opacity:0.8;text-shadow:2px 2px 10px #09f;
}
.box div:nth-child(3) {background-color:green;
}
.box:hover div:nth-child(3) {transform:rotate(45deg);opacity:0.8;text-shadow:2px 2px 10px #09f;
}
.box div:nth-child(4) {background-color:blue;
}
.box:hover div:nth-child(4) {transform:rotate(60deg);opacity:0.8;text-shadow:2px 2px 10px #09f;
}
.box div:nth-child(5) {background-color:aqua;
}
.box:hover div:nth-child(5) {transform:rotate(75deg);opacity:0.8;text-shadow:2px 2px 10px #09f;
}
.box div:nth-child(6) {background-color:#8A2BE2;opacity:0.8;
}
.box:hover div:nth-child(13) {transform:rotate(90deg);opacity:0.8;text-shadow:2px 2px 10px #09f;
}
.box div:nth-child(7) {background-color:#999;
}
.box:hover div:nth-child(7) {transform:rotate(-15deg);opacity:0.8;text-shadow:2px 2px 10px #09f;
}
.box div:nth-child(8) {background-color:#b0929f;
}
.box:hover div:nth-child(8) {transform:rotate(-30deg);opacity:0.8;text-shadow:2px 2px 10px #09f;
}
.box div:nth-child(9) {background-color:#333;
}
.box:hover div:nth-child(9) {transform:rotate(-45deg);opacity:0.8;text-shadow:2px 2px 10px #09f;
}
.box div:nth-child(10) {background-color:#D24D57;
}
.box:hover div:nth-child(10) {transform:rotate(-60deg);opacity:0.8;text-shadow:2px 2px 10px #09f;
}
.box div:nth-child(11) {background-color:#09f;
}
.box:hover div:nth-child(11) {transform:rotate(-75deg);opacity:0.8;text-shadow:2px 2px 10px #09f;
}
.box div:nth-child(12) {background-color:#EAF2D3;
}
.box:hover div:nth-child(12) {transform:rotate(-90deg);opacity:0.8;text-shadow:2px 2px 10px #09f;
}

完成！

不要白嫖（￣へ￣）！！顺手留赞好习惯～～～～

html+css：折扇效果相关推荐

短视频平台源码，css实现折扇效果
短视频平台源码,css实现折扇效果相关的代码 <!DOCTYPE html> <html lang="en"> <head><meta c ...
CSS布局案例 5-51 折扇效果
文章目录前言实现过程 1.步骤 2.代码 3.效果前言使用css3实现折扇效果. 实现过程 1.步骤折扇效果实现步骤:1.先制作一个底座,还有几个扇叶(绝对定位实现组合)2.旋转几个扇叶3. ...
纯CSS简单案例合集（折扇效果，资料卡，定格轮播，菜单三角形）
目录 ①折扇效果(2d动画) ②资料卡 ③定格轮播(鼠标移上去会暂停) 度数,速度,颜色之类的可以自己再调整效果图如下 <!DOCTYPE html> <html lang=&qu ...
CSS动画效果无限循环放大缩小
效果图: CSS动画效果无限循环放大缩小 <image class="anima" mode="widthFix" @click="nav&qu ...
animate.css动画抖动,Animate.css抖动效果每次都不工作
我正在制作一个Twitch Streamer应用程序,该应用程序使用Twitch API为一组预定义的拖放器提取一些数据.Animate.css抖动效果每次都不工作我有三个按钮来选择所有/在线/离线 ...
css鼠标移入线条延中心伸长,css动画效果：鼠标移上去底部线条从中间往两边延伸 - 子成君-分享出去，快乐加倍！-旧版已停更...
本站已不再更新,最新资源请前往zcjun.com获取! css: .top-nav a:after { content: ' '; position: absolute; z-index: 2; bo ...
赞！15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
filter滤镜实现img图片的CSS蒙版效果、模糊效果
文章目录 ```filter滤镜```实现```img图片```的CSS```蒙版效果.模糊效果``` 1. 效果图 2.代码实例注意: 3.兼容性对比 filter滤镜实现img图片的CSS蒙版效 ...
CSS动画效果构成分析
CSS动画特效的基本构成文章目录 CSS动画特效的基本构成 CSS动画效果一.动画轨迹,运动路径 1.规定目标样式属性transfrom: 二.控制运动路径 transition animati ...
css动画效果制作正方体旋转相册
以下代码利用css动画效果制作了一个旋转的正方体,给正方体六个面放置好图片就可以当一个炫酷有趣的正方体旋转相框啦!可以将女朋友的照片放进去哦,赶快去试试,给女朋友一个惊喜吧! 下面没有放入背景建议大家 ...

html+css：折扇效果

不要白嫖（￣へ￣）！！顺手留赞好习惯～～～～

html+css：折扇效果相关推荐

最新文章

热门文章