热搜：前端 vuedraggable 插件 vue

CSS实现旋转木马效果

lxf2023-08-01 01:00:01

 先来看一下效果图：

CSS实现旋转木马效果  

 实现思路

  • 先搭建基本结构
<div class="stage">
  <div class="container">
    <img src="./images/car1.jpeg"/>
    <img src="./images/car2.jpeg"/>
    <img src="./images/car3.jpeg"/>
    <img src="./images/car4.jpeg"/>
    <img src="./images/car5.jpeg"/>
    <img src="./images/car6.jpeg"/>
  </div>
</div>

CSS实现旋转木马效果

  • 定义css动画函数
%20@keyframes%20rotating%20{
%20%20%20%20%20%200%{
%20%20%20%20%20%20%20%20transform:%20translate(-50%,%20-50%)%20rotateY(0deg);
%20%20%20%20%20%20}
%20%20%20%20%20%20100%{
%20%20%20%20%20%20%20%20transform:%20translate(-50%,%20-50%)%20rotateY(360deg);
%20%20%20%20%20%20}
%20%20%20%20}

  • 设置css属性

最外层的div需要设置perspective(视距)属性，目的是能够产生视觉立体效果，它的值是眼睛和屏幕的距离：

%20.stage{
%20%20%20%20%20%20perspective:%201200px;
%20%20%20%20%20%20position:%20absolute;
%20%20%20%20%20%20top:%2050%;
%20%20%20%20%20%20left:%2050%;
%20%20%20%20%20%20transform:%20translate(-50%,%20-50%);
%20%20%20%20}

内层的div作为图片的容器，并且设置transform-style:%20preserve-3d，开启3d转换，并且应用上面定义的动画：

.container%20{
%20%20%20%20%20%20position:%20absolute;
%20%20%20%20%20%20top:%2050%;
%20%20%20%20%20%20left:%2050%;
%20%20%20%20%20%20transform:%20translate(-50%,%20-50%);
%20%20%20%20%20%20width:%20270px;
%20%20%20%20%20%20height:%20180px;
%20%20%20%20%20%20transform-style:%20preserve-3d;
%20%20%20%20%20%20animation-name:%20rotating;
%20%20%20%20%20%20animation-duration:%2015s;
%20%20%20%20%20%20animation-timing-function:%20linear;
%20%20%20%20%20%20animation-iteration-count:%20infinite;
%20%20%20%20%20%20animation-play-state:%20running;
%20%20%20%20}

给每个img都设置对应的css属性：

.container%20img:nth-of-type(1){
%20%20%20%20%20%20transform:%20rotateY(60deg)%20translateX(300px)%20rotateY(90deg);
%20%20%20%20}
%20%20%20%20.container%20img:nth-of-type(2){
%20%20%20%20%20%20transform:%20rotateY(120deg)%20translateX(300px)%20rotateY(90deg);
%20%20%20%20}
%20%20%20%20.container%20img:nth-of-type(3){
%20%20%20%20%20%20transform:%20rotateY(180deg)%20translateX(300px)%20rotateY(90deg);
%20%20%20%20}
%20%20%20%20.container%20img:nth-of-type(4){
%20%20%20%20%20%20transform:%20rotateY(2400deg)%20translateX(300px)%20rotateY(90deg);
%20%20%20%20}
%20%20%20%20.container%20img:nth-of-type(5){
%20%20%20%20%20%20transform:%20rotateY(300deg)%20translateX(300px)%20rotateY(90deg);
%20%20%20%20}
%20%20%20%20.container%20img:nth-of-type(6){
%20%20%20%20%20%20transform:%20rotateY(360deg)%20translateX(300px)%20rotateY(90deg);
%20%20%20%20}

