文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS3动画，不完全正确

问CSS3动画，不完全正确
EN

Stack Overflow用户

提问于 2014-05-30 01:36:26

回答 1查看 66关注 0票数 1

你可以看到我一直在尝试做什么。但我希望每个图像翻转的底部出现后，右侧弹出和淡入。而不仅仅是当鼠标悬停在每个图像的底部时。

我也遇到了困难，使整个事情可以点击到博客帖子，而不遮蔽/停止个别链接，和简短的代码选择是可行的。

我已经做了好几天了都没什么好结果...(社交图标，将是单独的链接，但我还没有这样做)

有人知道我哪里错了吗？我有一把小提琴在底部。理想情况下，我希望它都在悬停状态下运行，但显然会延迟底部的黑盒。我离它太近了，太烦人了。

HTML：

<body>
    <div class="wrapper">

            <div class="container left">
                <img src="http://www.glennleader.co.uk/wp-content/uploads/2014/05/suit6.jpg" alt="image" />
                <div class="sig"></div>
                <div class="innercontent css3-2">
                        <span class="css3-2 resize"><br/><h2><a href="bloglink">Title of the blog Post</a></h2>
                        <p>April 29, 2014</p>
                        <p><img src="http://www.glennleader.co.uk/wp-content/uploads/2014/05/share-buttons1-e1399999305264.png" /></p>
<p class="url"><textarea spellcheck="false">http://shortcodegoeshere.com/334</textarea></p>
<p><a href="link1">3/4 length</a> • <a href="link2">Agnelli check</a> • <a href="link3">bespoke jacket</a> • <a href="link4">Jacket</a> • <a href="link5">London Lounge</a></p><span class="clickhere"><a href="bloglink">Click here to read this article</a></span></span>



                </div>

            </div><!-- .container -->


        <div class="container right">
                <img src="http://www.glennleader.co.uk/wp-content/uploads/2014/05/suittemp.jpg" alt="image" />
                <div class="sig"></div>
                <div class="innercontent css3-2">
                        <span class="css3-2 resize"><br/><h2><a href="bloglink">Title of the blog Post</a></h2>
                        <p>April 29, 2014</p>
                        <p><img src="http://www.glennleader.co.uk/wp-content/uploads/2014/05/share-buttons1-e1399999305264.png" /></p>
<p class="url"><textarea spellcheck="false">http://shortcodegoeshere.com/334</textarea></p>
<p><a href="link1">3/4 length</a> • <a href="link2">Agnelli check</a> • <a href="link3">bespoke jacket</a> • <a href="link4">Jacket</a> • <a href="link5">London Lounge</a></p><span class="clickhere"><a href="bloglink">Click here to read this article</a></<span></span>



                </div>

            </div><!-- .container -->

        </footer>

    </div><!-- .wrapper -->


</body>

CSS：

    *{margin:0;padding:0;}

img {margin:0;padding:0px;}

.wrapper{
    margin:0 auto;
    width:720px;
    padding:30px;
    position:relative;
}

.left {float:left;}

.right {float:right;}

p {
    color:#000;
    font-size:14px;
    margin-bottom: 12px;
}

a{
    text-decoration:none;
    color: #000
}

h2, h2 a { font-size: 20px;
color: #000;
line-height: 30px;
}

h2 a:hover, a:hover {
 color:#F3625F;
}

.container{
    position:relative;
    overflow:hidden;
    width: 300px;
    max-height: 100%;
}

.sig {
    display: block;
    width: 98%;
    height: 98%;
    background: url(http://www.glennleader.co.uk/wp-content/uploads/2014/05/signature.png) bottom right no-repeat ;
    top: 0;
    left: 0;
    position:absolute;
    overflow: hidden;
}

.resize {
    width: 95%;
    height: 100%;
    position: absolute;
    display: block;
    overflow: hidden;
    padding: 0 2.5%;
    top: 0;
    left: 0;
    -webkit-transition: all .2s ease-out;
     -moz-transition: all .2s ease-out;
     transition: all .2s ease-out;
     opacity: 0;
}

   .resize:hover {
    opacity: 1;
}

.clickhere {
    position: absolute;
    display: block;
    overflow: hidden;
    width: 300px;
    height: 20px;
    padding: 15px 0;
    text-align: center;
    bottom: 0;
    left: 0;
    background: #000;
    opacity: 0;
    -webkit-transition: all .3s ease-in;
     -moz-transition: all .3s ease-in;
     transition: all .3s ease-in;
     animation-delay:2s;
    -webkit-animation-delay:2s;
    -moz-animation-delay:2s;

}
.clickhere:hover a {
    display: block;
    color: #fff;
    font-weight: 800;
}

.clickhere:hover {
    opacity: 0.5;
    cursor: pointer;
}

.clickhere a:hover {
 color:#F3625F
}

.url textarea {
width: 100%;
border: 0 none transparent;
margin: 0;
padding: 0;
outline: 0;
resize: none;
overflow: hidden;
font-family: inherit;
background: 0;
text-align: center;
font-size: 12px;
height: 16px;
-webkit-appearance: textarea;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
flex-direction: column;
cursor: auto;
white-space: pre-wrap;
word-wrap: break-word;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
-webkit-writing-mode: horizontal-tb;
background: transparent;
}

.innercontent {
 display: block;
  height: 100%;
  text-align: center;
  width:100%;
  background:rgba(255,255,255,0.7);
   position:absolute;
}
.css3-2:hover .resize {

}

.css3-2 {
 bottom:-370px;left:0;
 -webkit-transition: all .5s ease-out;
 -moz-transition: all .5s ease-out;
 -o-transition: all .5s ease-out;
 transition: all .5s ease-out;
}

.innercontent a.css3-2{
 -webkit-transition: all .5s ease-out;
 -moz-transition: all .5s ease-out;
 -o-transition: all .5s ease-out;
 transition: all .5s ease-out;
}

.container:hover .css3-2 {
 bottom:4px;
 cursor: pointer;
}

小提琴：

http://jsfiddle.net/Veriix/euXGZ/

html

css

animation

回答 1

Stack Overflow用户

发布于 2014-05-30 01:55:20

第一个问题很容易解决……您需要将：：hover-伪类添加到父元素中，以便正确地更改样式。

.css3-2:hover .clickhere a, .clickhere:hover a {
display: block;
color: #fff;
    font-weight: 800;
}

.css3-2:hover .clickhere, .clickhere:hover {
    opacity: 0.5;
    cursor: pointer;
}

 .css3-2 .clickhere a:hover, .clickhere a:hover {
 color:#F3625F

}

小提琴更新：

(我没有做任何动画更改，只是更新了悬停时显示链接的问题)

编辑:如果你不想让可点击的元素滑进来，给它一个绝对的位置，也许可以添加一些不同的动画(包括延迟，如果你想让它等到幻灯片滑入完成！)

animation-delay:2s;
-webkit-animation-delay:2s; /* Safari and Chrome */

https://www.facebook.com/j.beargraphics

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23939470

复制

相似问题

问CSS3动画，不完全正确
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS3动画，不完全正确EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS3动画，不完全正确
EN