如何对手机网页底部悬浮广告代码做翻转效果，这样做就好了

最新推荐文章于 2022-05-30 20:36:52 发布

XYCMS

最新推荐文章于 2022-05-30 20:36:52 发布

阅读量1.6k

点赞数

分类专栏： ASP 电子商务 PHP 网站运营

本文链接：https://blog.csdn.net/yang3rui/article/details/89678653

版权

网站运营同时被 3 个专栏收录

57 篇文章 0 订阅

订阅专栏

ASP

50 篇文章 0 订阅

订阅专栏

PHP

41 篇文章 0 订阅

订阅专栏

如何对手机网页底部悬浮广告代码做翻转效果，这样做就好了

首先你要有悬浮层，然后给予CSS赋样式，样式如下：

//作者：xycms
//update:20190442
//QQ:364500483
var keyFrames = '@keyframes myfirst{0% {transform: rotateY(0deg);} 30% {transform: rotateY(360deg);} 100% {transform: rotateY(360deg);}@-moz-keyframes myfirst{0% {transform: rotateY(0deg);} 30% {transform: rotateY(360deg);} 100% {transform: rotateY(360deg);}@-webkit-keyframes myfirst{0% {transform: rotateY(0deg);} 30% {transform: rotateY(360deg);} 100% {transform: rotateY(360deg);}@-o-keyframes myfirst{0% {transform: rotateY(0deg);} 30% {transform: rotateY(360deg);} 100% {transform: rotateY(360deg);}}';
var keyFramesStyle = document.createElement('style');
keyFramesStyle.type = 'text/css';
if (keyFramesStyle.styleSheet){
	keyFramesStyle.styleSheet.cssText = keyFrames;
}else{
	keyFramesStyle.appendChild(document.createTextNode(keyFrames));
}
document.getElementsByTagName('head')[0].appendChild(keyFramesStyle);

以上为JavaScript给网页加样式代码；

这样您的悬浮广告就会出现左右翻转效果了，是不是很简单呢？