用css做一个3d相册

用css做一个简单的3D相册

话不多说，先看代码

  <style>@keyframes anima {0% {transform: rotateY(0deg);}100% {transform: rotateY(360deg);}}body {perspective: 800px;transform-style: preserve-3d;}.box {margin: 300px auto;  width: 300px;height: 200px;transform: rotateX(20deg);transform-style: preserve-3d;animation: anima 16s linear infinite;}.box img {position: absolute;width: 300px;height: 200px;}.box img:nth-child(1) {transform: rotateY(45deg) translateZ(500px);}.box img:nth-child(2) {transform: rotateY(90deg) translateZ(500px);}.box img:nth-child(3) {transform: rotateY(135deg) translateZ(500px);}.box img:nth-child(4) {transform: rotateY(180deg) translateZ(500px);}.box img:nth-child(5) {transform: rotateY(225deg) translateZ(500px);}.box img:nth-child(6) {transform: rotateY(270deg) translateZ(500px);}.box img:nth-child(7) {transform: rotateY(315deg) translateZ(500px);}.box img:nth-child(8) {transform: rotateY(360deg) translateZ(500px);}.box img:nth-child(9) {transform: rotateY(0) translateZ(0);animation: img9 16s infinite linear;}@keyframes img9 {0% {transform: rotateY(0deg);}100% {transform: rotateY(-360deg);}}</style>
</head><body><div class="box"><img src="1.jpeg" alt=""><img src=".2.jpeg" alt=""><img src="3.jpeg" alt=""><img src="4.jpeg" alt=""><img src="5.jpeg" alt=""><img src="6.jpeg" alt=""><img src="7.jpeg" alt=""><img src="8.jpeg" alt=""><img src="9.jpeg" alt=""></div>
</body>

这主要就是一个transforms属性的使用，让每个图片绕y轴旋转一定的角度，再通过移动z轴达到3d的静态效果，还得在父级上加上 perspective、 transform-style: preserve-3d;这两个属性，perspective 属性定义 3D 元素距视图的距离，transform–style属性指定嵌套元素是怎样在三维空间中呈现。这样再加上一个动画旋转效果，一个简单的3d动态相册就做好了。

2.用css做一个简单的进度条效果
话不多说，先看代码

<style>.jdt {width: 300px;height: 20px;border: 1px solid red;}.jdt-1 {width: 0;height: 100%;background: linear-gradient(to right, #f0f, #0ff);transition: all 3s ease-in;}.jdt:hover .jdt-1 {width: 100%;}</style>
</head><body><div class="jdt"><div class="jdt-1"></div></div>
</body>

一个过渡的hover效果。

用css做一个3d相册相关推荐

每日一技：给女友用代码做一个3D旋转相册，每天亿遍忘记初恋~
前言不会表白?!我来教你给女朋友或者正在追求的妹子一点小惊喜~ 今天这篇文章就是演示给女友做一个3D旋转相册,学会的小伙伴可以给自己的女朋友或者喜欢的女生做一个,相比几百上千的礼物,零成本的技术实现 ...
如何用css实现一个3D旋转照片墙
一.前言学习前端是件很有趣的事,今天我又来分享一下关于html+css实现的3D效果的照片墙的代码啦,希望感兴趣的小伙伴会喜欢! 正文: 今天,我们要做一个3D旋转相册,首先让我们了 ...
用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~...
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
超炫html+css+javascript幻化3D相册 (含背景音乐)程序员表白必备 _520_七夕情人节
❉ 超炫html+css+javascript幻化3D相册 (含背景音乐)程序员表白必备 _520_七夕情人节一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或 ...
使用html+css+js实现3D相册
使用html+css+js实现3D相册,快来上传的照片吧效果图: 代码如下,复制即可用: <!DOCTYPE html> <html lang="en"> ...
使用css做一个右向的三角箭头
使用css做一个右向的三角箭头:如图使用css 的border 属性,将下.左边框设置宽度为零,使用transfrom属性将图案旋转 45度.即可得到三角箭头 .icon-v-right {widt ...
如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
【CSS】如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
7.纯 CSS 创作一个 3D 文字跑马灯特效
7.纯 CSS 创作一个 3D 文字跑马灯特效原文地址:https://segmentfault.com/a/1190000014663038 感想:简单的从右到左动画 HTML代码: <di ...

用css做一个3d相册

用css做一个简单的3D相册

用css做一个3d相册相关推荐

最新文章

热门文章