0

次のコードがあります: html: 

<html>
<head>
  <link rel="stylesheet" type="text/css" href="StyleSheet.css">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>What</title>
    <style type="text/css">
    </style>

</head>
<body dir="rtl">
    <div id="page">
        <div id="bothcontainer">
            <div id="littlebox1" class="littlebox1sentence">put your mouse here</div>
            <div id="littlebox1" class="triangle">
                <div class="triangleborder"></div>
            </div>
        </div>
        <div id="box1">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
        </div>
    </div>


</body>
</html>

そしてCSS3：

#page {
    width: 900px;
    padding: 0px;
    margin: 0 auto;
    direction: rtl;
    position: relative;
}

#box1 {
    position: relative;
    width: 500px;
    border: 1px solid black;
    box-shadow: -3px 8px 34px #808080;
    border-radius: 20px;
    box-shadow: -8px 5px 5px #888888;
    right: 300px;
    top: 250px;
    text-align: justify;
    -webkit-transition: all 1s;
    font-size: large;
    color: Black;
    padding: 10px;
    background: #D0D0D0;
    opacity: 0;
}


@-webkit-keyframes myFirst {
    0% {
        right: 300px;
        top: 160px;
        background: #D0D0D0;
        opacity: 0;
    }

    100% {
        background: #909090;
        right: 300px;
        top: 200px;
        opacity: 1;
    }
}

#littlebox1 {
    top: 200px;
    position: absolute;
    display: inline-block;
}

.littlebox1sentence {
    font-size: large;
    padding-bottom: 15px;
    padding-top: 15px;
    padding-left: 25px;
    padding-right: 10px;
    background: #D0D0D0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    -webkit-transition: background .25s ease-in-out;
    border-bottom: 2px solid red;
    border-right: 2px solid red;
    border-top: 2px solid red;
    -webkit-transition-property:color, background; 
-webkit-transition-duration: .25s, .25s; 
-webkit-transition-timing-function: linear, ease-in;


}

#bothcontainer:hover ~ #box1 {
    -webkit-transition: all 0s;
    background: #909090;
    right: 300px;
    top: 200px;
    -webkit-animation: myFirst .75s;
    -webkit-animation-fill-mode: initial;
    opacity: 1;
}

#bothcontainer:hover .littlebox1sentence {
    background: #909090;
    color:#D0D0D0
}

#bothcontainer:hover .triangle {
    border-right: 20px solid #909090;
}

.triangle {
    position: relative;
    width: 0;
    height: 0;
    border-right: 20px solid #D0D0D0;
    border-top: 26px solid transparent;
    border-bottom: 25px solid transparent;
    right: 186px;
    -webkit-transition: border-right .25s ease-in-out;
    margin-top: 2px;

}

.triangleborder {
    position: absolute;
    width: 0;
    height: 0;
    border-right: 22px solid red;
    border-top: 28.5px solid transparent;
    border-bottom: 27.5px solid transparent;
    right: -20px;
    -webkit-transition: border-right .25s ease-in-out;
    top: -28px;
    z-index: -15656567650;

}

ここのライブ例: http://jsfiddle.net/VhGBv/

ご覧のとおり、灰色のボックスにマウスを置くと、背景とフォントの色が同時に変化しません。私の疑問は次のとおりです。マウスを灰色のセンテンスに置くと、矢印と灰色のボックスの色が同時に(一緒に) 変化するように、アニメーションのタイミングをどのように調整できますか?

4

1 に答える 1

2

ここで修正: http://jsfiddle.net/VhGBv/1/

この行を変更しました：

.littlebox1sentence {
    ...
    -webkit-transition-timing-function: linear, ease-in-out;
}
于 2012-12-05T18:51:30.113 に答える