Html webkit转换在Chrome中不起作用
我是一个新的CSS动画。当我在一个块上悬停时,我正在它上做转换。但当我在上面盘旋时,什么也没发生Html webkit转换在Chrome中不起作用,html,css,Html,Css,我是一个新的CSS动画。当我在一个块上悬停时,我正在它上做转换。但当我在上面盘旋时,什么也没发生 <!--HTML--> <div class="pageTwo"> <div class="block-works"> <p class="work">We at Good Tree production watch movies at full time.Watching movies at 24 X 7 is our d
<!--HTML-->
<div class="pageTwo">
<div class="block-works">
<p class="work">We at Good Tree production watch movies at full time.Watching movies at 24 X 7 is our duties and reviewing them is our homework </p>
</div>
</div>
检查此代码,希望对您有所帮助
#HTML
<div class="pageTwo">
<div class="block-works">
<p class="work">We at Good Tree production watch movies at full time.Watching movies at 24 X 7 is our duties and reviewing them is our homework </p>
</div>
</div>
#CSS
.block-works{
position:relative;
background-color: black;
opacity: 0.8;
padding-right: auto;
display:block;
width:90%;
margin-top: 100px;
margin-bottom:100px;
margin-left: 5%;
margin-right: 5%;
border-radius: 7px;
height: 200px;
-webkit-transition: width 2s;
transition: width 2s
}
.block-works:hover{
width:100px;
transition-delay: 0.6s;
}
#HTML
我们在好树制作公司全职看电影。24 X 7看电影是我们的职责,复习电影是我们的家庭作业
#CSS
1.砌块工程{
位置:相对位置;
背景色:黑色;
不透明度:0.8;
右侧填充:自动;
显示:块;
宽度:90%;
边缘顶部:100px;
边缘底部:100px;
左缘:5%;
保证金权利:5%;
边界半径:7px;
高度:200px;
-webkit过渡:宽度2s;
过渡:宽度2s
}
.积木工程:悬停{
宽度:100px;
过渡延迟:0.6s;
}
我已经对css代码片段中我所做的更改进行了注释
.block工作{
位置:绝对位置;
背景色:黑色;
不透明度:0.8;
右侧填充:自动;
显示:块;
宽度:40%;/*初始宽度更改为显示动画*/
边缘顶部:100px;
边缘底部:100px;
左缘:5%;
保证金权利:5%;
边界半径:7px;
高度:200px;
过渡:宽度2s
}
.block works:悬停{/*类名称已更改*/
宽度:90%;
过渡延迟:0.6s;
}
JS-Bin
我们在好树制作公司全职看电影。24 X 7看电影是我们的职责,复习电影是我们的家庭作业
我相信您的.blockworks:hover
选择器实际上应该是用编写的。blockworks:hover
中间应该有一个破折号。
#HTML
<div class="pageTwo">
<div class="block-works">
<p class="work">We at Good Tree production watch movies at full time.Watching movies at 24 X 7 is our duties and reviewing them is our homework </p>
</div>
</div>
#CSS
.block-works{
position:relative;
background-color: black;
opacity: 0.8;
padding-right: auto;
display:block;
width:90%;
margin-top: 100px;
margin-bottom:100px;
margin-left: 5%;
margin-right: 5%;
border-radius: 7px;
height: 200px;
-webkit-transition: width 2s;
transition: width 2s
}
.block-works:hover{
width:100px;
transition-delay: 0.6s;
}