实现代码 
<!DOCTYPE%20html>
<html%20lang="en">
<head>
%20%20<meta%20charset="UTF-8">
%20%20<title>旋转木马</title>
%20%20<style>
%20%20%20%20@keyframes%20rotating%20{
%20%20%20%20%20%200%{
%20%20%20%20%20%20%20%20transform:%20translate(-50%,%20-50%)%20rotateY(0deg);
%20%20%20%20%20%20}
%20%20%20%20%20%20100%{
%20%20%20%20%20%20%20%20transform:%20translate(-50%,%20-50%)%20rotateY(360deg);
%20%20%20%20%20%20}
%20%20%20%20}
%20%20%20%20.stage{
%20%20%20%20%20%20perspective:%201200px;
%20%20%20%20%20%20position:%20absolute;
%20%20%20%20%20%20top:%2050%;
%20%20%20%20%20%20left:%2050%;
%20%20%20%20%20%20transform:%20translate(-50%,%20-50%);
%20%20%20%20}
%20%20%20%20.container%20{
%20%20%20%20%20%20position:%20absolute;
%20%20%20%20%20%20top:%2050%;
%20%20%20%20%20%20left:%2050%;
%20%20%20%20%20%20transform:%20translate(-50%,%20-50%);
%20%20%20%20%20%20width:%20270px;
%20%20%20%20%20%20height:%20180px;
%20%20%20%20%20%20transform-style:%20preserve-3d;
%20%20%20%20%20%20animation-name:%20rotating;
%20%20%20%20%20%20animation-duration:%2015s;
%20%20%20%20%20%20animation-timing-function:%20linear;
%20%20%20%20%20%20animation-iteration-count:%20infinite;
%20%20%20%20%20%20animation-play-state:%20running;
%20%20%20%20}
%20%20%20%20.container%20img{
%20%20%20%20%20%20width:%20100%;
%20%20%20%20%20%20height:%20100%;
%20%20%20%20%20%20position:%20absolute;
%20%20%20%20%20%20top:%200;
%20%20%20%20%20%20left:%200;
%20%20%20%20%20%20transition:%20all%200.3s;

%20%20%20%20}
%20%20%20%20.container%20img:hover{
%20%20%20%20%20%20box-shadow:%200%200%208px%201px%20#24b4f3;
%20%20%20%20}
%20%20%20%20.container%20img:nth-of-type(1){
%20%20%20%20%20%20transform:%20rotateY(60deg)%20translateX(300px)%20rotateY(90deg);
%20%20%20%20}
%20%20%20%20.container%20img:nth-of-type(2){
%20%20%20%20%20%20transform:%20rotateY(120deg)%20translateX(300px)%20rotateY(90deg);
%20%20%20%20}
%20%20%20%20.container%20img:nth-of-type(3){
%20%20%20%20%20%20transform:%20rotateY(180deg)%20translateX(300px)%20rotateY(90deg);
%20%20%20%20}
%20%20%20%20.container%20img:nth-of-type(4){
%20%20%20%20%20%20transform:%20rotateY(2400deg)%20translateX(300px)%20rotateY(90deg);
%20%20%20%20}
%20%20%20%20.container%20img:nth-of-type(5){
%20%20%20%20%20%20transform:%20rotateY(300deg)%20translateX(300px)%20rotateY(90deg);
%20%20%20%20}
%20%20%20%20.container%20img:nth-of-type(6){
%20%20%20%20%20%20transform:%20rotateY(360deg)%20translateX(300px)%20rotateY(90deg);
%20%20%20%20}

%20%20</style>
</head>
<body>
<div%20class="stage">
%20%20<div%20class="container">
%20%20%20%20<img%20src="./images/car1.jpeg"/>
    <img src="./images/car2.jpeg"/>
    <img src="./images/car3.jpeg"/>
    <img src="./images/car4.jpeg"/>
    <img src="./images/car5.jpeg"/>
    <img src="./images/car6.jpeg"/>
  </div>
</div>
</body>
<script>
  const container = document.querySelector('.container');
  container.addEventListener('mouseenter',e=>{
    e.target.style.animationPlayState='paused'
  })
  container.addEventListener('mouseleave',e=>{
    e.target.style.animationPlayState='running'
  })
</script>
</html>

CSS实现旋转木马效果

实现效果

CSS实现旋转木马效果​

\

​

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。 在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!

本文是由"秘密武器开发者中心"本站原创整理，所有内容的版权归原作者所有。

相关专题