七夕节表白3d相册制作(html5+css3)
2024-08-28 07:52:06
七夕节表白3d相册制作
涉及知识点
- 定位
- 阴影
- 3d转换
- 动画
主要思路：
通过定位将所有照片叠在一起，在设置默认的样式以及照片的布局，最后通过设置盒子以及照片的旋转动画来达到效果。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3d相册</title>
<style type="text/css">
/* 使用单位将所有照片叠在一起 */
img{
width: 200px;
position: absolute;
/* 照片加阴影 */
box-shadow: 0 0 8px black;
/* 照片圆角 */
border-radius: 5px;
}
#album{
width: 200px;
height: 267px;
margin: 250px auto;
/* 父元素设置保留3d效果,这样子子元素的3d效果就可以显示出来 */
transform-style: preserve-3d;
/* 调用动画 */
animation: xuanzhuan 20s linear infinite;
}
body{
/* 设置视距,更好的观察3d效果 */
perspective: 800px;
background-image: url(image/bg2.jpg);
overflow: hidden;
}
@keyframes xz{
/* 设置每张照片独自的旋转效果动画 */
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
@keyframes xuanzhuan{
/* 设置整个照片容器的旋转动画 */
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
}
#album div[class^="box"] {
transform-style: preserve-3d;
}
#album div[class^="box"] img {
animation: xz 20s linear infinite;
}
/* 设置每张图片的默认旋转样式以及布局 */
#album .box1 {
transform: rotateY(0deg) translateZ(200px);
}
#album .box2 {
transform: rotateY(60deg) translateZ(200px);
}
#album .box3 {
transform: rotateY(120deg) translateZ(200px);
}#album .box4 {
transform: rotateY(180deg) translateZ(200px);
}
#album .box5 {
transform: rotateY(240deg) translateZ(200px);
}
#album .box6 {
transform: rotateY(300deg) translateZ(200px);
}
</style>
</head>
<body>
<div id="album">
<div class = "box1"><img src="image/1.jpg" ></div>
<div class = "box2"><img src="image/2.jpg" ></div>
<div class = "box3"><img src="image/3.jpg" ></div>
<div class = "box4"><img src="image/4.jpg" ></div>
<div class = "box5"><img src="image/5.jpg" ></div>
<div class = "box6"><img src="image/6.jpg" ></div>
</div>
</body>
</html>
其中代码还存在一些优化，读者自行优化。
祝读者们早日脱单！！！
最新文章
- 为什么 Java 8 中不再需要 StringBuilder 拼接字符串
- Java面向对象㈢ -- 内部类
- 由Nullable模式想到的ToString的扩展
- Apache服务器配置技巧
- Delphi 中的 procedure of object （类方法存在一个隐藏参数self），简单深刻 good
- js带缩略图的图片切换效果
- Unity3D中Prefab
- 防止输入时键盘覆盖掉textfiled
- Android 混淆文件project.properties和proguard-project.txt
- BZOJ2064: 分裂
- JavaScript变量声明与提升
- jdk源码->多线程->Thread
- ElasticSearch和solr的差别
- Android集成讯飞语音、百度语音、阿里语音识别
- 学习Android(入门基础和实用教程)
- OpenShift Origin 基本命令
- 根据IP查找计算机名
- C#实现控制Windows系统关机、重启和注销的方法
- Install Python on Mac
- IdentityServer4在Asp.Net Core中的应用(一)