Question

我制作了一个按钮，该按钮基本上将位于传单地图的顶部。它使用animate.css和wow.js对某些事物进行动画处理，并且效果很好。它由div，图像，文本和跨度组成。我需要做的是将整个东西变成一个div或可以调整大小和移动的东西，而无需更改所有CSS等。如果我想添加额外的2或3个按钮，将会很麻烦。我需要能够根据屏幕分辨率移动和调整大小。我希望能够使用媒体查询来更改div的大小和位置之类的一件事，但要保持功能。

我尝试将所有内容放到新的div中，但没有任何乐趣！

我包括了一个小提琴http://jsfiddle.net/eLron3d2/1/

HTML是：

<div id="start_box" class ="animated bounceIn">
<img id="target" class="targetimg" src="https://www.faces2places.co.uk/img/target.png" onclick="golive()"></img><button id="startbutton" type="button" class="btn-target animated bounceInLeft"></button>
<span id="status" class="btn-target-name animated fadeIn delaydn">START</span>
</div>

CSS是：

#start_box {
    position: fixed;
    top: 10px;
    /* right: 20px; */
    left: 10px;
    z-index: 2;
    border: 2px solid;
    border: radius:20px;
    border-radius: 5px;
    padding: 0px;
    box-shadow: 0px 0px 0px 0px;
    width: 80px;
    height: 80px;
    background-color: white;
    border-color: #969696;
}

.targetimg {
position:relative;
    top: 4px;
    left: 8px;
 border-radius: 2.5px;
display:flex;
width:60px;
height:60px;

  animation-duration: 30000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}

.btn-target {
background-color: white !important;
    position: fixed;
    width: 72px;
    height: 16px;
    top: 67.5px;
    left: 2.2px;
    color: #000000;
    border: 2px solid #969696;
    border-radius: 5px 5px 5px 5px
}

.btn-target-name {
color:green;
font-family: 'Passion One', cursive;
display: block;
width: 76px;
    top: 70.5px;
    font-size: 12px;
font-weight:0;
text-align: center;
position: fixed;
}

.delaydn {
    -webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
    animation-delay: 1s;
}

.goliveactive {
  animation-duration: 30000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
animation-name: spin;
}


@keyframes spin {
    from {
        transform:rotate(0deg);

    }
    to {
        transform:rotate(360deg);

    }
}

JS是

window.live = false;
window.directions = true;


function golive() {


if (window.live === false) {
  $("#target").addClass("goliveactive"); 
    $('#status').css('color', '#ff3258');
    $('#status').text('FINISH');
    window.live = true;
    } else if (window.live = true) {
    $("#target").removeClass("goliveactive ");
    $('#status').css('color', 'green');
    $('#status').text('START');
    window.live = false;
    }
}

Answer 1

好，我已经做到了

http://jsfiddle.net/eLron3d2/2/

我将所有内容包装到一个按钮中，并将几乎所有内容更改为％固定大小。我可以在.target css

中更改其大小和位置

除了我希望将字体大小更改为自动更改以适应大小之外，它的效果还不错，但是媒体查询很容易做到这一点，至少我不必更改所有内容。唯一的是，该字体无法在jsfiddle中正确加载和显示，但可以在我检查过的所有浏览器上使用。

两个按钮的HTML是

<button class="btn target animated fadeIn"><span id="btn1" class="btnimage animated rubberBand" onclick="golive()"></span><span class="btn1textbox animated bounceInLeft"></span><span id="status" class="btn1text animated delaydn fadeIn">START</span></button>
<button class="btn target animated fadeIn delaybox"><img class="driverimg animated fadeIn" src="http://www.faces2places.co.uk/img/jules.jpg" onclick="alert('FUCKME')"></img><span class="btn1textbox animated bounceInLeft delaybox"></span><span id="status" class="btn1text animated delaydn2 fadeIn">JUSTIN.C</span></button>

CSS是

.btn {
position: relative;
display: block;
margin-bottom:12px;
 color: white;
 font-size: 16px;
 cursor: pointer;
 border: 2px solid;
    padding: 0px;
    box-shadow: 0px 0px 0px 0px;
width:80px;
height:80px;
    background-color: white;
    border-color: #969696;
  border-radius: 5px 5px 5px 5px
}

.target {
left:100px;
width:80px;
height:80px;
top:100px;
}

.btn1textbox {
position: absolute;

left: 5%;
top: 92%;
display: inline-block;
 color: white;
 border: 2px solid;
   width: 86.5%;
    height: 16%;
    background-color: white;
    border-color: #969696;
  border-radius: 5px 5px 5px 5px
}

/* Darker background on mouse-over */
.btn:hover {

}

@keyframes spin {
    from {
        transform:rotate(0deg);

    }
    to {
        transform:rotate(360deg);

    }
}

.btnimage {
position: relative;
background:url(https://www.faces2places.co.uk/img/target.png) no-repeat center;
display: inline-block;
width:100%;
height:100%;
background-size: 80% 80%;
top:-4px;

}

.btndriver {
position: relative;

display: inline-block;
width:100%;
height:100%;
background-size: 80% 80%;


}

.btn1text {
font-family: 'Passion One', cursive;
color:green;
position: relative;
display: inline-block;
width:100%;
height:100%;
top: -12px;
 font-size: 13px;

}

.goliveactive {
  animation-duration: 30000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
animation-name: spin;
}

.delaydn {
    -webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
    animation-delay: .8s;
}

.delaybox {
    -webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
    animation-delay: .5s;
}

.delaydn2 {
    -webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
    animation-delay: 1.3s;
}

button:focus {outline:0;}

.driverimg {
position:relative;
top:-1;
 border-radius: 2.5px;
display:inline-block;
width:100%;
height:100%;
}

JS是

new WOW().init();
window.live = false;
window.directions = true;

function golive() {

if (window.live === false) {
    $("#btn1").addClass("goliveactive"); 
    $('#status').css('color', '#ff3258');
    $('#status').text('FINISH');
    window.live = true;
    } else if (window.live = true) {
    $("#btn1").removeClass("goliveactive ");
    $('#status').css('color', 'green');
    $('#status').text('START');
    window.live = false;
    }
}

使div的内容成为可移动的可调整大小的按钮

1 个答案: