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

缓缓-

已于 2022-05-29 19:34:10 修改

阅读量207

点赞数

分类专栏：项目实训文章标签： css javascript html

于 2022-05-29 17:58:46 首次发布

本文链接：https://blog.csdn.net/m0_46268374/article/details/125033008

版权

本文介绍了如何使用CSS3实现div倾斜效果以及元素的平滑变换。通过引入vanilla-tilt.min.js库，可以实现div随着鼠标移动的倾斜效果。此外，详细讲解了transition属性，包括持续时间、时间函数和延迟时间，用于创建元素属性值的平滑过渡。同时，文章还探讨了transform元素变换，如scale、rotate、translate和skew，展示了如何实现图标旋转和缩放的效果。

摘要由CSDN通过智能技术生成

一、div倾斜样式

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

<script src="static/js/vanilla-tilt.min.js"></script>

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

<div class="col-lg-4 col-md-6" data-tilt>
          <div class="feature-content feature-content-1">
            <div class="feature-icon">
              <i class="el-icon-search"></i>
            </div>
            <div class="feature-discription">
              <h3>语料检索</h3>
              <p>根据用户输入的中医关键字查找匹配的多版本英译，支持模糊查询、范围查询。通过关键词还可检索上下文。</p>
            </div>
          </div>

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