css3+js 旋转木马轮播特效

最新推荐文章于 2024-08-18 10:49:07 发布
最新推荐文章于 2024-08-18 10:49:07 发布
阅读量600 收藏 2
点赞数
分类专栏： 前端 文章标签： html js css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/muge1161105403/article/details/109006259
版权 
<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style>
			* {
		  margin: 0;
		  padding: 0;
		}
		.carousel {
		  height: 250px;
		  overflow: hidden;
		  display: flex;
		  background: #111;
		  perspective: 1000px;
		  transform-style: preserve-3d;
		}
		
		#drag-container, #spin-container {
		  position: relative;
		  display: flex;
		  margin: auto;
		  transform-style: preserve-3d;
		  transform: rotateX(-10deg);
		}
		#drag-container img {
		  transform-style: preserve-3d;
		  position: absolute;
		  left: 0;
		  top: 0;
		  width: 100%;
		  height: 80%;
		  /* line-height: 200px; */
		  /* font-size: 50px; */
		  font-size: 25px;
		  text-align: center;
		  box-shadow: 0 0 8px #fff;
		  -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);
		}
		
		#drag-container img:hover {
		  box-shadow: 0 0 15px #fffd;
		  -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0007);
		}
		
		 #drag-container p {
		  font-family: Serif;
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%,-50%);
		  color: #fff;
		  width: 120px;
		  font-size: 28px;
		  text-align: center;
	text-shadow:1px  1px 1px #ccc,0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #ff00de,0 0 70px #ff00de,0 0 80px #ff00de,0 0 100px #ff00de,0 0 150px #ff00de;
	transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-webkit-transform-style:preserve-3d;
	-ms-transform-style:preserve-3d;
	-o-transform-style:preserve-3d;
	animation:run  ease-in-out 9s infinite;
	-moz-animation:run  ease-in-out 9s infinite;
	-webkit-animation:run  ease-in-out 9s infinite;
	-ms-animation:run  ease-in-out 9s infinite;
	-o-animation:run  ease-in-out 9s infinite;
		}
		
		#ground {
