当前位置: 代码迷 >> 综合 >> banner 动画特效 逐渐拉近变大 css
  详细解决方案

banner 动画特效 逐渐拉近变大 css

热度:59   发布时间:2024-02-08 22:10:41.0

banner 慢慢变大
案例1:https://www.cmseasy.cn/demo/business-template/v451/qi-ta/

案例2

<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="renderer" content="webkit"><meta name="format-detection" content="telephone=no"><link rel="canonical" href="https://www.yideamobile.com/"><meta name="robots" content="index,follow"><title>管理系统 | 企业必备的管理软件</title><style>.carousel-inner > .item {-webkit-transform: translate3d(0, 0, 0) !important;transform: translate3d(0, 0, 0) !important;-webkit-transition: all .6s linear .2s;transition: all .6s linear .2s;-webkit-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;transform-origin: 50% 50%;overflow: hidden;}.carousel-inner > .item .banner-home,.carousel-inner > .item .carousel-caption {opacity: 0;}.carousel-inner > .item.active .carousel-caption {-webkit-animation: slide-text-fade 1s both 0s;animation: slide-text-fade 1s both 0s;}.carousel-inner > .item.active .banner-home {-webkit-animation: slide-fade 10s infinite 0s;animation: slide-fade 10s infinite 0s}@-webkit-keyframes slide-text-fade {0% {opacity: 0}100% {opacity: 1}}@keyframes slide-text-fade {0% {opacity: 0}100% {opacity: 1}}@-webkit-keyframes slide-fade {0% {opacity: .9}100% {opacity: 1;-webkit-transform: scale(1.1) translateY(-4%) rotateZ(1deg);transform: scale(1.1) translateY(-4%) rotateZ(1deg)}}@keyframes slide-fade {0% {opacity: .9}100% {opacity: 1;-webkit-transform: scale(1.1) translateY(-4%) rotateZ(1deg);transform: scale(1.1) translateY(-4%) rotateZ(1deg)}}.carousel-inner > .next,.carousel-inner > .prev,.carousel-inner > .active.left,.carousel-inner > .active.right {left: 0;}.banner-home {height: 640px;}.banner-home-1 {background-image: url(https://www.***.com/Images/slide_1.jpg);background-position: bottom center;}.banner-home-2 {background-image: url(https://www.***.com/Images/slide_2.jpg);background-position: bottom center;}</style>
</head>
<body><div class="carousel-inner"><div class="item active"><div class="banner-home banner-home-1"></div></div><div class="item"><div class="banner-home banner-home-2"></div></div></div>
</body>
</html>