关于css动画幕家具的按钮，做不出，老师帮忙看一下怎么写
来源：5-3 【复习速查】本周知识清单
慕瓜0126554
2021-01-07 04:54:51
问题描
<div class="col">
<h2>关于我们</h2>
<h3>慕家居装饰材料有限公司</h3>
<hr>
<p>慕家居家居装修网北欧风格家
具图片专区,是国内海量全面的
高质量北欧风格家具图片库…
</p>
<a href="">了解更多</a>
</div>
#aboutus>div:nth-child(3)>a:hover{
animation: yh 1s linear 0s;
}
@keyframes yh{
0%{
transform-origin: 100% -100%;
transform: rotateZ(30deg);
}
25%{
transform-origin: 100% -100%;
transform:rotateZ(-30deg);
}
75%{
transform-origin: 0 -100%;
transform:rotateZ(30deg);
}
100%{
transform-origin: 0 -100%;
transform:rotateZ(-30deg);
}
}
写回答
1回答
-
好帮手慕张
2021-01-07
同学你好，问题解答如下：
1、建议同学检查选择器是否能正确选到目标元素。div:nth-child(3)这个选择器，选中的是属于父元素的第三个子元素，并且该元素是div。所以 #aboutus>div:nth-child(3)>a:hover能够选择如下结构中的a标签：
由于同学没有粘贴完整的代码，所以老师无法判断同学的选择器是否书写正确，同学可以自查一下。
以同学提供的代码为例，a元素为父元素div里的第五个元素，所以要（可以）使用a:nth-child(5)选中a标签。
2、另外，transform属性，对内联元素没有效果（一种现象，记住即可），所以需要将a转成block或者inline-block。
综上，调整如下：
3、建议这里的关键帧动画，不要设置基点位置，这样效果会美观一些。
4、另外关键帧动画可以优化一下，动画的起点和终点在同一位置会更美观。并且动画可以无限次数执行，如下：
祝学习愉快！
0
相似问题