CSS动画
哈哈, 又到了分享知识的时间了, 也算是对自己所学知识的一个总结吧, 在这里写下的都是自己经过一点点的努力所积累下来的, 写的不好的地方还望大家多多包涵了, 加油!
这些天我学习了下css虽然学的并不是很多, 但是感觉还是挺有意思的, 一些东西之前都没有见过, 不过话又说回来了, 这门语言对于我来说也是一种新知识啦, 还有很长的时间要努力呢, 我会继续努力, 一直坚持下去的, 嘿嘿!
一.CSS动画之过渡
通过使用CSS3, 我们可以给我们特定的元素增加几种特定的效果, 可以让我们的作品更加的酷炫, 首先那他是有一种样式转变为另一种样式的, 他其中包含了几种属性, 分别是下面几种:transition设置四个过渡属性, transition-property多读名称, transition-duration过渡效果花费的时间, transition-timing-function过渡效果的时间曲线, transition-delay过渡效果开始的时间(也就是说延迟开始的时间), 下面给大家附上代码和效果展示, 敬请期待哦, 哈哈!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过渡动画</title> <link rel="stylesheet" type="text/css" href="2d3d转换.css"> </head> <body> <div>过渡动画演示</div> </body> </html>
下面是css中的代码:
*{
margin: 0px;
}
div{
width: 200px;
height: 200px;
background-color: red;
color: white;
margin: 50px;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-moz-transition: width 2s, height 2s, transition 2s;
-ms-transition: width 2s, height 2s, transition 2s;
-o-transition: width 2s, height 2s, transition 2s;
transition: width 2s, height 2s, transform 2s;
}
div:hover{
width: 200px;
height: 200px;
background-color: black;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
*是通配符, 设置整体的, 可以囊括所有,
-webkit-transition: width 2s,height 2s, -webkit-transform 2s;是谷歌和Safari浏览器的
-moz-transition: width 2s, height 2s, transition 2s; 这个是ie支持的
-ms-transition: width 2s, height 2s, transition 2s;这个是火狐支持
-o-transition: width 2s, height 2s, transition 2s;这个是opear支持的
width 2s代表的是宽度变化持续两秒, 后面的一次类推. 这就是一个简单的过渡动画
同时还有一个属性我没有设置, 那就是transition-delay这个很简单可以直接设置, 不熟悉的友友们可以好好看看哈, 嘿嘿.
效果图如下:
以上就是个简单的css过渡动画了.
二.css动画
通过css也可以创建动画, 但是需要遵循@keyframes规则:
规定动画的时长和动画的名称.下面就为大家带来神奇的动画代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过渡动画</title> <link rel="stylesheet" type="text/css" href="2d3d转换.css"> </head> <body> <div>动画的创建</div> </body> </html>
css中的文件代码如下:
div{
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: anim 5s;
-webkit-animation:anim 5s;
}
@keyframes anim {
0%{
background-color: red;left: 0px;top: 0px;
}
25%{
background-color: blue;left: 200px;top: 0px;
}
50%{
background-color: purple;left: 200px;top: 200px;
}
75%{
background-color: pink;left: 0px;top: 200px;
}
100%{
background-color: red;left: 0px;top: 0px;
}
}
@-webkit-keyframes anim {
0%{
background-color: red;left: 0px;top: 0px;
}
25%{
background-color: blue;left: 200px;top: 0px;
}
50%{
background-color: purple;left: 200px;top: 200px;
}
75%{
background-color: pink;left: 0;top: 200px;
}
100%{
background-color: red;left: 0px;top: 0px;
}
}
@-webkit-keyframes anim 这个值得是浏览器支持, 所以如果要所有的都支持的话, 还要引入很多类似的东西. 效果图如下:
当然啦也可以设置无线循环的动画, 在这里就不提了, 留给大家一点小小的疑问吧, 对不知道的友友来说, 也是一种探索啦, 嘿嘿 好啦 今天就写到这里啦, 拜拜各位, 明天见! 一起努力哈, 加油加油!
