经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTMLCSS » CSS » 查看文章
过度与动画
来源:cnblogs  作者:学一点也是好  时间:2018/9/28 16:34:34  对本文有异议

一、过度

从一个状态,以动画方式变成另一个状态的变化过程

1.过度属性

  1. 1.transition-duration 持续时间
  2. 2.transition-delay 延迟时间
  3. 3.transition-property 属性 表示可过度的样式属性(多个值,用逗号连接)
  4. transition-propertyall
  5. 4.transition-timing-functionlinear 过度曲线
  6. 整体设置
  7. transition:持续时间 延迟时间 运动曲线(默认ease) 过度属性(all)

2.注

  • 过度效果通过hover产生可以制成一个hover层,hover层包含需要变化的层
  • hover层的处理方式:与显示层同等区域大小
  • 可以将显示层的位置交于hover层处理

3.案例

鼠标移动到圆柱,圆柱发生变化

  1. .box{
  2. width: 300px;
  3. height: 300px;
  4. margin: 0 auto;
  5. border-bottom: 1px solid black;
  6. position: relative;
  7. }
  8. .line{
  9. width: 30px;
  10. height: 30px;
  11. background-color: orange;
  12. position: absolute;
  13. bottom: 5px;
  14. left: 120px;
  15. transition: .4s;
  16. }
  17. .line:hover{
  18. height: 200px;
  19. }
  20. .b{
  21. width: 30px;
  22. height: 10px;
  23. border-radius: 50%;
  24. background-color: #333;
  25. position: absolute;
  26. bottom: -5px;
  27. }
  28. .t{
  29. width: 30px;
  30. height: 10px;
  31. border-radius: 50%;
  32. background-color: #333;
  33. position: absolute;
  34. top: -5px;
  35. }
  1. <div class="box">
  2. <div class="line">
  3. <div class="t"></div>
  4. <div class="b"></div>
  5. </div>
  6. </div>

二、动画

1.动画属性

  1. 1. animation-name 属性 表示动画名(名字任意起)
  2. animation-name: <name>;
  3. 2. animation-duration 属性 表示动画持续时间
  4. animation-duration: <time>;
  5. 3. animation-delay 属性 表示动画延迟时间
  6. animation-delay: <time>;
  7. 4. animation-timing-function 属性 表示动画运动曲线
  8. animation-timing-function: linear | ease | ease-in-out | easa-in | ease-out | cubic-bezier();
  9. -- linear:匀速
  10. -- ease:慢快慢
  11. -- ease-in-out:慢快慢
  12. -- easa-in:慢快
  13. -- ease-out:快慢
  14. -- cubic-bezier():贝赛尔曲线函数
  15. 5. animation-play-state 属性 表示动画状态
  16. animation-play-state: running | paused
  17. -- running:运行
  18. -- paused:暂停
  19. 6. animation-fill-mode 属性 表示动画结束后的停留位置
  20. animation-fill-mode: forwards | backwards
  21. -- forwards:终点
  22. -- backwards:起点
  23. 7. animation-iteration-count 属性 表示动画次数
  24. animation-iteration-count: <count> | infinite
  25. -- <count>:固定次数
  26. -- infinite:无限次
  27. 8. animation-direction 属性 表示运动方向
  28. animation-direction: normal | alternate | alternate-reverse;
  29. -- normal:原起点为第一次运动的起点,且永远从起点向终点运动
  30. -- alternate:原起点为第一次运动的起点,且来回运动
  31. -- alternate-reverse:原终点变为第一次运动的起点,且来回运动
  32. 整体设置
  33. animation:动画名 时间 延迟 动画状态 次数 曲线

2.案例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>动画</title>
  6. <style type="text/css">
  7. .box{
  8. width: 200px;
  9. height: 200px;
  10. background-color: orange;
  11. }
  12. /*动画样式*/
  13. .box{
  14. /*绑定动画名*/
  15. animation-name: wasai;
  16. /*持续时间*/
  17. animation-duration: 1s;
  18. /*延迟时间*/
  19. /*animation-delay: 0.2s;*/
  20. /*动画结束停留位置:backwards起点,forwards终点*/
  21. /*animation-fill-mode: forwards;*/
  22. /*运动次数*/
  23. animation-iteration-count: 4;
  24. /*多次运动方向的规则*/
  25. /*alternate:来回*/
  26. /*alternate-reverse:终点开始来回*/
  27. /*animation-direction: alternate-reverse;*/
  28. /*动画状态 running*/
  29. /*animation-play-state: paused;*/
  30. /*整体设置*/
  31. animation: d 1s 2 linear alternate running;
  32. }
  33. .box:hover{
  34. animation-play-state: running;
  35. }
  36. /*动画体*/
  37. @keyframes d{
  38. 0%{}
  39. 100%{
  40. width: 400px;
  41. }
  42. }
  43. @keyframes second{
  44. 0%{}
  45. 100%{}
  46. }
  47. </style>
  48. </head>
  49. <body>
  50. <div class="box"></div>
  51. </body>
  52. </html>
 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号