手敲女神动态图，前端练手小项目

最新推荐文章于 2024-06-13 02:48:16 发布
最新推荐文章于 2024-06-13 02:48:16 发布
阅读量327 收藏 1
点赞数 4
分类专栏： 前端练手项目 文章标签： 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51311990/article/details/124269373
版权

1.效果展示

视频效果显示
旋转图片展示

2.源码

2.1html部分

<body>
		<div class="cube">
			<div class="box1"><img src="./img/imgs/1.jpg"></div>
			<div class="box2"><img src="./img/imgs/2.jpg"></div>
			<div class="box3"><img src="./img/imgs/3.jpg"></div>
			<div class="box4"><img src="./img/imgs/4.jpg"></div>
			<div class="box5"><img src="./img/imgs/5.jpg"></div>
			<div class="box6"><img src="./img/imgs/6.jpg"></div>
			<div class="box7"><img src="./img/imgs/1.jpg"></div>
			<div class="box8"><img src="./img/imgs/2.jpg"></div>
			<div class="box9"><img src="./img/imgs/3.jpg"></div>
			<div class="box10"><img src="./img/imgs/4.jpg"></div>
			<div class="box11"><img src="./img/imgs/5.jpg"></div>
			<div class="box12"><img src="./img/imgs/6.jpg"></div>
		</div>
	</body>

2.2 部分

<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css" rel="stylesheet">
*{
    padding:0;
    margin:0;
   }
 .cube{
    width:200px;
    height:200px;
    position:relative;
    margin:300px 0 0 750px;
    transform: rotateY(360deg) ;
    transform-style: preserve-3d;
    animation: rotate 10s infinite linear;
   }
@keyframes rotate{
    0%{
     transform:rotateX(0deg) translateZ(0) ;
      }
   100%{
    transform:rotateX(1turn) translateZ(1turn);
       }
   }
html{
   perspective: 10000px;
    }
.cube>div{
   position:absolute;
         }
img{
     width:200px;
     height:200px;
    }
.cube .box1{
     transform: rotateY(0) translateZ(400px);
   }
.cube .box2{
     transform: rotateY(30deg) translateZ(400px);
   }
.cube .box3{
     transform: rotateY(60deg) translateZ(400px);
     }
.cube .box4{
      transform: rotateY(90deg) translateZ(400px);
     }
.cube .box5{
       transform: rotateY(120deg) translateZ(400px);
     }
.cube .box6{
    transform: rotateY(150deg) translateZ(400px);
    }
.cube .box7{
    transform: rotateY(180deg) translateZ(400px);
   }
.cube .box8{
     transform: rotateY(210deg) translateZ(400px);
    }
.cube .box9{
     transform: rotateY(240deg) translateZ(400px);
    }
.cube .box10{
     transform: rotateY(270deg) translateZ(400px);
   } 
.cube .box11{
    transform: rotateY(300deg) translateZ(400px);
     }
.cube .box12{
     transform: rotateY(330deg) translateZ(400px);
    }
.cube:hover .box1{
      transform: rotateY(0) translateZ(600px);
     }
.cube:hover .box2{
      transform: rotateY(30deg) translateZ(600px);
    }
.cube:hover .box3{
      transform: rotateY(60deg) translateZ(600px);
    }
.cube:hover .box4{
       transform: rotateY(90deg) translateZ(600px);
     }
.cube:hover:hover .box5{
     transform: rotateY(120deg) translateZ(600px);
     }
.cube:hover .box6{
      transform: rotateY(150deg) translateZ(600px);
     }
.cube:hover .box7{
      transform: rotateY(180deg) translateZ(600px);
    }
.cube:hover .box8{
      transform: rotateY(210deg) translateZ(600px);
     }
.cube:hover .box9{
     transform: rotateY(240deg) translateZ(600px);
    }
.cube:hover .box10{
     transform: rotateY(270deg) translateZ(600px);
     }
