css3制作旋转遮罩动画

时间:2024-10-16 09:41:51

1、先写出html代码。注意一定要用“背景div”套住“遮罩div“,因为后面使用hover方法时,会避免一些不必要的麻烦。

css3制作旋转遮罩动画

2、为两个div设置css样式。尽量将两个div设置为一样的大小,其他的都是一些基本的属性。

css3制作旋转遮罩动画

3、运行,查看效果。可以看到,内层div的层级比较高,所以完全遮住了外层div,这就形成了一个遮罩的效果。

css3制作旋转遮罩动画

4、为遮罩div设置旋转参数和动画参数。

css3制作旋转遮罩动画

5、运行,查看效果。可以利用谷歌Chrome的开发者工具进行调试,把最终调试的参数记住,回到Hbuilder里进行修改。

css3制作旋转遮罩动画

6、为遮罩div设置动画效果。#a : hvoer #b 此用法应当注意的是,只有【#b】是【#a】的子元素时,才起效果。

css3制作旋转遮罩动画

7、运行,查看动画效果。

css3制作旋转遮罩动画
css3制作旋转遮罩动画
css3制作旋转遮罩动画
css3制作旋转遮罩动画

8、最后为背景div设置overflow参数。

css3制作旋转遮罩动画

9、运行,查看最终效果。

css3制作旋转遮罩动画
css3制作旋转遮罩动画
css3制作旋转遮罩动画
css3制作旋转遮罩动画
© 手抄报圈