将正确格式的图像放置在悬停按钮后面CSS动画
问题描述:
我目前正试图将图像置于CSS悬停动画之后,并希望与按钮一起使用。将正确格式的图像放置在悬停按钮后面CSS动画
成品应该是这个样子: Mock Up of Finished Product
任何试图正确地插入和格式化的背景帮助像这样将不胜感激,因为我一直运行到死角试图插入的图像。
到目前为止,这是我一直在努力。
@import "bourbon";
* {
\t -webkit-transition-property: all;
\t -webkit-transition-duration: .2s;
-moz-transition-timing-function: cubic-bezier(100,50,21,6);
\t -moz-transition-property: all;
\t -moz-transition-duration: .2s;
-moz-transition-timing-function: cubic-bezier(100,50,21,6);
}
h1{ font-family: calibri;
color:#FFFFFF;
font-size: 20px;
text-align: center;
}
body {
background-color: #613f4d;
padding-top: 70px;
font-family: 'Open Sans', calibri;
text-align: center;
font-weight: 100;
}
.btn {
position: relative;
display: inline-block;
width: 166px;
height: 45px;
font-size: 17px;
line-height: 45px;
text-align: center;
text-transform: uppercase;
color: #fff;
cursor: pointer;
overflow: hidden;
}
.btn svg {
position: absolute;
top: 0; left: 0;
}
.btn svg rect {
fill: none;
stroke: #fff;
stroke-width: 1;
stroke-dasharray: 422, 0;
@include transition(all 1300ms $ease-out-expo);
}
.btn:hover svg rect {
stroke-width: 5;
stroke-dasharray: 10, 310;
stroke-dashoffset: 33;
}
.btn:hover {
color:#fff;
font-size:18px;
letter-spacing:1px;
font-weight:bold;
}
<link href='https://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>
<h1>Find out more about our</h1>
<div class="btn">
<svg>
<rect x="0" y="0" fill="none" width="166" height="45"/>
</svg>
Company
</div>
答
我想你期待如下所示。请检查一下。
@import "bourbon";
* {
\t -webkit-transition-property: all;
\t -webkit-transition-duration: .2s;
-moz-transition-timing-function: cubic-bezier(100,50,21,6);
\t -moz-transition-property: all;
\t -moz-transition-duration: .2s;
-moz-transition-timing-function: cubic-bezier(100,50,21,6);
}
h1{ font-family: calibri;
color:#FFFFFF;
font-size: 20px;
text-align: center;
}
body {
background-color: #613f4d;
padding-top: 70px;
font-family: 'Open Sans', calibri;
text-align: center;
font-weight: 100;
}
.btn {
position: relative;
display: inline-block;
width: 166px;
height: 45px;
font-size: 17px;
line-height: 45px;
text-align: center;
text-transform: uppercase;
color: #fff;
cursor: pointer;
overflow: hidden;
}
.btn svg {
position: absolute;
top: 0; left: 0;
}
.btn svg rect {
fill: none;
stroke: #fff;
stroke-width: 1;
stroke-dasharray: 422, 0;
@include transition(all 1300ms $ease-out-expo);
}
.btn:hover svg rect {
stroke-width: 0;
}
.btn:hover .heading {
display:none;
}
.bg {
position: fixed;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: .25s;
pointer-events: none;
}
.btn :hover ~ .bg {
//background: #ff6d6d;
background-image: url("https://i.stack.imgur.com/WpFwN.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
<link href='https://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>
<h1 class="heading">Find out more about our</h1>
<div class="btn">
<svg>
<rect x="0" y="0" fill="none" width="166" height="45"/>
</svg>
<div class="heading"> Company</div>
<div class="bg">
</div>
</div>
您的要求就是改变上面的代码一样,你有共同的形象。对? –
@LibinCJacob是的我想将上面的代码片段放在图片的顶部,如我创建的样机图片所示。 – Moods762