个人中心
gpt4 book ai didi

html - CSS3 动画，不太正确

转载 作者：太空宇宙 更新时间：2023-11-03 18:09:45 25 4
gpt4 key购买 nike

您可以看到我尝试做的事情。但是我希望在右侧弹出并淡入之后出现每个图像翻转的底部。不仅仅是当鼠标悬停在每个图像的底部时。

我也无法在不遮盖/停止单个链接的情况下使整个内容可点击到博客文章，并且短代码选择不可行。

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

有人看到我哪里出错了吗？我在底部有一个 fiddle 。理想情况下，我希望它全部在悬停时播放，但显然会延迟底部的黑框。我离得太近了，这很烦人。

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;
}

fiddle :

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

最佳答案

第一个问题很容易解决...您需要将::hover-pseudo 类添加到父元素以正确更改样式。

.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

}

更新的 fiddle : http://jsfiddle.net/euXGZ/5/

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

编辑:如果您不希望可点击元素滑入，请给它一个绝对定位，并可能添加一些不同的动画(如果您希望它等到滑入完成，则包括延迟!)

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

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

关于html - CSS3 动画，不太正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23939470/

25 4 0
文章推荐： html - 固定侧边栏但响应式布局
文章推荐： c# - 在aspx.cs(在后面的代码)asp.net中创建RequiredFieldValidator
文章推荐： c# - 访问和更改结构作为属性与作为字段
文章推荐： ruby - 如果在 `x` 秒内没有用户输入则超时
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com