Hello stackoverflow社区。很高兴来到这里这是我的第一篇文章，所以让我们开始吧:)。
我创建了自己的笔3D Animated Buttons
stackoverflow want the full code but it will be to long to post here
我遇到了两个问题：
首先。是的，我知道JS代码也可以在CSS中完成，但因为我遇到了字体系列转换问题，所以我创建了jQuery部分。
首先，我想在按钮悬停上为字体系列更改添加转换延迟，但我无法使用：font-family .2s easy; |过渡：font-family .2s; |转换：font-family 2s; | transition-delay：font-family 2s;或类似的任何东西..字体系列将始终直接更改。 所以这就是我使用jQuery添加超时的原因。你认为我应该怎么做纯css的字体转换延迟？
第二个问题是基本的jQuery悬停功能和鼠标悬停功能在Opera中不起作用。例如
$(".test").hover(function () {
alert('test');
},
function () {
});
这就是我为opera创建这个额外的css代码的原因。所有其他浏览器都可以使用上面的jquery悬停代码。
.fake_id_realflipbutton1:hover #id_realflipbutton1 {
transform:rotateX(360deg);
border: 5px solid #fff;
font-size:19px;
color:#222222;
transition: all 1.6s;
font-family: 'Audiowide', sans-serif;
}
这是html，css和js中的按钮1。也许如果您观看现场笔以了解或查看第一个按钮的示例代码会更好。
// BUTTON 1
$(".fake_id_realflipbutton1").hover(function () { ////////////////////////////////////////////////////////////
$('head').append('<style class="style_1_wait">#id_realflipbutton1{font-family:\'Roboto\', cursive !important;}</style>'); // <-- WORKAROUND FOR OPERA BUG
$('head').append('<style class="style_1">#id_realflipbutton1{transform:rotateX(360deg); -webkit-transform:rotateX(360deg); -o-transform:rotateX(360deg); -moz-transform:rotateX(360deg); -ms-transform:rotateX(360deg);}</style>');
$('#id_realflipbutton1').css('border', '5px solid #fff');
$('#id_realflipbutton1').css('font-size', '19px');
setTimeout(function(){
$('head').append('<style class="style_1_wait">#id_realflipbutton1{font-family:\'Audiowide\', cursive !important;}</style>');
$('head').append('<style class="style_1_wait">#id_realflipbutton1{color:#222222}</style>');
}, 600); // <-- 600 should be smooth time - try to adjust by yourself if you don´t like :)
}, //////////////////////////////////////////////////////////////////////////////////////////////////////////
function () {
$(".style_1").empty();
$('#id_realflipbutton1').css('border', '1px solid #fff');
$('#id_realflipbutton1').css('font-size', '15px');
setTimeout(function(){
$(".style_1_wait").empty();
}, 633); // <-- 633 should be smooth time - try to adjust by yourself if you don´t like :)
}); // $("#id_realflipbutton1").hover(function () { /*#######################################################*/
body {
background-color:grey;
}
/* START - BUTTON 1 */
.div_1 {
margin: 0 auto;
position: relative;
width: 200px;
height: 55px;
top:50px;
}
#id_realflipbutton1 {
width: 200px; /*orig: 200px*/
height: 55px; /*orig: 55px*/
z-index: 1337;
display: block;
border: 1px #fff solid;
transition: all 1.6s;
font-family: 'Roboto', sans-serif;
color: #fff; /*<- set the color of the border without hover*/
font-size: 15px;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
text-decoration: none;
background-color: rgba(13, 7, 7, 0);
}
.fake_id_realflipbutton1 {
width: 200px;
height: 55px;
}
.fake_id_realflipbutton1:hover #id_realflipbutton1 {
transform:rotateX(360deg);
border: 5px solid #fff;
font-size:19px;
color:#222222;
transition: all 1.6s;
font-family: 'Audiowide', sans-serif;
}
#id_realflipbutton1::before, #id_realflipbutton1::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '';
z-index: -1;
margin: -5%;
box-shadow: inset 0 0 0 2px;
-webkit-animation: clipMe1 8s ease infinite;
-moz-animation: clipMe1 8s ease infinite;
-o-animation: clipMe1 8s ease infinite;
animation: clipMe1 8s linear infinite;
opacity: 1;
transition: all 1.6s;
}
/* END - BUTTON1 */
/* ______________________________________________________ */
@keyframes clipMe1 {
0% {
clip: rect(0px, 0px, 0px, 0px);
}
50% {
clip: rect(0px, 200px, 220px, 0px);
}
75% {
clip: rect(0px, 220px, 220px, 218px);
}
100% {
clip: rect(0px, 0px, 0px, 0px);
}
} /*@keyframes clipMe1 {*/
@-webkit-keyframes clipMe1 {
0% {
clip: rect(0px, 0px, 0px, 0px);
}
50% {
clip: rect(0px, 200px, 220px, 0px);
}
75% {
clip: rect(0px, 220px, 220px, 218px);
}
100% {
clip: rect(0px, 0px, 0px, 0px);
}
} /* @-webkit-keyframes clipMe1 { */
@-moz-keyframes clipMe1 {
0% {
clip: rect(0px, 0px, 0px, 0px);
}
50% {
clip: rect(0px, 200px, 220px, 0px);
}
75% {
clip: rect(0px, 220px, 220px, 218px);
}
100% {
clip: rect(0px, 0px, 0px, 0px);
}
} /* @-moz-keyframes clipMe1 { */
@-o-keyframes clipMe1 {
0% {
clip: rect(0px, 0px, 0px, 0px);
}
50% {
clip: rect(0px, 200px, 220px, 0px);
}
75% {
clip: rect(0px, 220px, 220px, 218px);
}
100% {
clip: rect(0px, 0px, 0px, 0px);
}
} /* @-o-keyframes clipMe1 { */
/*_____________________________________*/
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Animated 3D Flip Buttons with Laser,Glitch Effects & Text Transform [CSS+JS] - created by Dennis Demand | www.hornyfamily.online">
<meta name="author" content="created by Dennis Demand | www.hornyfamily.online">
<title>Animated 3D Flip Buttons with Laser, Glitch Effects & Text Transform [CSS+JS]</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Audiowide" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<!-- Button 1 -->
<div class="div_1">
<div class="fake_id_realflipbutton1">
<button id="id_realflipbutton1">Button 1</button>
</div>
</div>
</body>
</html>