那些你不知道的炫酷开关交互效果(12种)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了那些你不知道的炫酷开关交互效果(12种)相关的知识,希望对你有一定的参考价值。

本文将继续更新那些炫酷交互效果系列文章,今天带来的是有关 toggle 开关相关的组件。以下是本次文章涉及到的开关组件总览图,总计收集12款不同交互效果,相信总有一款适合你。

那些你不知道的炫酷交互效果系列:

效果1

基于普通的开关效果增加了向内部延伸的3D效果,核心是通过设置内阴影box-shadow: inset实现,除开对元素本身增加阴影,还设置了两个伪元素提升3D效果,以下是核心实现代码:

label 
		background: #af4c4c;
  border: .5px solid rgba(117, 117, 117, 0.31);
  box-shadow: inset 0px 0px 4px 0px rgba(0,0,0,0.2), 0 -3px 4px rgba(0,0,0,0.15);
		&::before 
			border: none;
			width: 40px;
			height: 40px;
			box-shadow: inset 0.5px -1px 1px rgba(0, 0, 0, 0.35);
			background: #fff;
			transform: rotate(-25deg);
		
		&::after 
			background: transparent;
			height: calc(100% + 8px);
			border-radius: 30px;
			top: -5px;
			width: calc(100% + 8px);
			left: -4px;
			z-index: 0;
			box-shadow: inset 0px 2px 4px -2px rgba(0,0,0,0.2), 0px 1px 2px 0px rgba(151, 151, 151, 0.2);
		

效果2

这是一款极其简洁的效果,透明开关效果,整体只有白色的边框和一个白色的圆形平移控制开关的效果。这里涉及到的代码相对比较简单,就不再额外展示。

效果3

这款效果的开关过程动画不再是简单的平移,交互上的两个状态层次分明,过渡的效果也挺有创意,整体动画效果可以拆分为以下几个部分:

  • 颜色由绿色变为红色
  • 移动的块旋转一周
  • 图标由 √ 变化为 ✕,图标用伪元素实现 核心代码部分:
/* 选中效果 */
#checkcross:checked + label 
	.check 
		left: 68px;
		transform: rotate(360deg);
		background: #c34a4a;
    /* 图标变化 */
		&:before 
			width: 27px;
			transform: rotate(-45deg) translate(-8px, 18px);
		
		&:after 
			width: 27px;
    	transform: rotate(45deg) translate(18px, 8px);
		
	

效果4

这是一款比较有趣味的交互效果,两个状态之间的切换从一个饼到多个饼堆叠的效果,在特定的场景中可以更换为其他的元素效果。核心的实现逻辑是默认只展示一个饼图,其他的通过scale(0)隐藏,并设定不同的定位坐标值,当状态发生变化时,设置scale(1)并增加不同的延时时间,代码如下:

#pancake:checked  
	+ label 
		.pancakes 
			transform: translateX(70px);
		
		.pancake 
			&:nth-child(2) 
				transform: scale(1);
				transition-delay: .2s;
			
			&:nth-child(3) 
				transform: scale(1);
				transition-delay: .4s;
			
		
		.butter 
			transform: scale(1);
			transition-delay: .6s;
		
	 

效果5

这也是一款比较有趣的交互效果,整体动画也是和#3类似,移动的过程采用旋转一周切换状态。但是核心的圆形部分变成了一个卡通狗狗的效果,并且在开启状态后狗狗的表情发生了变化,增加了微笑吐舌头

以上是关于那些你不知道的炫酷开关交互效果(12种)的主要内容,如果未能解决你的问题,请参考以下文章

Pyecharts 绘制20钟不同风格的炫酷交互式图表,建议收藏

75款纯CSS3打造的 Loading加载的炫酷动画效果

手把手教你做一个python+matplotlib的炫酷的数据可视化动图

CSS3CSS3动画——我离前端的炫酷又近了一步

小白也可以玩转的炫酷大屏!

只要10分钟,搭建属于个人的炫酷网站,你还在犹豫什么?