css动画效果代码免费（css3动画效果）

本篇文章给大家谈谈css动画效果代码免费，以及css3动画效果对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、如何利用CSS3动画实现弹跳效果
• 2、如何通过css样式来实现网站logo发光动画效果
• 3、如何用css实现网页的动态效果
• 4、css3 实现动画效果，怎样使他无限循环动下去？

如何利用CSS3动画实现弹跳效果

HTML代码

html xmlns=""

head

title用CSS3动画给一个小球创建跳跃的动画效果/title

link rel="stylesheet" type="text/css" href="index.css" /

/head

body

section class="main"

div id="ballWrapper"

div id="ball"/div

div id="ballShadow"/div

/div

/section

/body

/html

CSS代码（创建一个与html同目录的index.css文件）

#ballWrapper{position:fixed;top:35%;left:50%;z-index:100;margin-left:-70px;width:140px;height:300px;cursor:pointer;-webkit-transition:all 5s linear 0s;-moz-transition:all 5s linear 0s;transition:all 5s linear 0s;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);-ms-transform:scale(1)}

#ballWrapper:active{cursor:pointer;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0);-ms-transform:scale(0)}

#ball{position:absolute;top:0;z-index:11;width:140px;height:140px;border-radius:70px;background:#bbb;background:url(data:image/svg+xml; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(187,187,187,1)), color-stop(99%,rgba(119,119,119,1))); background: -webkit-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%); background: -o-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%); background: -ms-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%); background: linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%); box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), inset -2px -1px 40px rgba(0,0,0,0.4), 0 0 1px #000; cursor: pointer; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYmJiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzc3Nzc3NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);background:-moz-linear-gradient(top,rgba(187,187,187,1) 0,rgba(119,119,119,1) 99%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbbbb', endColorstr='#777777', GradientType=0 );-webkit-animation:jump 1s infinite;-moz-animation:jump 1s infinite;-o-animation:jump 1s infinite;-ms-animation:jump 1s infinite;animation:jump 1s infinite}

#ball::after{position:absolute;top:10px;left:30px;z-index:10;width:80px;height:40px;border-radius:40px/20px;background:url(data:image/svg+xml; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(1%,rgba(232,232,232,1)), color-stop(100%,rgba(255,255,255,0))); background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); background: linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); content: ""; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4ZThlOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjZThlOGU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);background:-moz-linear-gradient(top,rgba(232,232,232,1) 0,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#00ffffff', GradientType=0 )}

#ballShadow{position:absolute;bottom:0;left:50%;z-index:10;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0 0 20px 35px rgba(20,20,20,.1);-webkit-transform:scaleY(.3);-moz-transform:scaleY(.3);-o-transform:scaleY(.3);transform:scaleY(.3);-ms-transform:scaleY(.3);-webkit-animation:shrink 1s infinite;-moz-animation:shrink 1s infinite;-o-animation:shrink 1s infinite;-ms-animation:shrink 1s infinite;animation:shrink 1s infinite}

@-webkit-keyframes jump{0%{top:0;-webkit-animation-timing-function:ease-in}

50%{top:140px;height:140px;-webkit-animation-timing-function:ease-out}

55%{top:160px;height:120px;border-radius:70px/60px;-webkit-animation-timing-function:ease-in}

65%{top:120px;height:140px;border-radius:70px;-webkit-animation-timing-function:ease-out}

95%{top:0;-webkit-animation-timing-function:ease-in}

100%{top:0;-webkit-animation-timing-function:ease-in}

}

@-moz-keyframes jump{0%{top:0;-moz-animation-timing-function:ease-in}

50%{top:140px;height:140px;-moz-animation-timing-function:ease-out}

55%{top:160px;height:120px;border-radius:70px/60px;-moz-animation-timing-function:ease-in}

65%{top:120px;height:140px;border-radius:70px;-moz-animation-timing-function:ease-out}

95%{top:0;-moz-animation-timing-function:ease-in}

100%{top:0;-moz-animation-timing-function:ease-in}

}

