0

嗨朋友们有谁知道如何在 Html 页面中使用 Css 三次贝塞尔曲线

我在这里
尝试了缓入效果，但它不起作用。帮助我在页面加载时为 div 提供缓入效果。
这是我的CSS代码：

.container{width:100%;}
.Innerdiv{width:50%;-webkit-transition: all 1s cubic-bezier(.42, 0, 1, 1); 
-moz-transition: all 1s cubic-bezier(.42, 0, 1, 1); padding:30px;}

html在这里

<div class="container">
        <div class="Innerdiv">
            <h1>
                What is Lorem Ipsum?
            </h1>
            <p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.  
            </p>
        </div>
</div>
4

2 回答 2

1

这里是简单的例子

div {
    width: 100px;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

div:hover {
    width: 300px;
}

最初您提到了到特定类或 id 的转换，然后您可以在需要时设置转换，就像您想要的:hover :active一样

过渡属性是四个过渡属性的简写属性：

  1. 过渡属性
  2. 过渡期
  3. 过渡定时功能
  4. 转换延迟

欲了解更多信息，请访问这里

我在这里更新您的代码：DEMO

于 2013-06-04T11:15:45.820 回答
1

如果您希望在加载时发生过渡，我怀疑您需要使用动画而不是过渡。例如，如果你希望内部 div 从 100% 缩小到 50%，而 padding 从 0 扩展到 30px，你可以像这样使用 css：

.container{
  width:100%;
}
.Innerdiv {
  animation:shrinkInner 1s;
  width:50%;
  padding:30px;
}

@keyframes shrinkInner {
  0% {
    width:100%;
    padding:0px;
  }
  100% {
    width:50%;
    padding:30px;
  }
}

这只是没有前缀的标准 CSS - 要支持 webkit，您需要在必要时添加 webkit 前缀。

包含前缀的小提琴示例

于 2013-06-04T11:51:50.650 回答