我对其中一张图片的动画存在问题。我希望图像在悬停时具有过渡时间调整大小(然后在鼠标移开图像时将过渡时间恢复为原始大小),但是当我调整窗口大小并相应调整图像大小时,它会随着过渡而调整大小时间 。有人知道解决这个问题的方法吗?
<div class="column">
<a href="-----.html">
<img src="-----.jpg">
</a>
</div>
.column img{
filter: brightness(0.8);
transition: 0.6s ease;
width:100%;
height: calc(100vh - 300px);
}
.column:hover img{
filter: brightness(0.5);
width:110%;
transform: translate(-5%,-5%);
transition: 0.6s ease;
height: calc(110vh - 300px);
}
我可以看到为什么在调整窗口大小时将过渡应用于图像,但是我不知道当鼠标移开时如何再应用过渡。有人可以建议解决这个问题的方法吗?
编辑:完整的代码发布在下面
html {
height: 100%;
}
body {
min-width: 600px;
min-height: 100%;
position: relative;
font-family: Helvetica;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #FFFFFF;
overflow-y: hidden;
}
/*Header*/
header {
background: #FFFFFF;
color: #F89828;
height: 159px;
}
header img {
margin-left: calc(50% - 122px);
margin-top: 60px;
margin-bottom: 60px;
height: 39px;
width: 244px;
}
.column {
float: left;
position: relative;
text-align: center;
width: 50%;
padding: 0px;
overflow: hidden;
height: calc(100vh - 239px);
}
.row .column img {
background: #000000;
width: 100%;
filter: brightness(0.8);
height: calc(100vh - 239px);
transition: 0.6s ease;
}
.row .column:hover img {
transition: 0.6s ease;
width: 110%;
cursor: pointer;
transform: translate(-5%, -5%);
filter: brightness(0.5);
height: calc(110vh - 239px);
}
.centered {
color: #FFFFFF;
position: absolute;
font-size: 4em;
font-weight: bold;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
}
/*footer*/
footer {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
color: #FFFFFF;
background-color: #808080;
font-weight: bold;
}
<body>
<header>
<img src="https://picsum.photos/400/100/?random">
</header>
<div class="row">
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random">
<div class="centered">1</div>
</a>
</div>
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random" />
<div class="centered">2</div>
</a>
</div>
</div>
<footer>
<p>This is where I would put some filler text, if I had any</p>
</footer>
</body>
答案 0 :(得分:1)
您需要为width
分配hover
而不是.column img{
filter: brightness(0.8);
transition: 0.6s ease;
width:35%;
}
.column:hover img{
filter: brightness(0.5);
width:110%;
transform: translate(-5%,-5%);
transition: 0.6s ease;
}
进行动画,然后选中
<div class="column">
<a href="-----.html">
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</a>
</div>
using System;
public class Program
{
struct A
{
public A(int x) : this()
{
X = x;
}
public int X { get; private set; }
public void Update(int y)
{
X += y;
}
}
class B
{
private A _secondVar;
public B()
{
}
public A MyVar { get; set; }
public A SecondVar
{
get { return _secondVar; }
protected set { _secondVar = value; }
}
public void Foo(int z)
{
MyVar.Update(z);
_secondVar.Update(z);
}
}
public static void Main()
{
B b = new B();
Console.WriteLine("BEFORE: b.MyVar: " + b.MyVar.X + ", b.SecondVar: " + b.SecondVar.X );
b.Foo(23);
Console.WriteLine("AFTER: b.MyVar: " + b.MyVar.X + ", b.SecondVar: " + b.SecondVar.X );
}
}
答案 1 :(得分:0)
尝试使用scale(2)
对我来说效果很好。
但是您需要根据需要更改
translate()
值的scale()
值。
.column img{
filter: brightness(0.8);
transition: 0.6s ease;
}
.column:hover img{
filter: brightness(0.5);
transform: translate(50%,50%) scale(2);
transition: 0.6s ease;
}
<div class="column">
<a href="-----.html">
<img src="https://picsum.photos/300/100/?random">
</a>
</div>
已更新您的代码。
html {
height: 100%;
}
body {
min-width: 600px;
min-height: 100%;
position: relative;
font-family: Helvetica;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #FFFFFF;
overflow-y: hidden;
}
/*Header*/
header {
background: #FFFFFF;
color: #F89828;
height: 159px;
}
header img {
margin-left: calc(50% - 122px);
margin-top: 60px;
margin-bottom: 60px;
height: 39px;
width: 244px;
}
.column {
float: left;
position: relative;
text-align: center;
width: 50%;
padding: 0px;
overflow: hidden;
height: calc(100vh - 239px);
}
.row .column img {
background: #000000;
width: 100%;
filter: brightness(0.8);
height: calc(100vh - 239px);
transition: 0.6s ease;
}
.row .column:hover img {
transition: 0.6s ease;
width: 110%;
cursor: pointer;
transform: translate(-10%,-10%) scale(1.3);
filter: brightness(0.5);
height: calc(110vh - 239px);
}
.centered {
color: #FFFFFF;
position: absolute;
font-size: 4em;
font-weight: bold;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
}
/*footer*/
footer {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
color: #FFFFFF;
background-color: #808080;
font-weight: bold;
}
<body>
<header>
<img src="https://picsum.photos/400/100/?random">
</header>
<div class="row">
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random">
<div class="centered">1</div>
</a>
</div>
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random" />
<div class="centered">2</div>
</a>
</div>
</div>
<footer>
<p>This is where I would put some filler text, if I had any</p>
</footer>
</body>
希望这对您有所帮助。
答案 2 :(得分:0)
尝试一下:
.container {
display: inline-block;
width: 64px;
height: 64px;
perspective: 700px;
}
.icon, .icon-one, .icon-two{
position: absolute;
transition: all .5s;
transform-style: preserve-3d;
backface-visibility: hidden;
width:50px;
height:50px;
}
}
.icon-wrap .icon-one{
width:150px;
height:150px;
transform:translate(0%,0%);}
/* ::: HOVER EFFECTS (Remove Automated for this to work) */
.icon-wrap:hover .icon{ transform: translate(0%,0%); }
/* ::: AUTOMATED EFFECTS */
.icon-wrap .icon{
animation: icon-wrap 5s 1s infinite alternate ease-in-out;
-webkit-animation: icon-wrap 5s 1s infinite alternate ease-in-out;
}
@keyframes icon-wrap {
0% { transform:translate(0%,0%); }
100% { transform: translate(40%,40%)scale(2);
width:150px;
height:150px;
}
}
@-webkit-keyframes icon-wrap {
0% { transform: translate(0%,0%); }
100% { transform: translate(40%,40%) scale(2);
width:150px;
height:150px; }
}
<div class="container icon-wrap">
<div class="icon">
<div class="icon-one">
<a href="-----.html">
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</a>
</div>
</div>
</div>
.container {
display: inline-block;
width: 64px;
height: 64px;
perspective: 700px;
}
.icon, .icon-one, .icon-two{
position: absolute;
transition: all .5s;
transform-style: preserve-3d;
backface-visibility: hidden;
width:50px;
height:50px;
}
}
.icon-wrap .icon-one{
width:150px;
height:150px;
transform:translate(40%,40%)scale(2);}
/* ::: HOVER EFFECTS (Remove Automated for this to work) */
.icon-wrap:hover .icon{ transform: translate(40%,40%)scale(2); }
/* ::: AUTOMATED EFFECTS */
.icon-wrap .icon{
animation: icon-wrap 5s 1s infinite alternate ease-in-out;
-webkit-animation: icon-wrap 5s 1s infinite alternate ease-in-out;
}
<div class="container icon-wrap">
<div class="icon">
<div class="icon-one">
<a href="-----.html">
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</a>
</div>
</div>
</div>
答案 3 :(得分:0)
仅当窗口悬停时,才可以在图像上设置过渡效果。这样,在调整大小时,它将不再影响您的元素,但是在元素的悬停和鼠标移出时,它仍将处于活动状态。
/* when hovering the page */
:hover .row .column img {
transition: 0.6s ease;
}
.row .column img {
background: #000000;
width: 100%;
filter: brightness(0.8);
height: calc(80vh - 10px);
/* transition: 0.6s ease; [removed]*/
}
.row .column:hover img {
/* transition: 0.6s ease; [useless]*/
width: 110%;
cursor: pointer;
transform: translate(-5%, -5%);
filter: brightness(0.5);
height: calc(80vh - 10px);
}
.column {
float: left;
position: relative;
text-align: center;
width: 50%;
padding: 0px;
overflow: hidden;
height: calc(60vh - 10px);
}
<div class="row">
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random">
<div class="centered">1</div>
</a>
</div>
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random" />
<div class="centered">2</div>
</a>
</div>
</div>
但是使用这种解决方案,如果从文档本身鼠标移出,那么过渡也将被禁用...
不幸的是,除了使用js,我看不到其他解决方案。
(function(){
let timer;
const docEl = document.documentElement;
addEventListener('resize', e => {
clearTimeout(timer);
docEl.classList.add('resizing');
timer = setTimeout(_ => docEl.classList.remove('resizing'), 200);
});
})();
:root.resizing .row .column img {
transition: none;
}
.row .column img {
background: #000000;
width: 100%;
filter: brightness(0.8);
height: calc(80vh - 10px);
transition: 0.6s ease;
}
.row .column:hover img {
width: 110%;
cursor: pointer;
transform: translate(-5%, -5%);
filter: brightness(0.5);
height: calc(80vh - 10px);
}
.column {
float: left;
position: relative;
text-align: center;
width: 50%;
padding: 0px;
overflow: hidden;
height: calc(60vh - 10px);
}
<div class="row">
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random">
<div class="centered">1</div>
</a>
</div>
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random" />
<div class="centered">2</div>
</a>
</div>
</div>