那些你不知道的炫酷交互效果系列：
基于普通的开关效果增加了向内部延伸的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);
}
}
这是一款极其简洁的效果，透明开关效果，整体只有白色的边框和一个白色的圆形平移控制开关的效果。这里涉及到的代码相对比较简单，就不再额外展示。
这款效果的开关过程动画不再是简单的平移，交互上的两个状态层次分明，过渡的效果也挺有创意，整体动画效果可以拆分为以下几个部分：
/* 选中效果 */
#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);
}
}
}
这是一款比较有趣味的交互效果，两个状态之间的切换从一个饼到多个饼堆叠的效果，在特定的场景中可以更换为其他的元素效果。核心的实现逻辑是默认只展示一个饼图，其他的通过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;
}
}
}
这也是一款比较有趣的交互效果，整体动画也是和#3类似，移动的过程采用旋转一周切换状态。但是核心的圆形部分变成了一个卡通狗狗的效果，并且在开启状态后狗狗的表情发生了变化，增加了微笑吐舌头?的效果，还动了一下耳朵。这两个效果也是基于scale实现，核心代码如下：
#doggo:checked {
+ label {
.dog {
left: 68px;
transform: rotate(360deg);
}
.mouth {
transform: scale(1);
transition-delay: .7s;
}
.ear.right {
transform: scaleX(-1) rotate(-35deg);
transition-delay: .6s;
}
}
}
这也是一款相对简洁的效果，不同的是开关的圆形宽高会大于背景填充部分的宽高，形成一个反差效果，打开的动画过程也增加了贝塞尔曲线控制，而且在打开后增加了阴影放大的效果，增强了与用户交互的体验感。核心代码如下：
.checkbox-wrapper-3 #cbx-3:checked + .label span {
background: #4F2EDC;
transform: translateX(70px);
transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease;
box-shadow: 0 3px 8px rgba(79, 46, 220, 0.2);
}
/*阴影放大效果*/
.checkbox-wrapper-3 #cbx-3:checked + .label span:before {
transform: scale(1);
opacity: 0;
transition: all 0.4s ease;
}
这是一款带有可爱风的开关效果，通过增加渐变背景色和阴影突出3D的效果，通过伪元素控制面部的表情，表情的变化过程也是极为生动有力。因为这里在改变表情的时候对整个元素增加了一个Y轴一周旋转，而且这里表情里面的眼睛和嘴所实现的伪元素都是基于content中的特殊符号实现，并没有通过背景色实现，核心代码如下：
.checkbox-wrapper-5 .check label::before {
content: "· ·";
}
.checkbox-wrapper-5 .check label::after {
content: "●";
}
input[type="checkbox"]:checked + label::after {
transform: rotateY(360deg);
}
看了很多正常的来一个脱离核心圆形开关的效果，开关上有 ON/OFF 文字效果，但实际这也是两个伪元素，文字是通过标签中的自定义属性传递使用。动画的过程就是平移两个伪元素，伪元素的宽高和外层元素的宽高一样，所以状态变化时所移动的距离就是100%。核心代码如下：
<label class="tgl-btn" data-tg-off="OFF" data-tg-on="ON"></label>
css：
.tgl-btn:after {
left: 100%;
content: attr(data-tg-on);
}
.tgl-btn:before {
left: 0;
content: attr(data-tg-off);
}
.tgl-skewed:checked+.tgl-btn:after {
left: 0;
}
.tgl-skewed:checked+.tgl-btn:before {
left: -100%;
}
这也是一款较为生动的交互效果，状态从白天到黑夜的效果，比较适用于页面主题切换时使用。在切换的过程也增加了transition过渡，使整个过程较为柔和，核心的部分是由太阳切换到月亮的过程，太阳则是由linear-gradient线性渐变完成，月亮则是由纯黑色的背景和box-shadow配合border-radius实现，核心代码如下：
.slider:before {
border-radius: 20px;
background: linear-gradient(40deg,#ff0080,#ff8c00 70%);
transition: .4s;
}
input:checked + .slider:before {
background: #303136;
box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -4px 0 0 #a3dafb;
}
这是一款类似生活中使用的按钮开关效果，有按下弹起的效果，这里使用了rotate和skew两种变形使按钮有弹起的效果，切换的过程也增加了transition过渡效果。核心部分代码如下：
.switch-left {
transform: rotate(15deg) skewX(15deg);
}
input:checked + .switch-left {
transform: rotate(0deg) skewX(0deg);
}
上面的按钮中有YES/NO的文字显示，这一款则是将文字和圆形开关两者结合在了一起，动画中也的文字和圆形元素都增加了贝塞尔曲线的效果，给用户操作体验增加了生动的感觉。核心代码如下：
.tgl-ios + .tgl-btn:after {
transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
.tgl-ios + .tgl-btn:before {
transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
最后来一个纯文本类型的翻转切换效果，文本内容也是通过标签自定义属性传递到伪元素中，开关翻转效果则是通过设置旋转Y轴rotateY(-180deg)实现。核心代码如下：
<label class="tgl-btn" data-tg-off="Nope" data-tg-on="Yeah!"></label>
.tgl-flip + .tgl-btn:before {
background: #FF3A19;
content: attr(data-tg-off);
}
.tgl-flip + .tgl-btn:active:before {
transform: rotateY(-20deg);
}
.tgl-flip:checked + .tgl-btn:before {
transform: rotateY(180deg);
}
最后来个有所夸张的彩蛋开关效果，这个效果原则上已经不是在开关组件功能层面了，但是还是可以看看具体的实现效果，有兴趣的同学可以看看在线代码的源码实现过程。
这可能是个愚蠢的问题。但是，我是一个新手......你怎么能在交互式rubyshell中有多行代码？好像你只能有一条长线。按回车键运行代码。无论如何我可以在不运行代码的情况下跳到下一行吗？再次抱歉，如果这是一个愚蠢的问题。谢谢。 最佳答案 这是一个例子:2.1.2:053>a=1=>12.1.2:054>b=2=>22.1.2:055>a+b=>32.1.2:056>ifa>b#Thecode‘if..."startsthedefinitionoftheconditionalstatement.2.1.2:057?>puts"f
Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u
我正在研究使用EventMachine支持的twitter-streamrubygem来跟踪和捕获推文。我对整个事件编程有点陌生。我如何判断我在事件循环中所做的任何处理是否导致我落后？有没有简单的检查方法？ 最佳答案 您可以通过使用周期性计时器并打印出耗时来确定延迟。如果您使用的是1秒的计时器，您应该已经过了大约1秒，如果它更长，您就知道您正在减慢react器的速度。@last=Time.now.to_fEM.add_periodic_timer(1)doputs"LATENCY:#{Time.now.to_f-@last}"@
这里还有一个新手问题:require'tasks/rails'我在每个Rails项目的根路径中的Rakefile中看到了这一行。我猜这行用于要求vendor/rails/railties/lib/tasks/rails.rb加载所有rake任务:$VERBOSE=nil#LoadRailsrakefileextensionsDir["#{File.dirname(__FILE__)}/*.rake"].each{|ext|loadext}#LoadanycustomrakefileextensionsDir["#{RAILS_ROOT}/lib/tasks/**/*.rake"].so
深度学习12.CNN经典网络VGG16一、简介1.VGG来源2.VGG分类3.不同模型的参数数量4.3x3卷积核的好处5.关于学习率调度6.批归一化二、VGG16层分析1.层划分2.参数展开过程图解3.参数传递示例4.VGG16各层参数数量三、代码分析1.VGG16模型定义2.训练3.测试一、简介1.VGG来源VGG（VisualGeometryGroup）是一个视觉几何组在2014年提出的深度卷积神经网络架构。VGG在2014年ImageNet图像分类竞赛亚军，定位竞赛冠军；VGG网络采用连续的小卷积核（3x3）和池化层构建深度神经网络，网络深度可以达到16层或19层，其中VGG16和VGG
这个问题在这里已经有了答案:Unabletoinstallgem-Failedtobuildgemnativeextension-cannotloadsuchfile--mkmf(LoadError)(17个答案)关闭9年前。嘿，我正在尝试在一台新的ubuntu机器上安装rails。我安装了ruby和rvm，但出现“无法构建gemnative扩展”错误。这是什么意思？$sudogeminstallrails-v3.2.9(没有sudo表示我没有权限)然后它会输出很多“获取”命令，最终会出现这个错误:Buildingnativeextensions.Thiscouldtakeawhi
我想知道如何从Apple.p12文件中提取key。根据我有限的理解，.p12文件是X504证书和私钥的组合。我看到我遇到的每个.p12文件都有一个X504证书和至少一个key，在某些情况下有两个key。这是因为每个.p12都有一个Apple开发人员key，有些还有一个额外的key(可能是Appleroot授权key)。我只考虑那些具有两个key的.p12文件是有效的。我的目标是区分具有一个key的.p12文件和具有两个key的.p12文件。到目前为止，我已经使用OpenSSL来检查X504文件和任何.p12的key。例如，我有这段代码可以检查目录中的所有.p12文件:Dir.glob(
ruby调试器不会在我在与执行开始时不同的文件中设置的断点处停止。例如，考虑这两个文件，foo.rb:#foo.rbclassFoodefbarputs"baz"endend和main.rb:#main.rbrequire'./foo'Foo.new.bar我使用ruby-rdebug.\main.rb开始调试。现在，当我尝试使用b./foo.rb:4在另一个文件的特定行上设置断点时，我收到消息Setbreakpoint1atfoo.rb:4，但是当我cont时，程序执行到最后，调试器永远不会停止。但是，如果我在main.rb中的一行上打断，例如b./main.rb:3，或者一个方法，
下面的代码通过ftp上传文件并且它有效。require'net/ftp'ftp=Net::FTP.newftp.passive=trueftp.connect("***")ftp.login("***","***")ftp.chdir"claimsecure-xml-files"ftp.putbinaryfile("file.xls",File.basename("file.xls"))ftp.quit但是如何确定上传是否成功呢？ 最佳答案 之后ftp.putbinaryfile("file.xls",File.basename("
今天我在我的Rails控制台中尝试了一些东西，这发生了，2.0.0p247:009>Date.today-29.days=>Fri,07Feb20142.0.0p247:010>Date.today-29.days=>Thu,09Jan2014我很困惑。我可以看到我缺少一些基本的东西。但这让我印象深刻!谁能解释为什么会这样？ 最佳答案 实际发生的是这样的:Date.today(-29.days)#=>Fri,07Feb2014today有一个名为start的可选参数，默认为Date::ITALY。Anoptionalargument