@-o-keyframes jump{0%{top:0;-o-animation-timing-function:ease-in}

50%{top:140px;height:140px;-o-animation-timing-function:ease-out}

55%{top:160px;height:120px;border-radius:70px/60px;-o-animation-timing-function:ease-in}

65%{top:120px;height:140px;border-radius:70px;-o-animation-timing-function:ease-out}

95%{top:0;-o-animation-timing-function:ease-in}

100%{top:0;-o-animation-timing-function:ease-in}

}

@-ms-keyframes jump{0%{top:0;-ms-animation-timing-function:ease-in}

50%{top:140px;height:140px;-ms-animation-timing-function:ease-out}

55%{top:160px;height:120px;border-radius:70px/60px;-ms-animation-timing-function:ease-in}

65%{top:120px;height:140px;border-radius:70px;-ms-animation-timing-function:ease-out}

95%{top:0;-ms-animation-timing-function:ease-in}

100%{top:0;-ms-animation-timing-function:ease-in}

}

@keyframes jump{0%{top:0;animation-timing-function:ease-in}

50%{top:140px;height:140px;animation-timing-function:ease-out}

55%{top:160px;height:120px;border-radius:70px/60px;animation-timing-function:ease-in}

65%{top:120px;height:140px;border-radius:70px;animation-timing-function:ease-out}

95%{top:0;animation-timing-function:ease-in}

100%{top:0;animation-timing-function:ease-in}

}

@-webkit-keyframes shrink{0%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0 0 20px 35px rgba(20,20,20,.1);-webkit-animation-timing-function:ease-in}

50%{bottom:30px;margin-left:-10px;width:20px;height:5px;border-radius:20px;background:rgba(20,20,20,.3);box-shadow:0 0 20px 35px rgba(20,20,20,.3);-webkit-animation-timing-function:ease-out}

100%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0 0 20px 35px rgba(20,20,20,.1);-webkit-animation-timing-function:ease-in}

}

@-moz-keyframes shrink{0%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0 0 20px 35px rgba(20,20,20,.1);-moz-animation-timing-function:ease-in}

50%{bottom:30px;margin-left:-10px;width:20px;height:5px;border-radius:20px;background:rgba(20,20,20,.3);box-shadow:0 0 20px 35px rgba(20,20,20,.3);-moz-animation-timing-function:ease-out}

100%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0 0 20px 35px rgba(20,20,20,.1);-moz-animation-timing-function:ease-in}

}

@-o-keyframes shrink{0%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0 0 20px 35px rgba(20,20,20,.1);-o-animation-timing-function:ease-in}

50%{bottom:30px;margin-left:-10px;width:20px;height:5px;border-radius:20px;background:rgba(20,20,20,.3);box-shadow:0 0 20px 35px rgba(20,20,20,.3);-o-animation-timing-function:ease-out}

100%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0 0 20px 35px rgba(20,20,20,.1);-o-animation-timing-function:ease-in}

}

@-ms-keyframes shrink{0%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0 0 20px 35px rgba(20,20,20,.1);-ms-animation-timing-function:ease-in}

50%{bottom:30px;margin-left:-10px;width:20px;height:5px;border-radius:20px;background:rgba(20,20,20,.3);box-shadow:0 0 20px 35px rgba(20,20,20,.3);-ms-animation-timing-function:ease-out}

100%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0 0 20px 35px rgba(20,20,20,.1);-ms-animation-timing-function:ease-in}

}

@keyframes shrink{0%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0 0 20px 35px rgba(20,20,20,.1);animation-timing-function:ease-in}

50%{bottom:30px;margin-left:-10px;width:20px;height:5px;border-radius:20px;background:rgba(20,20,20,.3);box-shadow:0 0 20px 35px rgba(20,20,20,.3);animation-timing-function:ease-out}

