CSS做一个翻书动画

酷码66

于 2023-03-25 09:34:25 发布

阅读量445

点赞数

分类专栏： css 文章标签： css3 前端 css

本文链接：https://blog.youkuaiyun.com/qq_61919625/article/details/129762800

版权

本文介绍了如何利用CSS3的transition属性制作翻书动画。transition属性用于定义元素在不同状态间切换时的过渡效果，包括transition-property、transition-duration、transition-timing-function和transition-delay。transition-delay属性设置过渡开始前的等待时间，可以以秒或毫秒为单位，正数值会延迟过渡，负数值则使过渡立即开始。示例中展示了如何通过鼠标悬停改变div元素的宽度，实现平滑过渡效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是transition？

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。

css属性值更改后，浏览器会立即更新相应的样式。

transition-property
transition-duration
transition-timing-function
transition-delay

语法：

transition: property duration timing-function delay;

  <!-- 
    transition 过渡
    transform 转换
    移动 translate
    缩放 scale
    旋转 rotate
    倾斜 skew
    3d 书
    3. 关键帧动画@keyframes
    animation

  -->
  <div class="box">
    <div class="item"></div>
    <p>文字</p>
  </div>

    * {
      margin: 0;
    }
    .box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 200px;
      height: 350px;
      perspective: 500px;
    }
    .item {
      width: 200px;