/* 		  width: 100px;
		  height: 100px; */
		  position: absolute;
		  top: 100%;
		  left: 50%;
		  transform: translate(-50%,-50%) rotateX(90deg);
		  background: -webkit-radial-gradient(center center, farthest-side , #9993, transparent);
		  /* background-color: red; */
		}
		
		#music-container {
		  position: absolute;
		  top: 0;
		  left: 0;
		}
		
		
		@keyframes spin {
		  from{
		    transform: rotateY(0deg);
		  } to{
		    transform: rotateY(360deg);
		  }
		}
		@keyframes spinRevert {
		  from{
		    transform: rotateY(360deg);
		  } to{
		    transform: rotateY(0deg);
		  }
		}
		/* 选择 */
		@keyframes run {
			0% {
			transform:rotateX(-5deg) rotateY(0);
		}
		50% {
			transform:rotateX(0) rotateY(180deg);
			text-shadow:1px  1px 1px #ccc,0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #3EFF3E,0 0 70px #3EFFff,0 0 80px #3EFFff,0 0 100px #3EFFee,0 0 150px #3EFFee;
		}
		100% {
			transform:rotateX(5deg) rotateY(360deg);
		}
		}@-moz-keyframes run {
			0% {
			-moz-transform:rotateX(-5deg) rotateY(0);
		}
		50% {
			-moz-transform:rotateX(0) rotateY(180deg);
			text-shadow:1px  1px 1px #ccc,0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #3EFF3E,0 0 70px #3EFFff,0 0 80px #3EFFff,0 0 100px #3EFFee,0 0 150px #3EFFee;
		}
		100% {
			-moz-transform:rotateX(5deg) rotateY(360deg);
		}
		}@-webkit-keyframes run {
			0% {
			-webkit-transform:rotateX(-5deg) rotateY(0);
		}
		50% {
			-webkit-transform:rotateX(0) rotateY(180deg);
			text-shadow:1px  1px 1px #ccc,0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #3EFF3E,0 0 70px #3EFFff,0 0 80px #3EFFff,0 0 100px #3EFFee,0 0 150px #3EFFee;
		}
		100% {
			-webkit-transform:rotateX(5deg) rotateY(360deg);
		}
		}@-ms-keyframes run {
			0% {
			-ms-transform:rotateX(-5deg) rotateY(0);
		}
		50% {
			-ms-transform:rotateX(0) rotateY(180deg);
		}
		100% {
			-ms-transform:rotateX(5deg) rotateY(360deg);
		}
		}
	</style>
	</head>
	<body>
		<div class="carousel">
			<div id="drag-container">
				<div id="spin-container">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602347249498&di=34cab18b5627fa3b26b0817d84a0b91b&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F6%2F57a2ea807f7ad.jpg"
					 alt="">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602347249498&di=34cab18b5627fa3b26b0817d84a0b91b&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F6%2F57a2ea807f7ad.jpg"
					 alt="">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602347249498&di=34cab18b5627fa3b26b0817d84a0b91b&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F6%2F57a2ea807f7ad.jpg"
					 alt="">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602347249498&di=34cab18b5627fa3b26b0817d84a0b91b&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F6%2F57a2ea807f7ad.jpg"
					 alt="">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602347249498&di=34cab18b5627fa3b26b0817d84a0b91b&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F6%2F57a2ea807f7ad.jpg"
					 alt="">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602347249498&di=34cab18b5627fa3b26b0817d84a0b91b&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F6%2F57a2ea807f7ad.jpg"
					 alt="">
					<p>沐歌</p>
				</div>
				<div id="ground"></div>
			</div>
			<div id="music-container"></div>
		</div>
		<script type="text/javascript">
			const carousel = () => {
    //变量的定义
    let radius = 240;
    let autoRotate = true;
    let rotateSpeed = -60;
    let imgWidth = 120;
    let imgHeight = 170;
    // ===================== start =======================

    let ospin = document.getElementById('spin-container');
    let aImg = ospin.getElementsByTagName('img');
    let aEle = [...aImg];

    ospin.style.width = imgWidth + "px";
    ospin.style.height = imgHeight + "px";

    const ground = document.getElementById('ground');
    ground.style.width = radius * 3 + "px";
    ground.style.height = radius * 3 + "px";

    function init(delayTime) {
        for (let i = 0; i < aEle.length; i++) {
            aEle[i].style.transform = "rotateY(" + (i * (360 / aEle.length)) + "deg) translateZ(" + radius + "px)";
            aEle[i].style.transition = "transform 1s";
            aEle[i].style.transitionDelay = delayTime || (aEle.length - i) / 4 + "s";
        }
    }

    if (autoRotate) {
        let animationName = (rotateSpeed > 0 ? 'spin' : 'spinRevert');
        ospin.style.animation = `${animationName} ${Math.abs(rotateSpeed)}s infinite linear`;
    }
    
    init()

};
		</script>
	</body>
</html>

效果如下:

在这里插入图片描述

