您现在的位置是：网站首页> 编程资料编程资料

CSS3实现跳动的动画效果_css3_CSS_网页制作_

2023-11-10 236人已围观

简介这篇文章给大家介绍了如何利用CSS3实现跳动的动画效果，实现后的效果很好，有需要的朋友们可以参考学习。

静态的效果图如下：

这个要运用的新知识如下：

复制代码

代码如下:

//css3新知识
display: flex;
justify-content: center;
align-items: center;
animation: shadow .5s linear infinite;
@keyframes shadow {
0%, 100% {transform: scaleX(1);}
50% {transform: scaleX(1.2);}
}

::after 需要加定位，宽度才好使

实例代码如下

复制代码

代码如下:

无标题文档

总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。

上一篇：DIV点击折叠实例代码_Div+CSS教程_CSS_网页制作_

下一篇：CSS设置文字图片垂直居中的方法总结_CSS教程_CSS_网页制作_

您现在的位置是：网站首页> 编程资料编程资料

CSS3实现跳动的动画效果_css3_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