前端工程师源码分享:html5 2d 扇子

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>折扇</title>

<style>

*{margin:0;padding:0;}

ul,ol,li{list-style:none;}

ul{width:400px;

height:200px;

position:relative;

margin:200px auto;}

ul li{width:60px;

height:200px;

position:absolute;

left:170px;

transform-origin:bottom;

transition:all 2s;

border-radius:60px;

text-align:center;}

ul li:nth-child(1){background: red;}

ul li:nth-child(2){background:yellow;}

ul li:nth-child(3){background:blue;}

ul li:nth-child(4){background:green;}

ul li:nth-child(5){background: red;}

ul li:nth-child(6){background:yellow;}

ul li:nth-child(7){background:blue;}

ul li:nth-child(8){background:green;}

ul li:nth-child(9){background: red;}

ul li:nth-child(10){background:yellow;}

ul li:nth-child(11){background:blue;}

ul li:nth-child(12){background:green;}

ul li:nth-child(13){background: red;}

ul li:nth-child(14){background:yellow;}

ul li:nth-child(15){background:blue;}

ul li:nth-child(16){background:green;}

ul li:nth-child(17){background: red;}

ul li:nth-child(18){background:yellow;}

ul li:nth-child(19){background:blue;}

ul li:nth-child(20){background:green;}

ul li:nth-child(21){background: red;}

ul li:nth-child(22){background:yellow;}

ul li:nth-child(23){background:blue;}

ul li:nth-child(24){background:green;}

ul li:nth-child(25){background: red;}

ul:hover li:nth-child(1){opacity:0.6;transform:rotate(0deg);}

ul:hover li:nth-child(2){opacity:0.6;transform:rotate(15deg);}

ul:hover li:nth-child(3){opacity:0.6;transform:rotate(30deg);}

ul:hover li:nth-child(4){opacity:0.6;transform:rotate(45deg);}

ul:hover li:nth-child(5){opacity:0.6;transform:rotate(60deg);}

ul:hover li:nth-child(6){opacity:0.6;transform:rotate(75deg);}

ul:hover li:nth-child(7){opacity:0.6;transform:rotate(90deg);}

ul:hover li:nth-child(8){opacity:0.6;transform:rotate(105deg);}

ul:hover li:nth-child(9){opacity:0.6;transform:rotate(120deg);}

ul:hover li:nth-child(10){opacity:0.6;transform:rotate(135deg);}

ul:hover li:nth-child(11){opacity:0.6;transform:rotate(150deg);}

ul:hover li:nth-child(12){opacity:0.6;transform:rotate(165deg);}

ul:hover li:nth-child(13){opacity:0.6;transform:rotate(180deg);}

ul:hover li:nth-child(14){opacity:0.6;transform:rotate(-15deg);}

ul:hover li:nth-child(15){opacity:0.6;transform:rotate(-30deg);}

ul:hover li:nth-child(16){opacity:0.6;transform:rotate(-45deg);}

ul:hover li:nth-child(17){opacity:0.6;transform:rotate(-60deg);}

ul:hover li:nth-child(18){opacity:0.6;transform:rotate(-75deg);}

ul:hover li:nth-child(19){opacity:0.6;transform:rotate(-90deg);}

ul:hover li:nth-child(20){opacity:0.6;transform:rotate(-105deg);}

ul:hover li:nth-child(21){opacity:0.6;transform:rotate(-120deg);}

ul:hover li:nth-child(22){opacity:0.6;transform:rotate(-135deg);}

ul:hover li:nth-child(23){opacity:0.6;transform:rotate(-150deg);}

ul:hover li:nth-child(24){opacity:0.6;transform:rotate(-165deg);}

ul:hover li:nth-child(25){opacity:0.6;transform:rotate(-185deg);}

</style>

</head>

<body>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

<li>9</li>

<li>10</li>

<li>11</li>

<li>12</li>

<li>13</li>

<li>14</li>

<li>15</li>

<li>16</li>

<li>17</li>

<li>18</li>

<li>19</li>

<li>20</li>

<li>21</li>

<li>22</li>

<li>23</li>

<li>24</li>

<li>25</li>

</ul>

</body>

</html>

欢迎加入598399936，找群主私聊，送海量学习资料免费送

时间： 2024-10-29 19:46:13

前端工程师源码分享:html5 2d 扇子的相关文章

推荐！Html5精品效果源码分享

