SASS实现颜色卡动画

今天我们实现一个Sass实现颜色卡动画，继续学习sass的使用，效果见下图所示。

在线研究点这里，下载收藏点这里。

ready？Gooo->

html文件

<div id="container"><div class="item it1" title="pick a color"><div class="dot"></div></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div>
</div>

然后是css文件，使用scss、prefire free和css reset。

/*
变量声明
numOfItem,定义扇条数量
degreeOfFan,定义扇形角度
*/
$numOfItem:20;
$degreeOfFan:180deg;body{background-color: #000000;
}
/* 定义容器样式，我们的hover事件将要添加在容器上，所以一定不能脱离标准流 */
#container{width:580px;height:300px;position: relative;
}
/*
扇条的样式
transform-origin非常重要，旋转中心(应该在.dot中心)
分别给不同的属性定义不同的transition持续时间
*/
.item{position: absolute;left:50%;top:100%;width:300px;height:40px;border-radius:10px 10px 20px 10px;transition:all .5s,transform 1s ease-in,;transform-origin:22px 22px;
}
/* 扇条hover样式 */
.item:hover{width:336px;border-radius:10px 10px 10px 10px;cursor: pointer;
}
/*
设置扇条中的文字样式，利用伪对象实现*/
.item:after{position: absolute;right:10px;top:0;line-height: 40px;color:#FFF;
}
.item:nth-child(1):before{content:attr(title);position: absolute;right:90px;top:0;line-height: 40px;color:#FFF;
}
/* 旋转中心的样式 */
.dot{position: absolute;left:15px;top:15px;border-radius:15px;height:10px;width:10px;background-color:#333333;border:4px #777777 solid;z-index:100;
}
/*
关键代码----
通过循环给不同的扇条添加样式
*/
@for $i from 1 through $numOfItem{//通过循环给不同的扇条增加样式//z-index，改变叠放次序//bgc,设置不同的颜色//通过:after伪对象来放置颜色文本.item:nth-child(#{$i}){z-index:100-$i;background-color: hsl(360*($numOfItem - $i)/($numOfItem - 1),50%,50%);&:after{content:"#{hsl(360*($numOfItem - $i)/($numOfItem - 1),50%,50%)}";}}//通过循环给不同的扇条增加样式//hover之后，旋转扇条//当旋转角度超过角度之后，旋转文字#container:hover .item:nth-child(#{$i}){transform:rotate($degreeOfFan*($i - $numOfItem)/$numOfItem);&:after,&:before{@if($degreeOfFan * ($i - $numOfItem)/$numOfItem < -90deg){transform:rotate(180deg);}}}
}

完工，注释比较完善，原理不再赘述。

===============================分割线，华丽的分割线======================================

为了增加交互，增加了单击扇条，改变网页背景颜色的交互。

html后面增加一个输出颜色的盒子

<!--
前面的代码
-->
<div id="color"></div>

css里面做些修改

/*页面背景的过渡效果*/
body{transition:all 2s;
}/*设置颜色容器的样式*/
#color{margin: 50px 30px;
}
#color div{width:180px;height:60px;margin:10px 20px;line-height: 60px;text-align: center;border:1px dashed #000;float: left;
}

增加js，这里使用了jquery

 $('.item').click(function(){var color=$(this).css('background-color');$('body').css('background-color',color);var input="<div style='background:"+color+"'>"+color+"</div>";$('#color').append(input);});

在线研究点这里，下载收藏点这里。同时也请大家发表高见，迎接鼓励，欢迎拍砖。

---------------------------------------------------------------

前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------

SASS实现颜色卡动画相关推荐

介绍NPOI 的颜色卡、名称以及索引
文章目录前言遍历NPOI颜色前言使用NPOI的颜色时,一些颜色类的名称很难想象出具体对应的颜色,所以有了下面的对照表,方便使用. NPOI 颜色的索引范围是 8~64,超出范围无效. 色彩类 ...
SASS实现圆形动画菜单
好的,SASS实现的圆形动画菜单,效果和主要原理如下图所示. 在线研究点这里,下载收藏点这里. Are you ready? Go-> html文件 <div class="me ...
python 滤镜色卡
利用色卡对图片颜色进行替换基于色卡对图片使用颜色转换滤镜基于色卡对图片使用颜色转换滤镜 ###################################################### ...
数据可视化组队学习：《Task06 - 场景案例显神通》笔记
文章目录前言 1 展示趋势变化(Evolution) 1.1 折线图 1.1.1 简单线图 1.1.2 突出某一重点的多线图 1.2 面积图 1.3 堆积面积图 2 展示分布关系 2.1 小提琴图 ...
linux开发板显示百叶窗图片,03Linux命令操作2
第一天第一个小时嵌入式介绍,何为嵌入式,为什么学习嵌入式,嵌入式的发展前景,嵌入式的具体工作岗位以及薪资待遇如何. 第二个小时项目介绍 1.为什么需要项目的的沉淀,企业需要什么样的嵌入式开发人才 2 ...
数据可视化系列（六）：场景案例显神通
数据可视化的图表种类繁多,各式各样,因此我们需要掌握如何在特定场景下使用特定的图表. 数据可视化是为业务目的服务的,好的可视化图表可以起到清晰准确反映业务结果的目的,在选择使用何种图表时,通常我们需要 ...
图像检索：一维直方图+欧几里得距离+flann+KNN
在F盘生成了一个文件名称为"文件夹"的文本文件. 第一步:批处理提取图像的一维颜色直方图,并保存到.xml中的featureHists 第一个參数:图像的路径第二个參数:保存的. ...
（个人翻译）Scrivener交互式手册中文版FowWindows 03基础操作
文章目录新手指引主界面活页夹使用活页夹特殊文件夹其他文件夹没有特别之处搜索编辑器使用编辑器头视图脚视图检视器概要与笔记概要索引卡笔记标签与状态书签项目书签元数据 ...
Tableau中使用R语言做----k-means聚类图像
关于如何配置链接Tableau和R https://blog.csdn.net/weixin_41744624/article/details/105634247 举个栗子: 如图中,可以看到展示的四 ...

SASS实现颜色卡动画

SASS实现颜色卡动画相关推荐

最新文章

热门文章