您现在的位置是:首页 > Javascript
当前栏目
为你心仪的她做一个 “旋转木马“告白相册【零基础纯 CSS3 实现】
2023-03-31 10:44:13 时间
💳 效果展示:
旋转相册效果里面就不放女朋友的美照了防止虐狗 🥰🥰🥰,就用个前端技能树的图片代替哈,有需要大家自行替换。
💳 源码获取:
源码我已经上传到了资源里,有会员的小伙伴直接下载即可,没有会员的小伙伴私聊我“旋转木马”也能获取(免费的),下面是源码资源的链接:
💳 源码分析:
本次案例最主要还是用到了 CSS3 的 3D 板块的内容,其次是 animation 动画的书写设置。最主要的还是如何将你的图片们呈现3D环绕布局效果。
💳 布局分析:
其实布局并没有大家想象中那么困难,只需要将所有图片加上定位后全部先按各自需要旋转的角度旋转,然后再向外拉远距离,就可以呈现环绕效果了,其俯视理解如下(用只有三张图片时举例,三个图片环绕一周,那么第一个图片需要旋转0度,及正面面对我们,第二个图片需要旋转120度,第三个图片需要旋转240度,俯视图即以下效果):
//第一个图片 transform: rotateY(0deg) //第二个图片 transform: rotateY(120deg) //第三个图片 transform: rotateY(240deg)
当我们旋转完后想要呈现边框挨边框的环绕效果,需要让每个图片再向外移动(此处可以理解为扩散),要注意的是只有添加了透视 perspective 才能显示出立体效果,值的大小可以根据需要去设置,此处我设置的是 perspective: 1200px;注意透视 perspective要加给需要产生透视元素的父元素身上,另外切记此处要先旋转了再移动,否则会达不到理想效果。
//第一个图片 transform: rotateY(0deg) translateZ(470px); //第二个图片 transform: rotateY(120deg) translateZ(470px); //第三个图片 transform: rotateY(240deg) translateZ(470px);
💳 动画设置:
我共设置了两个动画,一个是控制整体在刷新页面时从左上角移动到中心再保持不动,第二个就是图片整体的旋转动画
section{
transform: translate(-50% -50%);
transform-style: preserve-3d;
animation: rotate 8s linear infinite;
}
section:hover{
animation-play-state: paused;
}
@keyframes move{
0%{
translate: translate(-1000px ,-1000px);
}
100%{
transform: translate(0,100px);
}
}
@keyframes rotate{
0%{
transform: rotateX(-7deg) rotateY(0);
}
100%{
transform:rotateX(-7deg) rotateY(360deg);
}
}
💳 主要代码:
@keyframes move{
0%{
translate: translate(-1000px ,-1000px);
}
100%{
transform: translate(0,100px);
}
}
@keyframes rotate{
0%{
transform: rotateX(-7deg) rotateY(0);
}
100%{
transform:rotateX(-7deg) rotateY(360deg);
}
}
section div:nth-child(1){
-webkit-box-reflect: below 5px linear-gradient(transparent,rgba(0,0,0,.3));
transform: translateZ(470px);
background-image: url(./img/1.jpg);
}
section div:nth-child(2){
-webkit-box-reflect: below 5px linear-gradient(transparent,rgba(0,0,0,.3));
transform: rotateY(45deg) translateZ(470px);
background-image: url(./img/2.png);
}
section div:nth-child(3){
-webkit-box-reflect: below 5px linear-gradient(transparent,rgba(0,0,0,.3));
transform: rotateY(90deg) translateZ(470px);
background-image: url(./img/3.png);
}
section div:nth-child(4){
-webkit-box-reflect: below 5px linear-gradient(transparent,rgba(0,0,0,.3));
transform: rotateY(135deg) translateZ(470px);
background-image: url(./img/4.gif);
}
section div:nth-child(5){
-webkit-box-reflect: below 5px linear-gradient(transparent,rgba(0,0,0,.3));
transform: rotateY(180deg) translateZ(470px);
background-image: url(./img/5.webp);
}
section div:nth-child(6){
-webkit-box-reflect: below 5px linear-gradient(transparent,rgba(0,0,0,.3));
transform: rotateY(225deg) translateZ(470px);
background-image: url(./img/6.webp);
}
section div:nth-child(7){
-webkit-box-reflect: below 5px linear-gradient(transparent,rgba(0,0,0,.3));
transform: rotateY(270deg) translateZ(470px);
background-image: url(./img/7.jpg);
}
section div:nth-child(8){
-webkit-box-reflect: below 5px linear-gradient(transparent,rgba(0,0,0,.3));
transform: rotateY(315deg) translateZ(470px);
background-image: url(./img/8.png);
}
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件