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

最新推荐文章于 2024-09-23 13:36:11 发布
最新推荐文章于 2024-09-23 13:36:11 发布
阅读量188 收藏
点赞数
文章标签： 前端 ViewUI
原文链接：https://my.oschina.net/u/3388416/blog/875606
版权

<!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，找群主私聊，送海量学习资料免费送

转载于:https://my.oschina.net/u/3388416/blog/875606

chenlaojie7596
关注
前端技术搭建拼图小游戏（内含源码）
官方推荐
06-08 3万+
基于前端HTML、CSS、JS实现建议版拼图小游戏，无论你是否具备前端技术，都可以直接从文中复制源码运行到你的电脑上！
【web前端特效源码】使用HTML5& CSS实现4种悬停动画按钮
南北极之间
08-12 2668
效果图： ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~各位同学们：还有啥想看的功能或者特效不？欢迎在评论区留言哦！本人承接网网站开发，如有需要，欢迎私信咨询！如果您感觉文章对您有帮助~ 那就打赏一下，请笔者喝杯咖啡吧~对于每个学生来说，从高中到大学的过渡面孔有点棘手，因为他的生活正在发生不断的变化。他们应该在经济上和社会上独立，并在生活中做出非常关键的改变。他们的目标被赚更多钱的冲动所取代，因为他们对成功的定义发生了变化，职业建议不再意味着追随他们
html+css：折扇效果
renjingzhaozhao的博客
04-28 949
body中 <div class="box"> <div>作赋凌相如</div> <div>十五观奇书</div> <div>深藏身与名</div> <div>事了拂衣去</div> <div>千里不留行</div> ...
HTML5-canvas实例：2D折线数据图与2D扇形图
weixin_30681615的博客
12-19 120
基础知识： <canvas id="demo" width="400" height="400"></canvas> 在页面上创建canvas标签，然后获取canvas这个元素，因为是画2D图，所以是调用.getContext('2d') 二维图方法 var target = document.getElementById('demo'), ...
css环形文本,CSS3能写出这种环状吗，不是环形进度条？
weixin_29911569的博客
08-04 214
效果图：用了SCSS来写，如果不太熟悉的话，可以看CSS。话不多说，直接上代码index.htmlloading.scss// 线条总数$total: 13;// 每个线条相差的角度$angel: 180/($total - 1);.loading {background: black;width: 400px;height: 400px;position: relative;div {posit...
前端demo——折扇效果图
L3gacy
03-19 524
实现折现效果图: 思路: 先看右边的两个扇页红色到橙色是如何变化的 基点在bottom,旋转15度,从透明度0到透明度1 其余原理都一样，180°有12个折扇，所以每一个折扇旋转15°。 先设置的折扇在后面，后设置的折扇在前面 html布局如下: <ul class="fan"> <li class="f1"> </li> &l...
HTML5 实现鼠标停留达到折扇效果
m0_52239519的博客
11-14 619
效果如下（示例）： HTML5代码 代码如下（示例）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale
50余款手机页面模版源码html5
11-16
50余款手机页面模版源码html5 1.1【32赞HTM5响应式系列之右侧多级滑动式】仿Slideby触屏版html5响应式手机wap网站模板 2【32赞HTML5响应式系列之订餐模板】微官网美食订餐html5触屏响应式手机wap网站订餐模板 5【32...
HTML5+CSS3 精美登陆界面源码
01-19
在这个“HTML5+CSS3 精美登陆界面源码”压缩包中，包含了三个精心设计的登录界面，每一个都充分利用了HTML5的新特性与CSS3的动画效果，以提供卓越的用户体验。 首先，我们来详细了解一下HTML5。HTML5是超文本标记...
《Cocos2d-Js开发之旅-从HTML5到原生手机游戏》完整源码
10-19
《Cocos2d-Js开发之旅-从HTML5到原生手机游戏》是一本深入探讨Cocos2d-Js框架的书籍，旨在帮助开发者从HTML5游戏开发过渡到原生移动平台的游戏制作。Cocos2d-Js是Cocos2d-x家族的一员，是一个跨平台的、基于...
【HTML5】使用Box2d模拟箭矢射击效果
03-26
使用Box2dWeb库模拟箭矢射击效果，添加能量槽，可调整射击力量，默认只有3支箭可用。 注：仅在Chrome 25.0.1323.1下测试
html5 canvas彩色的丝带动画特效.zip
07-11
基于canvas绘制彩色的粒子丝带飘动特效。
利用html实现文字闪烁的效果代码
徊忆羽菲
03-12 4686
利用html实现文字闪烁的效果代码 网页中使文字闪烁的标签是什么，其实没有html标签可以直接让文字闪烁的,需要使用js脚本来实现。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文字闪烁</title> </head> <body> <span id="blink"><b>奇葩
html5设置字体闪烁,HTML最简单的文字闪烁代码
weixin_29219539的博客
06-10 665
该楼层疑似违规已被系统折叠隐藏此楼查看此楼Title@keyframes blink{0%{opacity: 1;}50%{opacity: 1;}50.01%{opacity: 0;}100%{opacity: 0;}}@-webkit-keyframes blink {0% { opacity: 1; }50% { opacity: 1; }50.01% { opacity: 0; }10...
css3 2d/3d变换重点属性详解
abc33445的博客
07-04 715
css3 2d/3d变换——实现超炫的特效 声明：所有结论都是经过实际代码运行的效果证实的，如果有不同的情况发生，请核对浏览器版本以及内核（360浏览器，webkit内核）是否与本人试验的时候一致，同时非常感觉读者阅读本文，如有错误之处，欢迎大家留言指出。 css3的2d/3d变换是一个很强大的功能，以前想要做到图片的倾斜或者旋转某个角度，都无法简单的做到，更别说3d效果的实现，这里的3...
2d旋转（css3实现过度效果和动画效果）
dengluandai1740的博客
02-18 257
效果： 　　 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> ...
html与css实现2d效果的多种旋转
dayexiaofan的博客
05-23 2937
1、伪元素选择器 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>伪元素选择器</title> <style> span::before{ content: "楚乔是"; } span::after{ ...
html5--6-50 动画效果-变形
weixin_33958366的博客
12-10 138
html5--6-50 动画效果-变形 实例           学习要点 掌握2D变形动画 了解3D变形动画 transform：2D变形： 通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。转换方法：translate()/rotate()/scale()/skew()/matrix() none 定义不进行转换。 ...
webview2加载本地页面
最新发布
qq_25160759的博客
09-23 644
推荐使用这种方式，加载速度比WebResourceRequested快（实测的确是快点），但是需要支持：ICoreWebView2_3。个人测试加载html字符串，对于html中引入了css和js，加载不太友好。这种方式是通过截获网络请求，然后返回需要的数据。以达到成功请求的假象。
HTML5游戏官网仿制：前端大作业源码分享
作者还分享了其他相关资源链接，包括前端学习资料和Echarts大屏可视化案例。" 这个作业项目涵盖了多个前端开发的重要知识点： 1. **HTML5**: 使用HTML5创建结构化的网页内容，如头部、导航、主体内容和页脚等部分...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值