文章目录

• 一 CSS3动画
• • 1 2D动画
  • • 案例1-鼠标输入移入DIV 让图片旋转90度
    • 案例2-鼠标输入移入DIV 缩放图片
    • 案例3-贯穿项目-DIV移动
  • 2 animation动画
  • • 播放器
    • 案例1-基础案例
    • 案例2-使用百分比关键帧定义动画
    • 案例3-旋转的图片
    • 案例4-贯穿案例-轮播图
  • 3 多余文本省略号...代替
  • • 案例1-多余文本...代替
  • 4 雪碧图技术(了解)

一 CSS3动画

1 2D动画

• css3提供了transiform属性来对图形在2D上进行一系列的 旋转、缩放、位移等

• 一般搭配hover以及transition来使用

rotate 旋转 
scale  缩放 
translate 位移 
skew	倾斜
选择器 {transiform: rotate(10deg) scale(2) translate(100px,0) }旋转10度	体积放大2倍	往右移动100像素

案例1-鼠标输入移入DIV 让图片旋转90度

案例2-鼠标输入移入DIV 缩放图片

案例3-贯穿项目-DIV移动

2 animation动画

动画的实现步骤：

1. 关键帧(动作)

   • css3提供了（@keyframes来定义关键帧）

     • 例子：蹲下(两个关键帧)——开始蹲下——》结束蹲下

2. animation播放器属性通过控制关键帧来播放动画

播放器

案例1-基础案例

案例2-使用百分比关键帧定义动画

案例3-旋转的图片

案例4-贯穿案例-轮播图

3 多余文本省略号…代替

在页面中经常会遇到文字太多，放不下需要用省略号来实现。

案例1-多余文本…代替

落霞与孤鹜齐飞,秋水共长天一色

4 雪碧图技术(了解)

CSS sprites 雪碧图技术(精灵图技术)

将多张小图片有序的组合在一起，形成一张图片。减少网络请求次数，只需要加载一次就能加很多的小图片

https://static.ws.126.net/163/f2e/www/index20170701/images/sprite_img20211126.png