沐歌丨丶
关注
专栏目录
极其绚丽的图片轮播器，旋转木马（html5+css+js）制作
01-06
极其绚丽的图片轮播器，旋转木马（html5+css+js）制作多种动画效果，直接打包成jquery包，下载直接使用
css3旋转木马轮播图,3D旋转木马轮播图(原创)
weixin_39866646的博客
08-03 459
body {perspective:1000px;/* 透视要加到父级元素 */}section {position:relative;width:300px;height:200px;margin:150px auto;transform-style:preserve-3d;animation:rotate 16s linear infinite;background:url("https://...
vue3旋转木马型轮播图，环型滚动
最新发布
irisMoon06的博客
08-18 469
【代码】vue3旋转木马型轮播图，环型滚动。
【JavaWeb】CSS实现旋转木马轮播图
TechnicalXiaobai的博客
07-16 1473
轮播图、CSS、前端
css 实现旋转木马效果
weixin_47863904的博客
11-01 1385
旋转木马效果
css木马式自动轮播,基于jQuery实现自动轮播旋转木马特效_jquery
weixin_39992072的博客
08-04 186
元素。图片的数量需要为奇数张，否则显示会有一些异常，这是该插件的一个小bug。CSS样式你需要为该旋转木马特效添加下面的一些必要的CSS样式。.rotator-main {position: relative;width: 900px;height: 400px}.rotator-main a, .rotator-main img { display: block; }.rotator-main ...
js图片层叠3D旋转木马轮播特效.zip
06-14
总的来说，"js图片层叠3D旋转木马轮播特效"是一个结合了HTML、CSS和JavaScript技术的网页动态效果，它通过JavaScript的动态操作和3D视觉设计，使图片轮播变得更加生动有趣，为用户带来独特的浏览体验。对于前端...
3D Carousel旋转木马轮播特效.rar
10-01
综上所述，"3D Carousel旋转木马轮播特效.rar"的学习与应用涵盖了jQuery库的使用、CSS3的3D转换和过渡效果、网页交互设计等多个方面，对于提升网页的用户体验和视觉吸引力具有重要作用。同时，这个特效代码的可二次...
一个不错的旋转木马轮播图特效.zip
04-25
总结来说，"一个不错的旋转木马轮播图特效.zip"文件中包含的特效是基于CSS3的3D转换技术和前端JavaScript实现的。通过合理运用这些技术，我们可以创建出一个动态、立体的轮播图，不仅视觉效果出众，还能为网页增添...
js带倒影效果3D旋转木马特效
06-24
ImageRotator.js是一个JavaScript插件，专门用于实现图片轮播和旋转木马效果。它提供了丰富的选项和事件，可以让开发者轻松地控制图片的显示、过渡效果和用户交互。例如，你可以设置旋转速度、过渡类型、是否显示...
css3旋转木马轮播图,超酷jQuery 3D旋转木马效果轮播图插件
weixin_34455676的博客
08-03 415
jCarrousel是一款炫酷且强大的3D旋转木马效果轮播图jQuery插件。该旋转木马插件可以自适应屏幕大小来调整图片的间距，可实现自动播放等。jCarrousel代码简洁，使用简单，值得推荐。由于IE浏览器不支持transform-style: preserve-3d;属性，所以在IE浏览器中看到的3D效果会有些变形。使用方法使用该3D旋转木马插件需要引入jQuery、carrousel.js...
vue:旋转木马轮播组件
05-13
Vue-runrowdswiper 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请查看的和。
HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相册实例源码
07-12
代码为博客实例代码 http://blog.csdn.net/lmj623565791/article/details/32964301 有问题博客中留言
JavaScript实现轮播特效（代码）
05-31
JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）JavaScript实现轮播特效（代码）
html5旋转木马效果,js实现旋转木马效果
weixin_33045057的博客
06-03 251
CSS3 3D transforms-旋转木马.container {width: 210px;height: 140px;position: relative;margin: 50px auto 40px;border: 1px solid #CCC;-webkit-perspective: 1100px;-moz-perspective: 1100px;-o-perspective: 1100...
css3实现一个旋转木马
weixin_58855537的博客
10-03 458
这是html部分，放上8个图片 <section class="box"> <div><img src="img/iu.png" alt=""></div> <div><img src="img/iu2.png" alt=""></div> <div><img src="img/lin.png" alt=""></div> <div>..
旋转木马效果轮播图特效
Wu ShanShan的博客
05-05 4630
旋转木马轮播图特效 共有五张图片，每张图片排列的位置是以中间为对称的。图片大小，透明度不相同，但对称的图片的样式是相同的。 呈现一种立体的轮播效果。 效果图如下： 做法： 1. 设置布局 其中： &nbsp;&nbsp;&nbsp;&nbsp; 在一个大盒子box中放置一个ul，ul内有五个li标签，分别用来放置图片。 并有两个div用作切换图片的左右箭头 ...
旋转木马轮播图
董无敌啊
03-17 1020
旋转木马轮播：是通过调整每个图片的层级，位置大小，透明度来实现效果。 html<html> <head lang="en"> <meta charset="UTF-8"> <title>旋转木马轮播图</title> <link rel="stylesheet" href="css/css.css"/> <script type="text/javascript"
利用css3和js实现旋转木马图片小demo
weixin_30519071的博客
08-12 197
先看效果图： 上源码 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal...
仿QQ音乐宽屏旋转木马轮播特效jQuery源码
资源摘要信息: "jQuery实现仿QQ音乐宽屏图片旋转木马轮播特效源码.zip" 知识点一：jQuery基础 jQuery是一个快速、小巧、功能丰富的JavaScript库，它通过简化的HTML文档遍历、事件处理、动画和Ajax交互，极大地简化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值