学了css3也有一段时间了,也可以做一些自己想做的东西,今天就做一颗跳到的心,首先当然要写写好html的样式如图一所示,在一个大的div里套三个小的div和一个p标签。
图一
接下来是css的样式如图二所示,首先要为最外层的div设置一个相对定位,宽高各300px,外边距上下200,左右自动,使其整体居中,再使这个div旋转45度,再给里面的三个小div设置绝对定位,红色背景宽高各200px,给其中两个div设置圆角50%,再给p标签设置宽300px,高30px,字体大小30px,文字居中,颜色为白色,绝对定位,right为0,bottom为85px,在旋转45度,
接下里就是做动画效果设置角度45度,放大倍速,这样就做出如图三所示的效果。
图二
图三
运用CSS3实现跳动的心效果
最新推荐文章于 2024-08-02 09:36:41 发布