芝麻web文件管理V1.00
编辑当前文件:/home/digitalh/tricomgroupbd.com/assets/sass/component/_vidz.scss
/*------------------------------------------------------- 16. Vidz css ---------------------------------------------------------*/ .mfp-hide { display: none; } #vidz { display: flex; align-items: center; justify-content: center; iframe { width: 853px; height: 480px; } } .mfp-close-btn-in .mfp-close { color: #fff!important; } //Play Button //HTML //<div class="pl"> //<a href="#" class="item popup-youtube play-bt"> //<i> //<img src="assets/img/icons/play-button-1.png" alt="Itsol"> //</i> //</a> //</div> .pl { .play-bt { width: 9rem; height: 9rem; text-align: center; -webkit-border-radius: 50%; border-radius: 50%; position: relative; z-index: 1; display: inline-block; background-color: var(--clr-white); line-height: 115px; padding-left: 5px; i { color: var(--clr-def); font-size: 4rem; } &:hover { color: var(--clr-white); } .wave-3, &::before, &::after { content: ''; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%; pointer-events: none; -webkit-animation: waves 3s ease-in-out infinite; animation: waves 3s ease-in-out infinite; z-index: -1; background: var(--clr-white); height: 15rem; width: 15rem; } &::before { -webkit-animation-delay: 0s; animation-delay: 0s; } &::after { -webkit-animation-delay: 1s; animation-delay: 1s; } .wave-3 { -webkit-animation-delay: 2s; animation-delay: 2s; } } } @keyframes waves { 0% { -webkit-transform: translate(-50%,-50%) scale(0.2, 0.2) ; transform: translate(-50%,-50%) scale(0.2, 0.2); opacity: 0; } 50% { opacity: 0.9; } 100% { -webkit-transform: translate(-50%,-50%) scale(0.9, 0.9); transform: translate(-50%,-50%) scale(0.9, 0.9); opacity: 0; } } @-webkit-keyframes button_wave{ 0% { transform: translate(-50%,-50%) scale(0.5); } 50% { transform: translate(-50%,-50%) scale(1.2); } 100% { transform: translate(-50%,-50%) scale(0.5); } }