100%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0 0 20px 35px rgba(20,20,20,.1);animation-timing-function:ease-in}

}

如何通过css样式来实现网站logo发光动画效果

添加修改CSS代码如下 ：

.logo-site,.logo-sites{position:relative;float:left;margin:18px 0 0 10px;width:220px;max-height:50px;overflow:hidden;transition-duration:.5s}

.logo-site img,.logo-sites img{width:220px;max-height:50px}@media screen and (max-width:480px){

.logo-site,.logo-sites{width:140px}}@media screen and (min-width:900px){

.logo-site:before{content:"";position:absolute;left:-665px;top:-460px;width:220px;height:15px;background-color:rgba(255,255,255,.5);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:searchLights 1s ease-in 1s infinite;-o-animation:searchLights 1s ease-in 1s infinite;animation:searchLights 1s ease-in 1s infinite}}@-webkit-keyframes searchLights{0%{left:-100px;top:0}to{left:120px;top:100px}}@-o-keyframes searchLights{0%{left:-100px;top:0}to{left:120px;top:100px}}@-moz-keyframes searchLights{0%{left:-100px;top:0}to{left:120px;top:100px}}@keyframes searchLights{0%{left:-100px;top:0}to{left:120px;top:100px}}

.site-title{font-size:24px;font-size:2.4rem;font-weight:700;padding:0 0 2px 0}

.site-name{display:none}@media screen and (min-width:900px){

.logo-site img,.logo-sites img{transition-duration:.8s}

操作流程

把css代码当中的logo-site改成你网站包围logo的css即可(f12键审核元素，即可找到你的logo的css元素)。找到你logo的css名称然后把上面的css代码修改成你的css名称，放入css代码当中即可(防止出错，记得备份!)

以上就是logo添加css扫光效果的方法，当然你也可以运用到其他的地方。

注意，有些模板CSS代码不相同，不能贸然的使用，可能会出现错误，新手不要尝试。

如何用css实现网页的动态效果

网页的动态效果你说的这里的动态效果是让一个画面或者文字动一下吧？因为在专业里边动态是与数据库连接的后台的技术。

css是层叠样式表，是不能够实现动态效果的。但是可以让某个画面动，比如：

一个文字点击的时候，变大的css代码为：

a{font-size:12px;}      /*这里文字默认大小是12像素*/

a:hover{font-size:14px;}      /*这里鼠标经过大小是14像素*/

上边这个简单的代码就实现鼠标经过a的时候，文字变大，离开又恢复。

希望能帮到你

css3 实现动画效果，怎样使他无限循环动下去？

一、实现CSS3无限循环动画代码示例。

代码如下：

CSS:

@-webkit-keyframes gogogo {

0%{

-webkit-transform: rotate(0deg);

border:5px solid red;

}

50%{

-webkit-transform: rotate(180deg);

background:black;

border:5px solid yellow;

}

100%{

-webkit-transform: rotate(360deg);

background:white;

border:5px solid red;

}

}

.loading{

border:5px solid black;

border-radius:40px;

width: 28px;

height: 188px;

-webkit-animation:gogogo 2s infinite linear ;

margin:100px;

}

扩展资料

实现动画无限循环所需要的CSS属性说明：

1、infinite

在animation后面加上infinite就可以无限循环，另外还可以做反向循环使用animation-direction

2、animation-name

规定需要绑定到选择器的 keyframe 名称。

3、animation-duration

规定完成动画所花费的时间，以秒或毫秒计。

4、animation-timing-function

规定动画的速度曲线。

5、animation-delay

规定在动画开始之前的延迟。

6、animation-iteration-count

规定动画应该播放的次数。

7、animation-direction

规定是否应该轮流反向播放动画。

css动画效果代码免费的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css3动画效果、css动画效果代码免费的信息别忘了在本站进行查找喔。