css3制作炫酷动画相册

1. 特别说明：本段代码未作兼容处理，仅在高版本谷歌浏览器中起作用哟；
2.这里我使用的是网络图片，想制作属于自己相册的小伙伴们，可以新建img文件夹，在css样式中，将背景土拍你路径替换为自己的图片就好啦；
3.下面就开始贴代码咯；先来看看效果图（有三个动画效果）；

4.基础html代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="xc.css">
</head><body><div class="xc-wrap"><ul class="outer"><li></li><li></li><li></li><li></li><li></li><li></li></ul><ul class="inner"><li></li><li></li><li></li><li></li><li></li><li></li></ul></div>
</body>
</html>

5.css代码

* {padding: 0;margin: 0;
}html {height: 100vh;background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588933114825&di=6f26ee95fc01fccc5d60509aef0e90af&imgtype=0&src=http%3A%2F%2Fdingyue.nosdn.127.net%2Fnqyz1FHPcxrsyPk5T9g96Ya3VUOslFKh0DvNh4emZhAqR1544162742684.jpg') no-repeat;background-size: 100% 100%;
}html:after {/*用于模糊背景图片*/content: "";width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: inherit;filter: blur(5px);z-index: 2;
}.xc-wrap {width: 300px;height: 300px;position: relative;margin: 200px auto 0;transform-style: preserve-3d;animation-name: rotate, rotateX, rotateY;/*三个动画顺序执行*/animation-duration: 6s, 10s, 10s;animation-timing-function: linear, linear, linear;animation-delay: 0s, 6s, 16s;/*设置后一个动画的延迟时间为前一个动画的执行时间，保证每段动画都能执行*/animation-iteration-count: infinite, infinite, infinite;z-index: 3;
}.xc-wrap .outer,
.xc-wrap .inner {position: absolute;
}.xc-wrap .outer {width: 300px;
}.xc-wrap .inner {width: 100px;height: 100px;left: 50px;top: 50px;
}.xc-wrap .inner li {left: 0;right: 0;
}@keyframes rotate {from {transform: rotateY(0deg) rotateX(0deg);}to {transform: rotateY(360deg) rotateX(360deg);}
}@keyframes rotateY {from {transform: rotateY(0deg);}to {transform: rotateY(360deg);}
}@keyframes rotateX {from {transform: rotateX(0deg);}to {transform: rotateX(360deg);}
}.xc-wrap li {position: absolute;list-style: none;background-repeat: no-repeat;background-size: cover;
}.xc-wrap .outer li {width: 200px;height: 200px;
}.xc-wrap .inner li {width: 100px;height: 100px;
}.xc-wrap .outer li:nth-child(1) {transform: translateZ(150px);background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588933114827&di=5fc10b2e5911b97e672f99e3f4150bc0&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180727%2F2aba981f071c497789fd31b3d237c72a.jpeg);
}.xc-wrap .outer li:nth-child(2) {transform: translateZ(-150px) rotateY(180deg);background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588933114826&di=f4ad293a61442cbc5a84dced4dac7b4f&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ffront%2F617%2Fw677h740%2F20180911%2FYWw6-hiixpun6687496.jpg);
}.xc-wrap .outer li:nth-child(3) {transform: translateX(-150px) rotateY(-90deg);background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588933114826&di=e4dd781b20950d539ac21dae4539639f&imgtype=0&src=http%3A%2F%2Fp2.ssl.cdn.btime.com%2Ft01cfbd3bc457adb231.jpg%3Fsize%3D532x454);
}.xc-wrap .outer li:nth-child(4) {transform: translateX(150px) rotateY(90deg);background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588933114826&di=29052c40e3122af099c2050d620b61f4&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2F20171110%2F733b-fynstfh3452464.jpg);
}.xc-wrap .outer li:nth-child(5) {transform: translateY(-150px) rotateX(90deg);background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588933114825&di=d696761fa9198ccf375182a0f8cc783f&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw640h560%2F20180225%2Fb855-fyrwsqi0027891.jpg);
}.xc-wrap .outer li:nth-child(6) {transform: translateY(150px) rotateX(-90deg);background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588933114825&di=a0021b45b5a05d0f8d67ab8c87d688bb&imgtype=0&src=http%3A%2F%2Fc1.haibao.cn%2Fimg%2F600_0_100_0%2F1517830030.8115%2F87df834e775be8df76922d9dc0f66687.jpg);
}/* inner */
.xc-wrap .inner li:nth-child(1) {transform: translateZ(-50px);background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588933114827&di=5fc10b2e5911b97e672f99e3f4150bc0&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180727%2F2aba981f071c497789fd31b3d237c72a.jpeg);
}.xc-wrap .inner li:nth-child(2) {transform: translateZ(50px) rotateY(180deg);background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588933114826&di=f4ad293a61442cbc5a84dced4dac7b4f&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ffront%2F617%2Fw677h740%2F20180911%2FYWw6-hiixpun6687496.jpg);
}.xc-wrap .inner li:nth-child(3) {transform: translateX(50px) rotateY(-90deg);background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588933114826&di=e4dd781b20950d539ac21dae4539639f&imgtype=0&src=http%3A%2F%2Fp2.ssl.cdn.btime.com%2Ft01cfbd3bc457adb231.jpg%3Fsize%3D532x454);
}.xc-wrap .inner li:nth-child(4) {transform: translateX(-50px) rotateY(90deg);background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588933114826&di=29052c40e3122af099c2050d620b61f4&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2F20171110%2F733b-fynstfh3452464.jpg);
}.xc-wrap .inner li:nth-child(5) {transform: translateY(50px) rotateX(90deg);background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588933114825&di=d696761fa9198ccf375182a0f8cc783f&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw640h560%2F20180225%2Fb855-fyrwsqi0027891.jpg);
}.xc-wrap .inner li:nth-child(6) {transform: translateY(-50px) rotateX(-90deg);background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588933114825&di=a0021b45b5a05d0f8d67ab8c87d688bb&imgtype=0&src=http%3A%2F%2Fc1.haibao.cn%2Fimg%2F600_0_100_0%2F1517830030.8115%2F87df834e775be8df76922d9dc0f66687.jpg);
}

