如何让吴磊、易烊千玺、肖站等小鲜肉围着你转

话不多说，先上效果图

接下来看如何实现。

用到的知识点就是 css 中的 position 属性，以及 transform、transition 属性。

代码不是很多就直接上代码码了，相关的注释也都写了，应该不难懂。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>环形旋转</title><style>.container {margin: 0 auto;position: relative;width: 50%;height: 1000px;}.circle-box {position: absolute;top: 36%;left: 41%;}.center-point {position: absolute;top: 32%;left: 32%;width: 240px;}.circle {/* 这里一定要绝对定位，这样位置才能铺开来 */position: absolute;width: 100px;height: 50px;}.circle img {border-radius: 50% 50%;width: 100px;}</style>
</head><body><div class="container"><img class="center-point" src="./image/10.jpeg" alt=""/><div class="circle-box"><div class="circle circle0"><img src="./image/1.jpg" alt=""></div><div class="circle circle1"><img src="./image/2.jpg" alt=""></div><div class="circle circle2"><img src="./image/3.jpg" alt=""></div><div class="circle circle3"><img src="./image/4.jpg" alt=""></div><div class="circle circle4"><img src="./image/5.jpg" alt=""></div><div class="circle circle5"><img src="./image/6.jpg" alt=""></div><div class="circle circle6"><img src="./image/7.jpeg" alt=""></div><div class="circle circle7"><img src="./image/8.jpg" alt=""></div><div class="circle circle8"><img src="./image/9.jpg" alt=""></div></div>
</div><script src="jquery.min.js"></script>
<script>var length = $('.circle').lengthfor (var i = 0; i < length; i++) {$('.circle').eq(i).css({'transform': 'rotate(' + (i * 40) + 'deg) ' + 'translateY(260px) ' + 'rotateZ(-' + (i * 40) + 'deg)','transition': 'all 2s'})}var times = 0// 鼠标悬浮到图片上面，触发旋转动画// $('.circle-box').hover(function () {//     for (var i = 0; i < length; i++) {//         $('.circle').eq(i).css({//             'transform': 'rotate(' + ((i + times) * 40) + 'deg) ' + 'translateY(260px) ' + 'rotateZ(-' + ((i + times) * 40) + 'deg)',//             'transition': 'all 2s'//         })//     }// }, function () {//     times++// })// 每隔 2s 执行一次动画setInterval(function(){times++ for (var i = 0; i < length; i++) {$('.circle').eq(i).css({'transform': 'rotate(' + ((i + times) * 40) + 'deg) ' + 'translateY(260px) ' + 'rotateZ(-' + ((i + times) * 40) + 'deg)','transition': 'all 2s'})}},2000)</script></body></html>

是不是很简单！

如何让吴磊、易烊千玺、肖站等小鲜肉围着你转相关推荐

2021易烊千玺高考成绩查询,易烊千玺高考分数公布？最骄傲的是他？网友：分太低！...
最近是高考分数公布的时间,已经有很多的省份都已经陆续公布了高考的分数,而分数的公布也是有人欢喜有人忧啊!而今年是参加高考的明星考生里面最多的一年!而最受大家关注的吴磊,李兰迪,宋祖儿,胡先煦这些明星考 ...
2021易烊千玺高考成绩查询,易烊千玺高考成绩曝光，今年绝对是考得最好的一届...
这几日所有省份的高考分数都陆续出来啦,而粉丝们也非常关心自己参加好看的几个孩子的成绩.今年参加高考的明星有点多,有吴磊.易烊千玺.容祖儿.李兰迪等等备受瞩目. 吴磊高考总分456,语89,数73,外1 ...
一周热图｜进博会展馆异彩纷呈；易烊千玺代言欧乐-B；宋祖儿张雪迎助阵声光展...
图片是企业新闻传播的要素之一,优秀的图片使读者能更直观地了解新闻内容."一周热图"栏目为大家展示每周通过美通社发布的最具代表性的企业新闻图片. 进博会展馆异彩纷呈雅诗兰黛集团首次 ...
2021易烊千玺高考成绩查询,易烊千玺高考成绩公布，很多诋毁他的人，瞬间都哑口无言...
现在娱乐圈很多明星在很小的时候就已经出道.很多的实力派歌手考大学的时候,纷纷选择了中国最高等的艺术院校.刚成年的王俊凯就考入了北京电影学院,而跟他出自同一个组合的易烊千玺,查询到的高考成绩单也公布到了 ...
易烊千玺领衔，潮流自拍手机华为nova5系列发布
6月21日,华为nova5系列新品在武汉光谷国际网球中心正式发布.华为nova5系列包含nova5和nova5 Pro两款机型,不仅外观更具时尚潮流感,更在产品性能上得到了全面升级. 华为nova5系 ...
《少年的你》首映易烊千玺坦言哭戏最有挑战
10月25日,电影<少年的你>在北京举行了"成人礼".监制许月珍.导演曾国祥携主演易烊千玺.张艺凡.赵润南一同亮相.女主周冬雨因工作原因无法,特意在北极录制VCR为电影 ...
2021易烊千玺高考成绩查询,2021高考进入倒计时考生后援团送上祝福
原标题:2021高考进入倒计时考生后援团送上祝福对于普通家庭来说,高考是孩子改变命运的机会.对于每一位学子来说,高考无疑算是人生中的第一件大事.因此,每年到了这个季节,都会有很多演员.歌手们送上高 ...
第三方linux版电脑,易烊千玺的嘴变大了
后在刘涛主演的电视剧老公是厨师见过,之先用张国荣做头像的男生动道.出现淮南刘涛主持人他思,古神何鸿燊为张国荣颁奖的图片藏身,的但陈凯歌张国荣受采访你的. 匆匆张国荣为什么胃酸倒流吐舌,防御李铭顺和张国 ...
小红花代表什么_《送你一朵小红花》易烊千玺的名字是什么小红花电影易烊千玺最后一句话什么意思...
<送你一朵小红花>易烊千玺的名字是什么该片围绕两个抗癌家庭.两组生活轨迹讲述了一个温情的现实故事思考和直面了每一个普通人都会面临的人生命题--想象死亡随时可能到来我们唯一要做的就 ...

如何让吴磊、易烊千玺、肖站等小鲜肉围着你转

如何让吴磊、易烊千玺、肖站等小鲜肉围着你转相关推荐

最新文章

热门文章