.cube:hover .box11{
       transform: rotateY(300deg) tanslateZ(600px);
    }
  .cube:hover .box12{
   transform: rotateY(330deg) translateZ(600px);
    }

3.源码解析

3.1关键帧

 @keyframes rotate{  
0%{
     transform:rotateX(0deg) translateZ(0) ;
      }
   100%{
    transform:rotateX(1turn) translateZ(1turn);
       }
   }

用于设置间隔段动态效果

3.2 rotateY()和translateZ()

首先我们要了解一个图

请添加图片描述

3.2.1rotateY()

rotateY（）就是元素围绕y轴旋转

3.2.2translateZ()

translateZ()和旋转结合在一起，而且translateZ()取值为正，那么这个元素就会朝着自己面向的方向前进

3.2.3transform-style: preserve-3d

使图形具有3D效果

4.思路解析

将包裹十二张图片的容器设置为absolute

十二张图片设置为relative

在Y轴方向上第一张图片不旋转，之后的每张图片Y轴的旋转都增加360/12（deg）

在Z轴上朝着自己面向的方向前进一定的数值px形成3D效果

为每张图片添加:hover事件。translateZ()的数值增大。

如果你们觉得还不错的话，

帮博主点个赞吧

如果能点个关注就更好了

言不及行yyds
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
40个web前端实战项目，练完即可就业，从入门到进阶，基础到框架，html_css【附视频+源码】
2201_76017170的博客
12-24 1万+
40个web前端实战项目，练完即可就业，从入门到进阶，基础到框架，html_css【附视频+源码】
作死的自动化测试
zjtdy的博客
04-19 121
尽管现在已经不再做自动化测试了，但是对自动化测试还是保持一直保持关注的。就像是尽管跟女神相隔两地，无缘一睹真容，但还是悄悄关注她的微博，默默的在朋友圈中刷出关于她的点点滴滴。 从业很多年了，做过很多项目，有成功有失败，但是自动化测试项目的失败率无疑是最高的。久而久之，便渐渐能够总结出一种自动化测试作死的节奏。 节奏一：大神，帮帮忙啊，救命啊，老是搞不定啊 这句话我经常看到，一般来说有时间的话，我会教你怎么去解决这个问题。不过几天后，类似的问题出现了，你还是解决不了。 首先，大神很忙。有些大神愿意分享，他们贡
2022最新版40个前端练手项目【附视频+源码】
m0_70615468的博客
08-08 1万+
2022最新版40个前端练手项目【附视频+源码】
web前端30个项目列表，学完即可上手做项目
热门推荐
小分享
12-28 2万+
此篇文章推荐有想法学习前端，已经上路琢磨web前端的朋友们。 之前很多朋友跟我说，自学编程的时候，总是摸不清头脑，一大推问题需要解决，种种书籍需要去啃，字符、单词都需要去记。就感觉要费上很多时间，居然担忧青春饭是否能吃到？ 实际上，是实战过少项目，或者没有自己做过。凡事都是从0到1的过程，从1到100就非常简单了 小编为各位想加入程序猿大军，加入前端的朋友们整理了30个实战项目列表，有非...
前端都在聊什么 - 第 1 期
weixin_41806099的博客
01-19 1630
Hello 小伙伴们早上、中午、下午、晚上、深夜好，我是爱折腾的 jsliang~「前端都在聊什么」是 jsliang 日常写文章/做视频/搞直播过程中，小伙伴们的提问以及我的解疑整理。本期对应 2023 年的 01.01-01.15 这个时间段。本期针对「工作」「学习」「规划」「闲谈」这 4 个板块的 20 个问题进行了讨论，看看有没说到你心中想法去的。你的 点赞 和 关注 是我持续更新的动力????...
长文解析Resnet50的算法原理
AI与算法都要通俗易懂
08-19 9995
长文通俗的解析resnet50的全部算法。
自学java一路以来，心血心得整理分享
伟庭的博客
03-16 1127
自学java一路以来，心血心得整理分享
工作3年了，碰到了一个作死的自动化测试...
08-26 317
我已经做了3年的自动化测试，但是对自动化测试还是保持一直保持关注的。就像是尽管跟女神相隔两地，无缘一睹真容，但还是悄悄关注她的微博，默默的在朋友圈中刷出关于她的点点滴滴。从业很多年了，做过很多项目，有成功有失败，但是自动化测试项目的失败率无疑是最高的。久而久之，便渐渐能够总结出一种自动化测试作死的节奏。
没错，中国程序员前景一片黑暗
BinSTD的博客
07-14 837
我可能十个假程序员。
前端vue2+elementUI，后端express文章管理超简单练手小项目
04-10
前端：vue2+elementUI 后端：express+mysql 可以跟着b站up敲，仅记录最终代码和踩过的坑。 视频链接：https://www.bilibili.com/video/BV1t441187pL?share_source=copy_web 我主页写了对应的博文（每个文件可以直接...
一些有趣的前端小项目，适合新手入门
12-14
小游戏-音乐战士 music-fighter 520表白网站 my520 全屏樱花特效 sakura 全屏泡泡特效 bubble.html 自动敲代码网站 auto_code_printer.html WoW特效-生日网站 cake.html Js编码表情字符 aaencode.html 极简计算器 ...
JavaWeb项目实战手敲实现功能对应资源包.zip
08-24
里面有文档，有思路想法，还有jar包素材，当然也有源码，那还是建议大家不要直接就全部CV,那在src目录下的代码编写，大家可以多手敲，那样我也觉得大家学习到了，我也会为我的分享帮助到别人感到自豪。有问题可以留...
手敲项目reactDemo1
03-01
reactDemo1
尚硅谷尚融宝项目手敲代码
09-11
自己手敲的
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 317
在vue.config.js中配置关闭Uncaught runtime errors显示。
Web前端网站设计案例：深入剖析创意与技术的完美融合
liyrbtqe_66w的博客
06-12 223
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
Harmony 开发的艺术 面向对象
最新发布
不懂先生的博客
06-13 778
然后你可以创建多个子类，如“圆形”、“矩形”和“三角形”，它们都继承自“形状”类并实现了自己的“绘制”方法。尽管每个对象的类型可能不同（圆形、矩形、三角形等），但由于它们都继承了“形状”类并实现了相同的“绘制”方法，因此你可以通过父类引用来统一调用它们的方法。然后你可以创建一个“狗”类，它继承自“动物”类，并添加或覆盖一些特定的属性和方法（如“叫”和“摇尾巴”）。所以面向对象的三大特征（封装、继承、多态）在java语言中很容易实现的设计，搬到早期的JavaScript中，就变噩梦一样的存在。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 226
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
前端手敲 深拷贝浅拷贝代码
04-16
以下是前端手敲的深拷贝和浅拷贝的代码示例： 1. 浅拷贝（Object.assign）[^1] ```javascript let obj1 = { name: 'John', age: 30 }; let obj2 = Object.assign({}, obj1); obj2.name = 'Jane'; console.log(obj1); // 输出：{ name: 'John', age: 30 } console.log(obj2); // 输出：{ name: 'Jane', age: 30 } ``` 2. 深拷贝（递归方法） ```javascript function deepCopy(obj) { if (typeof obj !== 'object' || obj === null) { return obj; } let copy = Array.isArray(obj) ? [] : {}; for (let key in obj) { if (obj.hasOwnProperty(key)) { copy[key] = deepCopy(obj[key]); } } return copy; } let obj1 = { name: 'John', age: 30, hobbies: ['reading', 'coding'] }; let obj2 = deepCopy(obj1); obj2.name = 'Jane'; obj2.hobbies.push('swimming'); console.log(obj1); // 输出：{ name: 'John', age: 30, hobbies: ['reading', 'coding'] } console.log(obj2); // 输出：{ name: 'Jane', age: 30, hobbies: ['reading', 'coding', 'swimming'] } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

言不及行yyds

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值