为了账号安全,请及时绑定邮箱和手机立即绑定

实现井字格,两个div怎样同步效果,求指导

<!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">


.one{

width: 300px;

height: 300px;

position: absolute;

top: 100px;

left: 100px;

border-left:solid 1px red;

border-right:solid 1px red;

transform: scale(1,1);

}


.two{

width: 350px;

height: 250px;

position: absolute;

top: 120px;

left:80px;

border-top :solid 1px red;

border-bottom:solid 1px red;

transform: scale(1,1);

}


.one:hover,.two:hover{

transform: scale(0,0);transition:all 0.4s ease-in 0s;transform-origin: center center;

}


</style>

</head>

<body>


<div class="one"></div>

<div class="two"></div>


</body>

</html>


正在回答

2 回答

在两个div外再包一层div

<div class='wrap'>

<div class="one"></div>

<div class="two"></div>

</div>

然后在父级元素使用hovor。
transition要用在变形的元素上,不是用在hover的时候,transition是一个状态,当某元素变形时进行的属性
比如.one类选择器的元素变形就用在这个选择器的css样式里
.one{transition:all 1s ease;}这是设置状态,当这个元素变形时促发,不变形不促发。
如果要同时促发变形要包裹一层div 其中css样式可以这样写
.wrap:hover div{ scale(0,0)}
这些问题很明显你基础不熟,建议在本站搜索10天精通css3课程



0 回复 有任何疑惑可以回复我~

谢谢帮助,会好好学习的,很感谢!

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
CSS3图片动态提示效果
  • 参与学习       53912    人
  • 解答问题       142    个

实用的CSS3图片动态提示效果,熟练掌握CSS动画的制作技法

进入课程

实现井字格,两个div怎样同步效果,求指导

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信