- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
在 Chrome 上运行良好,但当我在 FireFox 上尝试时它无法运行。
我已经在互联网上搜索过,但没有找到对我有帮助的东西。
我对转换、动画、过渡等知之甚少,所以我尝试了一些修改并移动了“透视”,但仍然一无所获。
这是 CSS
.uic-wrapper {
height: 340px;
width: 300px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
perspective: 500px;
perspective-origin: 50% -30%;
}
.uic-wrapper:hover .card-middle {
transform: translate3d(0, 0, -60px);
opacity: .8;
}
.uic-wrapper:hover .card-back {
transform: translate3d(0, 0, -120px);
opacity: .4;
}
他就是一个很好的例子
$(document).ready(function(){
"use strict";
var container = $(".uic-wrapper");
var nextBtn = $("nav .btn-next");
var backBtn = $("nav .btn-back");
var finishBtn = $("nav .btn-finish");
updateNav();
function updateNav(){
var hasAnyRemovedCard = $(".toRight").length ? true : false,
isCardLast = $(".card-middle").length ? false : true;
if(hasAnyRemovedCard) {
backBtn.removeClass('back-btn-hide');
} else {
backBtn.addClass('back-btn-hide');
$(".card-front").addClass('noBack');
}
if(isCardLast){
nextBtn.hide();
finishBtn.removeClass("hide");
} else {
nextBtn.show();
finishBtn.addClass("hide");
}
}
function showNextCard(){
//Check if there is only one card left
if($(".card-middle").length > 0){
var currentCard = $(".card-front"),
middleCard = $(".card-middle"),
backCard = $(".card-back"),
outCard = $(".card-out").eq(0);
//Remove the front card
currentCard.removeClass('card-front').addClass('toRight');
//change the card places
middleCard.removeClass('card-middle').addClass('card-front');
backCard.removeClass('card-back').addClass('card-middle');
outCard.removeClass('card-out').addClass('card-back');
updateNav();
}
}
function showPreviousCard(){
var currentCard = $(".card-front"),
middleCard = $(".card-middle"),
backCard = $(".card-back"),
lastRemovedCard = $(".toRight").slice(-1);
lastRemovedCard.removeClass('toRight').addClass('card-front');
currentCard.removeClass('card-front').addClass('card-middle');
middleCard.removeClass('card-middle').addClass('card-back');
backCard.removeClass('card-back').addClass('card-out');
updateNav();
}
nextBtn.on('click', function(){
showNextCard();
});
backBtn.on('click', function(){
showPreviousCard();
});
});
* {
box-sizing: border-box;
outline: none;
}
a {
color: #1590d0;
}
html, body {
background: #10a3f1;
/* fallback for old browsers */
height: 100%;
font-family: 'Roboto', sans-serif;
}
a {
text-decoration: none;
}
h1 {
color: #6b7d88;
}
.form-group {
margin-top: 15px;
}
.form-group label {
color: rgba(0, 0, 0, 0.8);
}
input[type="text"],
input[type="password"] {
width: 100%;
display: block;
padding: 10px;
border-radius: 8px;
border: none;
background-color: #e5eeed;
margin-top: 5px;
}
.hide {
display: none;
}
.uic-wrapper {
height: 340px;
width: 300px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
perspective: 500px;
perspective-origin: 50% -30%;
}
.uic-wrapper ul {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.uic-wrapper ul li {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 0.3s;
}
.uic-wrapper ul li .cards-wrapper .card-front {
position: relative;
z-index: 3;
box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.19);
}
.uic-wrapper ul li .cards-wrapper .card-middle {
z-index: 2;
}
.uic-wrapper ul li .cards-wrapper .card-back {
z-index: 1;
}
.uic-wrapper ul li .cards-wrapper .card-out {
z-index: 0;
opacity: 0;
}
.uic-wrapper nav {
position: relative;
z-index: 4;
}
.uic-wrapper nav a {
color: #ffb902;
}
.uic-wrapper nav .btn-back {
font-size: 28px;
position: fixed;
top: 20px;
left: 20px;
transition: all 0.3s ease;
}
.uic-wrapper nav .btn-back:active {
transform: scale(0.96);
}
.uic-wrapper nav .btn-back.back-btn-hide {
margin-top: -30px;
opacity: 0;
}
.uic-wrapper nav .btn-finish,
.uic-wrapper nav .btn-next {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
padding: 10px;
background-color: #66bf65;
color: white;
text-align: center;
border-radius: 0;
border-radius: 8px;
transition: all 0.3s ease;
}
.uic-wrapper nav .btn-finish:active,
.uic-wrapper nav .btn-next:active {
transform: scale(0.96);
}
.uic-wrapper .card {
background-color: #fff;
border-radius: 0;
height: 100%;
width: 100%;
padding: 80px 20px 20px 20px;
transition: all 0.6s cubic-bezier(0.51, 0.02, 0.01, 0.88);
border-radius: 8px;
}
.uic-wrapper .noBack {
padding: 20px;
}
.uic-wrapper .toRight {
transform: translate3d(0, 0, 100px);
opacity: 0;
}
.uic-wrapper .toLeft {
transform: none;
opacity: 1;
}
.uic-wrapper:hover .card-middle {
transform: translate3d(0, 0, -60px);
opacity: .8;
}
.uic-wrapper:hover .card-back {
transform: translate3d(0, 0, -120px);
opacity: .4;
}
.metaInfo {
position: fixed;
bottom: 20px;
left: 20px;
color: rgba(255, 255, 255, 0.8);
}
.metaInfo a {
color: #fff;
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<div class="uic-wrapper no-touch">
<ul>
<li>
<ul class="cards-wrapper">
<li class="card card-front active">
<h1>Signup</h1>
<div class="form-group">
<label for="">First Name</label>
<input type="text" placeholder="First Name">
</div>
<div class="form-group">
<label for="">Last Name</label>
<input type="text" placeholder="Last Name">
</div>
</li>
<li class="card card-middle">
<div class="form-group">
<label for="">Email</label>
<input type="text" placeholder="Email">
</div>
<div class="form-group">
<label for="">Age</label>
<input type="text" placeholder="Age">
</div>
</li>
<li class="card card-back">
<div class="form-group">
<label for="">Pick a username</label>
<input type="text" placeholder="Username">
</div>
<div class="form-group">
<label for="">Password</label>
<input type="password" placeholder="Password">
</div>
</li>
<li class="card card-out">
<center>
<i style="font-size:62px;color: #66bf65;" class="fa fa-check"></i>
<br>
<h1>All Set!</h1>
</center>
</li>
</ul>
<nav>
<ul>
<li><a class="btn-back" href="#0"><i class="fa fa-arrow-left"></i></a></li>
<li><a class="btn-next" href="#0">Next <i class="fa fa-arrow-right"></i></a></li>
<li><a href="#0" class="btn-finish hide">Finish</a></li>
</ul>
</nav>
</li>
</ul>
</div>
还有一个 JSFiddle以防万一。
最佳答案
如果似乎没有任何效果,您可以尝试以下 firefox 的解决方法:
@-moz-document url-prefix() {
.uic-wrapper:hover .card-middle {
transform: translate3d(14px, -12px, -30px);
opacity: .8;
width: 90%;
}
.uic-wrapper:hover .card-back {
transform: translate3d(28px, -24px, -120px);
opacity: .4;
width: 80%;
}
}
我们正在手动设置转换的 X 和 Y 坐标,并设置一些宽度以匹配它的实际外观。
这是一个工作 fiddle https://jsfiddle.net/85a1gxbL/15/
关于css - 透视不适用于 FireFox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51256265/
我在为 MacOSX 构建的独立包中添加 DMG 背景的自定义图标时遇到问题。我在项目的根目录中添加了一个包。正在从中加载自定义图标,但没有加载 DMG 背景图标。我正在使用 Java fx 2.2.
Qt for Symbian 和 Qt for MeeGo 有什么区别?我知道 Qt 是一个交叉编译平台。这是否意味着如果我使用来自 Qt 的库,完全相同的库可以在所有支持 Qt 的设备(例如 Sym
我正在尝试使用 C# .NET 3.5/4.0 务实地运行 SQL Server 数据库的备份。我已经找到了如何完成此操作,但是我似乎找不到用于备份的命名空间库。 我正在寻找 Microsoft.Sq
我最近在疯狂学习 Java,但我通常是一名 .NET 开发人员。 (所以请原谅我的新手问题。) 在 .Net 中,我可以在不使用 IIS 的情况下开发 ASP.Net 页面,因为它有一个简化的 Web
这post仅当打印命令中有字符串时才有用。现在我有大量的源代码,其中包含一条声明,例如 print milk,butter 应该格式化为 print(milk,butter) 用\n 捕获行尾并不成功
所以我的问题是: https://gist.github.com/panSarin/4a221a0923927115584a 当我保存这个表格时,我收到了标题中的错误 NoMethodError (u
如何让 Html5 音频在点击时播放声音? (ogg 用于 Firefox 等浏览器,mp3 用于 chrome 等浏览器) 到目前为止,我可以通过 onclick 更改为单个文件类型,但我无法像在普
如果it1和it2有什么区别? std::set s; auto it1 = std::inserter(s, s.begin()); auto it2 = std::inserter(s, s.en
4.0.0 com.amkit myapp SpringMVCFirst
我目前使用 Eclipse 作为其他语言的 IDE,而且我习惯于不必离开 IDE 做任何事情 - 但是我真的很难为纯 ECMAScript-262 找到相同或类似的设置。 澄清一下,我不是在寻找 DO
我想将带有字符串数组的C# 结构发送到C++ 函数,该函数接受void * 作为c# 结构和char** 作为c# 结构字符串数组成员。 我能够将结构发送到 c++ 函数,但问题是,无法从 c++ 函
我正在使用动态创建的链接: 我想为f:param附加自定义转换器,以从#{name}等中删除空格。 但是f:param中没有转换器
是否可以利用Redis为.NET创建后写或直写式缓存?理想情况下,透明的高速缓存是由单个进程写入的,并且支持从数据库加载丢失的数据,并每隔一段时间持久保存脏块? 我已经搜查了好几个小时,也许是goog
我正在通过bash执行命令的ssh脚本。 FILENAMES=( "export_production_20200604.tgz" "export_production_log_2020060
我需要一个正则表达式来出现 0 到 7 个字母或 0 到 7 个数字。 例如:匹配:1234、asdbs 不匹配:123456789、absbsafsfsf、asf12 我尝试了([a-zA-Z]{0
我有一个用于会计期间的表格,该表格具有期间结束和开始的开始日期和结束日期。我使用此表来确定何时发生服务交易以及何时在查询中收集收入,例如... SELECT p.PeriodID, p.FiscalY
我很难为只接受字符或数字的 Laravel 构建正则表达式验证。它是这样的: 你好<-好的 123 <- 好的 你好123 <-不行 我现在的正则表达式是这样的:[A-Za-z]|[0-9]。 reg
您实际上会在 Repeater 上使用 OnItemDataBound 做什么? 最佳答案 “此事件为您提供在客户端显示数据项之前访问数据项的最后机会。引发此事件后,数据项将被清空,不再可用。” ~
我有一个 fragment 工作正常的项目,我正在使用 jeremyfeinstein 的 actionbarsherlock 和滑动菜单, 一切正常,但是当我想自定义左侧抽屉列表单元格时,出现异常
最近几天,我似乎平均分配时间在构建我的第一个应用程序和在这里发布问题!! 这是我的第一个应用程序,也是我们的设计师完成的第一个应用程序。我试图满足他所做的事情的外观和感觉,但我认为他没有做适当的事情。
我是一名优秀的程序员,十分优秀!