项目实训（三）CSS样式与动画

目录

一、div倾斜样式

二、css3元素变换、渐变样式

1、transition属性渐变

2、transform元素变换

---

一、div倾斜样式

通过查找资料，发现可以给div设置随着鼠标移动倾斜的样式，美化页面。

导入vanilla-tilt.min.js，提供了这个方法，在元素后面添加 data-tilt即可。

          

            

              
            
            

              
语料检索
              
根据用户输入的中医关键字查找匹配的多版本英译，支持模糊查询、范围查询。通过关键词还可检索上下文。
            
          

在首页中使用，效果如下：

二、css3元素变换、渐变样式

1、transition属性渐变

css的transition允许css的属性值在一定的时间区间内平滑地过渡。

-webkit-transition：CSS属性(none|all|属性) 持续时间 时间函数 延迟时间
包括这四个参数：

CSS属性(transition-property)
要变化的属性，比如元素变宽则是width，文字颜色要变色这是color；W3C给出了一个可变换属性的列表：除了以上属性外，还有css3中大放异彩的css3变形，比如放大缩小，旋转斜切，渐变等。该取值还有个强大的“all”取值，表示上表所有属性；

持续时间(transition-duration)
动画执行的时间，以秒为单位，比如0.1秒可以写成”0.1s”或者”.1s”，注意后面有个“s”单位。

时间函数(transition-timing-function)：
ease：逐渐慢下来
linear：线性过度
ease-in：由慢到快
ease-out：由快到慢
ease-in-out：由慢到快在到慢
cubic-bezier：特定的cubic-bezier曲线,所有值需在[0, 1]区域内，否则无效。

延迟时间(transition-delay)
在动作和变换开始之间等待多久，通常用秒来表示(比如, .1s)。如果你不想延迟，该值可省略。

尝试在自己的组件中使用：

.feature-content .feature-icon i {
  font-size: 34px;
  color: #232323;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

让icon的变换在0.5s内，由慢到快再到慢。

2、transform元素变换

类型包括scale（缩放）、rotate（旋转）、translate（平移）、skew（倾斜变形）等

使用：

.feature-content:hover .feature-icon i {
  -webkit-transform: rotate(360deg) scale(1.2);
          transform: rotate(360deg) scale(1.2);
}

让图标旋转360度，放大1.2倍

实现效果：

 可旋转，有渐变效果。