一直在看别人的汇总,看到了一些不错的关于 HTML5内容的源码,我也汇总下分享出来,好东西需要共享!希望可以帮到需要的朋友. 1.劲爆分享:HTML5动感的火焰燃烧动画特效 这又是一款基于HTML5的超炫动画特效,是一款动感的火焰燃烧动画效果.这款HTML5动画火焰燃烧非常逼真,之前我们也分享过一些其他的HTML5火焰燃烧动画,比如:HTML5 Canvas火焰燃烧动画和纯CSS3实现打火机火焰动画.一般像这样的HTML5动画都是基于Canvas的,今天的这款也不例外.源码下载地址:劲爆分享:H

JEECG社区 一个微信教育网站案例源码分享

微信教育网站案例演示: http://t.cn/RvPgLcb 源码分享: http://pan.baidu.com/s/1cUImy 截图演示: JEECG社区 一个微信教育网站案例源码分享,布布扣,bubuko.com

仿乐享微信源码分享，把你的生意做到微信里

99%的人不知道的微信秘密!微信里的商机.仿乐享微信源码分享,把你的生意做到微信里. WeiKuCMS  (微酷CMS)功能特点:人工客服新功能正式上线!粉丝行为分析.渠道二维码生成.二维码折扣,微菜单,微统计,会员卡签到,微会员,刮刮卡,大转盘,优惠券,积分兑换,微官网,砸金蛋,微调研,微投票,微相册,微商城,微团购,微留言,微喜帖,商家入驻,微门店,微餐饮,微酒店,微教育,微物业,微医疗,微信墙,微花店,微美容,微生活. 微信公共账号轻松接入,无限自定义图文回复.欢迎您的加入! 微酷WeiK

Android开发之自己定义TabHost文字及背景(源码分享)

使用TabHost 能够在一个屏幕间进行不同版面的切换,而系统自带的tabhost界面较为朴素,我们应该怎样进行自己定义改动优化呢 MainActivity的源码 package com.dream.ledong; import android.app.TabActivity; import android.content.Intent; import android.graphics.Color; import android.os.Bundle; import android.view.Gr

【Cocos2d-x】源码分析之 2d/ui/UILayoutDefine.h

#ifndef __UILAYOUTDEFINE_H__ #define __UILAYOUTDEFINE_H__ #include "cocos2d.h" NS_CC_BEGIN namespace ui { /** *控件 距离四周的间隙 *设置间隙之后 相当于控件的大小扩大了 *不会和周围控件紧挨着 有一定间距 * */ class Margin { public: float left; float top; float right; float bottom; public:

【Cocos2d-x】源码分析之 2d/ui/Widget

从今天开始 咱也模仿 红孩儿这些大牛分析源码 ,由于水平有限 不对之处欢迎狂喷.哈哈. #ifndef __UIWIDGET_H__ #define __UIWIDGET_H__ #include "ui/CCProtectedNode.h" #include "ui/UILayoutDefine.h" #include "ui/UILayoutParameter.h" #include "ui/GUIDefine.h" NS

AppCan 移动应用开发项目源码分享：嗡嗡旅游App开发

开发者介绍:老家湖北巴东好山好水,神农溪.巴人河.三里城等都是旅游好去处.中秋节回了趟老家,看到家乡的原生态景色吸引了大批游客,由此萌发了想法:用移动技术开发一个App试水,把家乡景点介绍给更多的人.于是,耗时一个月的<嗡嗡旅游>应运而生,特此将项目源码分享给广大AppCan开发者. 项目实现功能 用户注册.登录,游记查看和发布,查看辖区内景区.酒店.交通.攻略等信息,内容收藏.评论和分享,查看地图,景区门票.酒店电话预定等. 项目使用插件 引导页 引导页3张图片采用的是全屏显示的slider

干货分享——android源码分享网站

干货分享--android源码分享网站 android源码应用分享站点,各种技术分支的源码都有,现在分享给大家 安卓源码服务专家 集合了大量的例子源码,总会找到你想要的 http://www.javaapk.com/ 泡在网上的日子 实时分享android最新的开源项目,大量的教程 http://www.jcodecraeer.com/ android的code4app--apkbus 大量的例子源码和android开发文档 http://d.apkbus.com/ 安卓巴士 http://ww

【Cocos2d-x】源码分析之 2d/ui/UILayout

#ifndef __LAYOUT_H__ #define __LAYOUT_H__ #include "ui/UIWidget.h" NS_CC_BEGIN namespace ui { typedef enum { LAYOUT_COLOR_NONE,//空 LAYOUT_COLOR_SOLID,//单一固定颜色的 LAYOUT_COLOR_GRADIENT//有梯度变化的 }LayoutBackGroundColorType;//容器背景颜色类型 typedef enum { LA