H5C3动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
1 渐变
 
        /* 渐变:不同颜色之间的柔和过渡
            线性渐变:沿着某条直线发生渐变效果
            注意:渐变准备来说是一张背景图
            语法:linear-gradient
         */
 background-image: linear-gradient(0deg,red,green,blue,yellow,pink);
参数一 是渐变的角度
  
2 背景图片
  background: #fff url(images/1.jpg) 0 0 no-repeat;
            取值:
                像素
                百分比 参照的是当前的盒子大小
                contain 保证等比例缩放 但是会有留白问题
                cover 保证等比例缩放 但是会有多余的溢出
            */
            /* background-size: cover; */
            /* background-size: contain; */
            /* background-size: 100% 100%; */
  
                background-clip 控制背景图片的显示区域
                border-box : padding + border + content;
                padding-box : padding + content;
                content-box: content;
  
            /* 设置背景图片从什么地方开始显示
                取值:
                padding-box 从padding的区域开始平铺
                border-box 从border的区域开始平铺
                content-box 从内容的区域开始平铺
             */
            background-clip:content-box;
  
3 过度
 transition:
                过渡的属性: 什么属性需要过渡就写什么属性 特殊值 all;           
                过渡的动画效果是由浏览器完成的 效率比JQ的定时器要高的多
                在手机端的动画都推荐使用css3
     结合hover使用
  
4 2D转换  (结合hover和过度时间transition使用效果更好)
  
/* scale
                控制元素的缩放 缩放没有单位 直接写数值即可       transform: scale(1.3);
     结合hover使用
                scaleX 水平缩放
                scaleY 水平缩放
                scale 整体缩放
  
  rotate  /* 旋转:单位是deg 正值 顺时针 负值 逆时针 */      
            transform: rotate(-45deg);
   transform-origin: -200px -200px; 旋转点
 
  translate 元素的移动
            translateX  X轴移动
            translateY  Y轴移动
            translate(x,y)   三角形的第三条边移动
            取值可以是像素 也可以是百分比 百分比参照的是这个盒子本身的宽高
            transform: translate(100px, 100px);<br><br>5 3D转换 6 自定义无限循环动画 上面说的都是结合hover的一次性动画,如何使动画持续呢?H5C3中有一个自定义动画 如何使用呢? 首先要自定义一个动画 让它如何动,如下是一个简单的自定义动画,可以做的更复杂,这里就不做了。 @keyframes imgMove { from { transform: translateX(0px); } to { transform: translateX(882px); } } 其次需要在需要这个动画的盒子家加上这个动画,用animation属性 imgMove 为动画的名称,5s为一个动画执行的时间,linear运动的方式,infinite为永久性动画。 .box { height: 300px; width: 300px; border: 1px solid #ccc; transition: all 2s; animation: imgMove 5s linear infinite }   

  

posted on   田庚的博客园  阅读(1200)  评论(1编辑  收藏  举报

编辑推荐:
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
阅读排行:
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· 语音处理 开源项目 EchoSharp
· 《HelloGitHub》第 106 期
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 使用 Dify + LLM 构建精确任务处理应用
< 2025年1月 >
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8

导航

统计

点击右上角即可分享
微信分享提示