html表白代码照片墙代码,前端特效之520表白神器-旋转照片墙
520马上到了,教大家一手表白神器,单身的程序员们感觉学起来,很简单。
制作步骤:
1. 新建代码目录,新建文件index.html,将以下代码拷贝到文件中
2. 新建文件夹image,找12张图片放进去,修改imgae标签对应的src属性,酷炫的照片旋转就完成了。
3. 代码效果如下,双击index.html或者直接拖到浏览器中打开即可
520表白神器-照片特效
*{
padding:0;
margin:0;
}
#react{
width: 200px;
height:200px;
margin: 200px auto;
transform-style:preserve-3d;
animation:rotate 20s infinite;
animation-timing-function: linear;
}
#react div{
position:absolute;
transition: all .4s;
}
div .out_pic{
width:200px;
height:200px;
opacity:0.9;
}
div .in_pic{
width:100px;
height:100px;
}
#react span{
display:block;
position:absolute;
width:100px;
height:100px;
top:50px;
left:50px;
}
@keyframes rotate{
from{transform: rotateX(0deg) rotateY(0deg);}
to{transform: rotateX(360deg) rotateY(360deg);}
}
.out_frount{
transform:translateZ(100px);
}
.out_back{
transform:translateZ(-100px);
}
.out_left{
transform:rotateY(90deg) translateZ(100px);
}
.out_right{
transform: rotateY(-90deg) translateZ(100px);
}
.out_top{
transform:rotateX(90deg) translateZ(100px);
}
.out_bottom{
transform: rotateX(-90deg) translateZ(100px);
}
.in_frount{
transform:translateZ(50px);
}
.in_back{
transform:translateZ(-50px);
}
.in_left{
transform:rotateY(90deg) translateZ(50px);
}
.in_right{
transform: rotateY(-90deg) translateZ(50px);
}
.in_top{
transform:rotateX(90deg) translateZ(50px);
}
.in_bottom{
transform: rotateX(-90deg) translateZ(50px);
}
#react:hover .out_frount{
transform:translateZ(200px);
}
#react:hover .out_back{
transform:translateZ(-200px);
}
#react:hover .out_left{
transform:rotateY(90deg) translateZ(200px);
}
#react:hover .out_right{
transform: rotateY(-90deg) translateZ(200px);
}
#react:hover .out_top{
transform:rotateX(90deg) translateZ(200px);
}
#react:hover .out_bottom{
transform: rotateX(-90deg) translateZ(200px);
}
@charset "utf-8";
/* CSS Document */
摆脱单身就差这一步了,赶紧学起来,记得回来关注哦!
html表白代码照片墙代码,前端特效之520表白神器-旋转照片墙相关推荐
- 三郎前端特效学习源代码:魔法旋转粒子动态渐变特效
三郎前端特效学习源代码:魔法旋转粒子动态渐变特效 简单介绍 效果图 源代码 html部分 js部分 第二个js部分 简单介绍 类似电影里的魔法效果 轨迹次数速度都可以自己改改 效果图 源代码 html ...
- 520表白用的php,C语言实现520表白代码 祝你表白成功!
本文实例为大家分享了C语言实现520表白的具体代码,供大家参考,具体内容如下 在这个狂虐单身狗的节日,实在无聊写了几行也不知道向谁告白的代码,献丑献丑: #include #include int m ...
- 520表白浪漫的句子文案用便签记下来
在5月20日也就是520这个美好的情人节里,相信有很多年轻的情侣们都要出来约会了,一起度过这个浪漫的节日.并且520这个节日也是非常适合向心仪的人表白的哦,其实有不少小伙伴都是想要向某个人表白的,但是 ...
- 表白套路计算机公式,520 超酷表白公式-520表白套路【蜜匠婚礼】
网络情人节520.521马上就要到了,大家应该已经看过很多的表白套路,520和521的谐音就是我爱你,这是一个给广大有暗恋的人表白的好时机,也是促进情侣之间感情的好机会.那么如何给喜欢的人一个特殊的表 ...
- 用代码写出浪漫__合集(python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心)
活动地址:CSDN21天学习挑战赛 用代码写出浪漫合集(爱心.玫瑰花) 本文目录: 一.前言 二.用python.matplotlib.Matlab.java绘制爱心 (1)爱心图形1( ...
- python表白代码照片墙-python入会生成照片墙 利用python生成照片墙代码
本篇文章小编给大家分享一下利用python生成照片墙代码,对大家的学习有一定的帮助,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. PIL(Python Image Libr ...
- HTML生日快乐代码 (粉色主题)(HTML5+CSS3+JS)520表白代码/七夕情人节网页/告白/求婚/生日快乐...
html+css+js 生日快乐网站模板(多页面功能版本+音乐)❤520/表白/七夕情人节/求婚❤专用炫酷动画网页的源代码(HTML5+CSS3+JS) 程序员爱情❤520/表白/七夕情人节/求婚❤专 ...
- Python绘制520表白代码——永恒的心动
一年一度的520又来了,时光往复,祝陪在你身边的人始终如初. 之前整理过Python浪漫表白源码合集(爱心.玫瑰花.照片墙.星空下的告白).情人节表白烟花.教你用Python秀恩爱.撒狗粮-这是我的某 ...
- 程序员表白简短html代码,【杂谈】2018浪漫七夕:7款程序员必备表白源码(超炫酷)...
2018七夕将要来临,ki4网给大家准备了七款程序员表白专用源码,让你可以一举俘获美人心,下面就来看一看这七款表白代码大全,包含html.html5.CSS.JQ编写的一些非常简单实用的表白代码,非常 ...
最新文章
- IK分词器使用自定义词库
- nginxmysql负载均衡,神操作!
- BZOJ1457 棋盘游戏
- 如何设计好词袋模型BoW模型的类类型
- 匈牙利算法c语言代码,漫谈匈牙利算法
- 分发 WxWidgets 应用程序
- Spark _07_补充部分算子【二】
- 高等数学上-赵立军-北京大学出版社-题解-练习5.8
- 系统学习数字图像处理之图像压缩
- 异动处理中的发票类型应用(Complaint Processing)
- freeswitch 基于webrtc网页视频、语音通话官方例子video_demo安装
- ImageAi安装详细版
- e680 reboot的研究
- mit计算机33门课程_550多门免费在线编程和计算机科学课程,您可以在本年十月开始...
- 固态硬盘是什么接口_了解移动固态硬盘接口知识,告诉你PSSD到底能多快
- mac电脑上网突然变得很慢
- openFlow入门
- java游戏开发杂谈 - 游戏编程浅析
- 学波尔还是学王励勤?-----再谈正手弧圈的重心转移
- 游戏业务面试准备系列1-常见业务问题汇总