css3制作炫酷动画相册相关推荐

纯CSS3制作炫酷的3D相册
纯CSS3制作炫酷的3D相册整体效果如下所示: 整体代码如下所示: html中的代码 <!DOCTYPE html> <html lang="en"> & ...
html设置发光字体制作,CSS3制作炫酷的自定义发光文字
CSS3制作炫酷的自定义发光文字 text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px ...
炫酷html动画,纯CSS3一个炫酷动画
纯CSS3一个炫酷动画通过下边的代码可以看到这个例子的html代码还是很简单的,中间类似图标的部分是通过给两个围绕盒子爬的虫子通过给 HTML代码 CSS代码 body{ margin: 0; b ...
flash相册制作软件模板_儿童照片相册模板怎么制作炫酷视频相册
相片拍了一大堆但不晓得怎样分类整理,妈妈们是不是也会碰到这些的烦恼?不妨用狸窝照片制作视频软件把活泼可爱的儿童照片制作成炫酷视频相册,还能够搭配上超级可爱温暖的音乐歌曲.这些不但存储和收看起來都是会更 ...
html border阴影效果_一篇文章教会你使用html+css3制作炫酷效果
[一.项目背景] 在浏览一些网站的时候,经常会看到很多的炫酷的效果去装饰页面,使它看起来更高端大气一些.比如,艺龙就采用了图片上加载文字,点击图片使把对应的图片放大,使用户清晰,直观的看到内容.这种效 ...
js中select下拉框重置_如何利用CSS3制作炫酷的下拉框
很多小伙伴都不清楚CSS3是做什么?用途是什么? 接下来我就给展示一个css3制作一个炫酷下拉框.其实不只是这些,还有很多. CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,200 ...
html飞机动画,基于纯CSS3纸飞机炫酷动画特效
简要教程 Flyaway.css是一款使用纯CSS3制作的炫酷纸飞机动画特效.Flyout模式可以应用于登录页面,信息发送成功,如果填的信息有误,可以使用Shake模式,代表信息输入有误. Flyaw ...
css3 制作炫酷的发光文字动画
布局: <body><h2><span style="--i:1;">H</span><span style="-- ...
css3制作炫酷导航栏效果转
今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...

css3制作炫酷动画相册

css3制作炫酷动画相册相关推荐

最新文章

热门文章