来自jquery animate()
所有动画属性都应该被动画化为单个数值,除非下面提到;大多数非数字属性无法使用基本的 jQuery 功能进行动画处理(例如,width
,height
, 或者left
可以动画但background-color
不能,除非使用jQuery.Color()插件)。除非另有说明,否则属性值被视为像素数。可以在适用的情况下指定单位em
和。%
更新(使用 css)
.authentication {
width: 100%;
}
body:hover .authentication{
height: 100%;
background-color: #4BC5DA;
-webkit-transition: background-color 3s ease, height 3s ease;
-moz-transition: background-color 3s ease, height 3s ease;
-o-transition: background-color 3s ease, height 3s ease;
-ms-transition: background-color 3s ease, height 3s ease;
transition: background-color 3s ease, height 3s ease;
}
body, html {
width: 100%;
height: 100%;
}
工作小提琴
上面的小提琴有一个缺点,即每当您将光标移出窗口并再次悬停时,它都会重复显示幻灯片效果。(您可以使用 javascript/jquery 设置)。
如果您想使用 jquery,请查看上面的 koala_dev 评论。