我有以下代码: 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/
正如您所看到的,当我将鼠标放在灰色框上时,背景和字体颜色不会同时改变 。 我的问题是:我如何计时动画,所以当我把鼠标放在灰色上时箭头和灰色框会在同时改变它们的颜色(一起)?
答案 0 :(得分:2)
修正了这里:http://jsfiddle.net/VhGBv/1/
我更改了这一行:
.littlebox1sentence {
...
-webkit-transition-timing-function: linear, ease-in-out;
}