精华内容
下载资源
问答
  • 纯CSS实现鼠标经过3D立体动态展示图片特效代码 @charset "utf-8"; *{ margin:0; padding:0; } body{ max-width: 100%; min-width: 100%; height: 100%; background-size: cover; background-repeat:...
  • 这是一个送给女朋友的3D立体动态相册,现在分享给大家,希望大家可以通过此文件了解到编程的乐趣,同时也希望兄弟们都可以追上自己心仪的那个Ta
  • 动感箭头炫酷图片切换效果,模拟网页tab标签切换,动态ppt相册模板。
  • 第一步:把monoslideshow文件夹上传到blog目录中(博客安在哪个目录,就上传到哪个目录)  第二步:PJblog日志中的写法(FCKeditor编辑器唯一写法,效果只支持IE,不支持FF,因为编辑器会过滤掉embed,没办法)注意:xml...
  • 电子相册 结婚相册制作 动态相册制作 flash相册 动画
  • 抖音上很火的3D立体动态相册

    万次阅读 多人点赞 2019-11-29 09:54:10
    动态效果图 源码Demo: 一、新建一个index.html的文件,代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纯CSS实现鼠标经过3D立体动态展示图片特效...
    带背景音乐网站效果:
    http://www.fengzhao.icu/photos/html/%E6%8A%96%E9%9F%B3%E4%B8%8A%E5%BE%88%E7%81%AB%E7%9A%843D%E7%AB%8B%E4%BD%93%E5%8A%A8%E6%80%81%E7%9B%B8%E5%86%8C.html

    如何创建网站:参考我的这篇文章

    https://blog.csdn.net/allen_csdns/article/details/103487917

    动态效果图

    在这里插入图片描述
    另外有需要带背景音乐的效果联系我

    源码Demo:

    一、新建一个index.html的文件,代码如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>纯CSS实现鼠标经过3D立体动态展示图片特效代码</title>
    <!-- <link type="text/css" href="../css/抖音上很火的3D立体动态相册.css" rel="stylesheet" /> -->
    <style>
    *{
    	margin:0;
    	padding:0;
    }
    body{
    	max-width: 100%;
    	min-width: 100%;
    	height: 100%;
    	background-size: cover;
    	background-repeat: no-repeat;
    	background-attachment: fixed;
    	background-size:100% 100%;
    	position: absolute;
    	margin-left: auto;
    	margin-right: auto;
    }
    li{
    	list-style: none;
    }
    .box{
    	width:200px;
    	height:200px;
    	background-size: cover;
    	background-repeat: no-repeat;
    	background-attachment: fixed;
    	background-size:100% 100%;
    	position: absolute;
    	margin-left: 42%;
    	margin-top: 22%;
    	-webkit-transform-style:preserve-3d;
    	-webkit-transform:rotateX(13deg);
    	-webkit-animation:move 5s linear infinite;
    }
    .minbox{
    	width:100px;
    	height:100px;
    	position: absolute;
    	left:50px;
    	top:30px;
    	-webkit-transform-style:preserve-3d;
    }
    .minbox li{
    	width:100px;
    	height:100px;
    	position: absolute;
    	left:0;
    	top:0;
    }
    .minbox li:nth-child(1){
    	background: url(../img/01.png) no-repeat 0 0;
    	-webkit-transform:translateZ(50px);
    }
    .minbox li:nth-child(2){
    	background: url(../img/02.png) no-repeat 0 0;
    	-webkit-transform:rotateX(180deg) translateZ(50px);
    }
    .minbox li:nth-child(3){
    	background: url(../img/03.png) no-repeat 0 0;
    	-webkit-transform:rotateX(-90deg) translateZ(50px);
    }
    .minbox li:nth-child(4){
    	background: url(../img/04.png) no-repeat 0 0;
    	-webkit-transform:rotateX(90deg) translateZ(50px);
    }
    .minbox li:nth-child(5){
    	background: url(../img/05.png) no-repeat 0 0;
    	-webkit-transform:rotateY(-90deg) translateZ(50px);
    }
    .minbox li:nth-child(6){
    	background: url(../img/06.png) no-repeat 0 0;
    	-webkit-transform:rotateY(90deg) translateZ(50px);
    }
    .maxbox li:nth-child(1){
    	background: url(../img/1.png) no-repeat 0 0;
    	-webkit-transform:translateZ(50px);
    }
    .maxbox li:nth-child(2){
    	background: url(../img/2.png) no-repeat 0 0;
    	-webkit-transform:translateZ(50px);
    }
    .maxbox li:nth-child(3){
    	background: url(../img/3.png) no-repeat 0 0;
    	-webkit-transform:rotateX(-90deg) translateZ(50px);
    }
    .maxbox li:nth-child(4){
    	background: url(../img/4.png) no-repeat 0 0;
    	-webkit-transform:rotateX(90deg) translateZ(50px);
    }
    .maxbox li:nth-child(5){
    	background: url(../img/5.png) no-repeat 0 0;
    	-webkit-transform:rotateY(-90deg) translateZ(50px);
    }
    .maxbox li:nth-child(6){
    	background: url(../img/6.png) no-repeat 0 0;
    	-webkit-transform:rotateY(90deg) translateZ(50px);
    }
    .maxbox{
    	width: 800px;
    	height: 400px;
    	position: absolute;
    	left: 0;
    	top: -20px;
    	-webkit-transform-style: preserve-3d;
    	
    }
    .maxbox li{
    	width: 200px;
    	height: 200px;
    	background: #fff;
    	border:1px solid #ccc;
    	position: absolute;
    	left: 0;
    	top: 0;
    	opacity: 0.2;
    	-webkit-transition:all 1s ease;
    }
    .maxbox li:nth-child(1){
    	-webkit-transform:translateZ(100px);
    }
    .maxbox li:nth-child(2){
    	-webkit-transform:rotateX(180deg) translateZ(100px);
    }
    .maxbox li:nth-child(3){
    	-webkit-transform:rotateX(-90deg) translateZ(100px);
    }
    .maxbox li:nth-child(4){
    	-webkit-transform:rotateX(90deg) translateZ(100px);
    }
    .maxbox li:nth-child(5){
    	-webkit-transform:rotateY(-90deg) translateZ(100px);
    }
    .maxbox li:nth-child(6){
    	-webkit-transform:rotateY(90deg) translateZ(100px);
    }
    .box:hover ol li:nth-child(1){
    	-webkit-transform:translateZ(300px);
    	width: 400px;
    	height: 400px;
    	opacity: 0.8;
    	left: -100px;
    	top: -100px;
    }
    .box:hover ol li:nth-child(2){
    	-webkit-transform:rotateX(180deg) translateZ(300px);
    	width: 400px;
    	height: 400px;
    	opacity: 0.8;
    	left: -100px;
    	top: -100px;
    }
    .box:hover ol li:nth-child(3){
    	-webkit-transform:rotateX(-90deg) translateZ(300px);
    	width: 400px;
    	height: 400px;
    	opacity: 0.8;
    	left: -100px;
    	top: -100px;
    }
    .box:hover ol li:nth-child(4){
    	-webkit-transform:rotateX(90deg) translateZ(300px);
    	width: 400px;
    	height: 400px;
    	opacity: 0.8;
    	left: -100px;
    	top: -100px;
    }
    .box:hover ol li:nth-child(5){
    	-webkit-transform:rotateY(-90deg) translateZ(300px);
    	width: 400px;
    	height: 400px;
    	opacity: 0.8;
    	left: -100px;
    	top: -100px;
    }
    .box:hover ol li:nth-child(6){
    	-webkit-transform:rotateY(90deg) translateZ(300px);
    	width: 400px;
    	height: 400px;
    	opacity: 0.8;
    	left: -100px;
    	top: -100px;
    }
    @keyframes move{
    	0%{
    		-webkit-transform: rotateX(13deg) rotateY(0deg);
    	}
    	100%{
    		-webkit-transform:rotateX(13deg) rotateY(360deg);
    	}
    }
    /*背景音乐*/
    .m-main{width:1200px; height: 60px;margin: 0 auto}
    .m-main video{display: none; }
    .m-main .player {
        width: 100%;
        height: 60px;
        position: relative;
        bottom: 0;
    }
    .m-main .player>a{display: inline-block; width: 20px; margin: 0 auto; padding: 10px; color: #FFF; text-align: center;float: left;font-size: 12px}
    .m-main .player>a img{
        width: 20px;
        height: 20px;
        position: absolute;
        top: 20px;
        left: 41px;
    }
    #img1{
        display: block;
    }
    #img2{
        display: none;
    }
    .m-main .play-box {
        width: 1070px;
        height: 60px;
        margin: 0 auto;
        position: absolute;
        top: 0;
        right: 0;
    }
    .m-main .play-box .left {
        width: 100%;
        float: left;
    }
    .m-main .play-box .left p.timeline { width: 83%;height: 10px; background-color: rgba(216, 216, 216, 0.5); border-radius: 5px; margin:30px auto 0; position: relative; z-index: 2; }
    .m-main .play-box .left p.timeline span {position: relative; width: 0; height: 10px; background-color: #D3EEDF; border-radius: 5px; display: block; -webkit-transition: width ease-out 0.3s;-o-transition: width ease-out 0.3s;transition: width ease-out 0.3s;}
    .m-main .play-box .left p.timeline span:after{content: ""; position: absolute; top: -4px; right:-0.6rem;width: 1.2rem; height:1.2rem; border-radius: 50%;background-color: green;}
    .m-main .play-box .left div.info { height: 26px; line-height: 26px; font-size: 14px; color: #9A9A9A; position: relative; top: -18px; margin:0 10px; z-index: 1;}
    .m-main .play-box .left div.info .size { float: left; display: block;}
    .m-main .play-box .left div.info .timeshow { float: right; display: block;margin-right: 30px}
    </style>
    </style>
    </head>
    <body>
    <div class="box">
    	<ul class="minbox">
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    	</ul>
    	<ol class="maxbox">
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    	</ol>
    </div>
    <div class="m-main">
    		<div class="player">
    			<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" id="js-play">
    				<img src="../img/play-btn_03.png" alt="" id="img1"/>
    			</a>
    			<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" id="js-pause">
    				<img src="../img/pause.png" alt="" id="img2"/>
    			</a>
    			<div class="play-box">
    				<div class="left">
    					<p class="timeline"><span style=""></span></p>
    					<div class="info">
    						<span class="size">00:00</span>
    						<span class="timeshow">00:00</span>
    					</div>
    				</div>
    			</div>
    		</div>
    		<div class="video">
    			<video controls autoplay name="media" id="js-video"><source src="http://chipsguide.snaillove.com/Public/Uploads/file_server_storage/Audio/2017/03/23/19/192_20003137.mp3" type="video/mp4"></video>
    		</div>
    	</div>
    </div>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
    	$(function(){
    		AudioControl('js-video');
    		function AudioControl(id){
    			// 音频控制进度条
    			var audio = document.getElementById(id);
    			$(audio).on('loadedmetadata',function(){
    				audio.pause();
    				// 进度条控制
    				$(document).on('touchend','.timeline',function(e){
    					var x = e.originalEvent.changedTouches[0].clientX-this.offsetLeft;
    					var X = x < 0 ? 0 : x ;
    					var W = $(this).width();
    					var place = X > W ? W : X;
    					audio.currentTime = (place/W).toFixed(2)*audio.duration;
    					$(this).children().css({width:(place/W).toFixed(2)*100+"%"})
    				});
    				// 播放
    				$(document).on('click','#js-play',function(){
    					audio.play()
    				});
    				// 暂停
    				$(document).on('click','#js-pause',function(){
    					audio.pause()
    				});
    			});
    			setInterval(function () {
    				var currentTime = audio.currentTime;
    				setTimeShow(currentTime);
    			}, 1000);
    			// 设置播放时间
    			function setTimeShow(t) {
    				t = Math.floor(t);
    				var playTime = secondToMin(audio.currentTime);
    				$(".size").html(playTime);
    				$('.timeshow').text(secondToMin(audio.duration));
    				$('.timeline').children().css({width:(t/audio.duration).toFixed(4)*100+"%"})
    			}
    			// 计算时间
    			function secondToMin(s) {
    				var MM = Math.floor(s / 60);
    				var SS = s % 60;
    				if (MM < 10)
    					MM = "0" + MM;
    				if (SS < 10)
    					SS = "0" + SS;
    				var min = MM + ":" + SS;
    				return min.split('.')[0];
    			}
    		}
    	})
    </script>
    <script>
    	var $img1=$('#img1');
    	var $img2=$('#img2');
    	$img1.click(function(){
    		$img1.css({
    			'display':'none'
    		});
    		$img2.css({
    			'display':'block'
    		});
    	});
    	$img2.click(function(){
    		$img2.css({
    			'display':'none'
    		});
    		$img1.css({
    			'display':'block'
    		});
    	});
    </script>
    </body>
    </html>
    

    公众号:
    在这里插入图片描述
    微信:在这里插入图片描述

    展开全文
  • 效果 教程部分 1 图片导入与大小重设 需要有一个名为album的文件夹和当前m文件在同一文件夹,另外ablum文件夹内至少要有一张jpg格式图片 path='.\album\';%文件夹名称 files=dir(fullfile(path,'*.jpg'));...

    效果

    在这里插入图片描述
    在这里插入图片描述

    教程部分

    1 图片导入与大小重设

    需要有一个名为album的文件夹和当前m文件在同一文件夹,另外ablum文件夹内至少要有一张jpg格式图片

    path='.\album\';%文件夹名称
    files=dir(fullfile(path,'*.jpg')); 
    picNum=size(files,1);
    
    %遍历路径下每一幅图像
    for i=1:picNum
       fileName=strcat(path,files(i).name); 
       img=imread(fileName);
       img=imresize(img,[120,120]);
       imgSet{i}=img;
    end
    

    我们注意到,这里用了一次imresize将突破变为120x120大小,这里重设大小有三个作用:

    • 将不是方形的图片变为方形
    • 将图像设置固定大小,方便构造网格放置图片
    • 120x120的大小大约是能让图片表示清晰为前提下最小的大小,图片太大的话运行会卡,太小的话不清晰

    2 fig axes设置

    % fig axes设置
    fig=figure('units','pixels','position',[50 50 600 600],...
                           'Numbertitle','off','resize','off',...
                           'name','album3d','menubar','none');
    ax=axes('parent',fig,'position',[-0.5 -0.5 2 2],...
       'XLim', [-6 6],...
       'YLim', [-6 6],...
       'ZLim', [-6 6],...
       'Visible','on',...
       'XTick',[], ...
       'YTick',[],...
       'Color',[0 0 0],...
       'DataAspectRatioMode','manual',...
       'CameraPositionMode','manual');
    hold(ax,'on')
    

    大部分设置大家都能看懂,这里讲解一下一些比较少见的设置:

    2.1 为什么 axes的’position’属性不设置[0 0 1 1]?

    因为是3D坐标轴,设置为[0 0 1 1]后旋转起来效果是这样的,所以我们axes要设置的比figure大一圈:

    在这里插入图片描述

    2.2 为什么要设置CameraPositionMode这一奇怪的属性?

    因为我们后期要频繁改变CameraPosition这一属性,而CameraPositionMode设置为manual可以让视角完全按照CameraPosition的数值来调整,至于为什么要调整视角呢?
    ,
    当然是因为如果对图像位置数据进行处理数据量会贼大,因此我们不妨直接转动axes视角而非转动图片。

    3 绘制图形句柄

    就是绘制小型立方体,中型立方体和大型立方体,其中鼠标移动到中型立方体中心时中型立方体变成大型立方体,这个可以靠设置图形对象的XData,YData,ZData数值来改变

    3.1 构造网格

    由于surf曲面图可以将图像贴在上面,还可以设置透明度,我们决定用surf函数来绘制,要贴图首先要将曲面绘制出来,就要先构造曲面网格:

    % 用于绘制图片的网格
    [XMesh,YMesh]=meshgrid(linspace(-1,1,120),linspace(-1,1,120));
    ZMesh=ones(120,120);
    
    3.2 绘制小型立方体
    % 绘制图片立方体
    surfPic(1)=surf(XMesh,YMesh,ZMesh,'CData',imgSet{mod(0,picNum)+1},'EdgeColor','none','FaceColor','interp');
    surfPic(2)=surf(XMesh,YMesh(end:-1:1,:),-ZMesh,'CData',imgSet{mod(1,picNum)+1},'EdgeColor','none','FaceColor','interp');
    surfPic(3)=surf(ZMesh,XMesh,YMesh(end:-1:1,:),'CData',imgSet{mod(2,picNum)+1},'EdgeColor','none','FaceColor','interp');
    surfPic(4)=surf(XMesh,ZMesh,YMesh(end:-1:1,:),'CData',imgSet{mod(3,picNum)+1},'EdgeColor','none','FaceColor','interp');
    surfPic(5)=surf(-ZMesh,XMesh,YMesh(end:-1:1,:),'CData',imgSet{mod(4,picNum)+1},'EdgeColor','none','FaceColor','interp');
    surfPic(6)=surf(XMesh,-ZMesh,YMesh(end:-1:1,:),'CData',imgSet{mod(5,picNum)+1},'EdgeColor','none','FaceColor','interp');
    

    在这里插入图片描述

    3.3 绘制中型立方体

    有了小型立方体,中型的绘制起来就简单了起来,甚至可以用一个for循环解决,只需要循环提取小型立方体的XData,YData,ZData数据后乘以1.5绘制图像,并设置透明度即可:

    % 依靠小立方体数据绘制中等立方体
    for i=1:6
        surfPicA(i)=surf(surfPic(i).XData.*1.5,surfPic(i).YData.*1.5,surfPic(i).ZData.*1.5,...
            'CData',surfPic(i).CData,'EdgeColor','none','FaceColor','interp','FaceAlpha',0.7);  
    end
    

    在这里插入图片描述

    3.4 大型立方体参数设置

    大型立方体参数设置时就没那么简单,如果直接乘以2.5,图片与图片之间会没有缝隙,因此我们XData,YData,ZData数据虽然都要变大,但是要乘以不一样的数值,而且各个方向上乘的数值不同,因此我们可以事先设立一个矩阵,用来存储其参数:

    % 用来调整放大比例的矩阵
    resizeMat=[2 2 2.5;2 2 2.5;2.5 2 2;
               2 2.5 2;2.5 2 2;2 2.5 2];
    

    想直接画大型正方形可以试试如下代码:

    % 最大图片绘制       
    % for i=1:6
    %     surfPicB(i)=surf(surfPic(i).XData.*resizeMat(i,1),...
    %                      surfPic(i).YData.*resizeMat(i,2),...
    %                      surfPic(i).ZData.*resizeMat(i,3),...
    %                      'CData',surfPic(i).CData,'EdgeColor',...
    %                      'none','FaceColor','interp','FaceAlpha',0.7);  
    % end    
    

    4 立方体旋转

    我们只需要设置一个timer函数不断调整CameraPosition即可:

    fps=40;theta=0;
    rotateTimer=timer('ExecutionMode', 'FixedRate', 'Period',1/fps, 'TimerFcn', @rotateCube);
    start(rotateTimer)
    
        function rotateCube(~,~)
            theta=theta+0.02;
            ax.CameraPosition=[cos(theta)*5*sqrt(2),sin(theta)*5*sqrt(2),5];
        end
    

    在这里插入图片描述

    5 获取鼠标与中心点的距离

    本来想直接在timer调用的函数里写get(fig,‘CurrentPoint’);来获得鼠标当前位置的,但发现这样写只有鼠标点击窗口才会有反应,并不是鼠标移动就会有反应,因此我们再构造一个WindowButtonMotionFcn回调,!!!这一部分代码要写在上一步代码的前面!!!

    lastDis=300;
    preDis=300;
    set(fig,'WindowButtonMotionFcn',@move2center)    
        function move2center(~,~)
            xy=get(fig,'CurrentPoint');
            preDis=sqrt(sum((xy-[300,300]).^2));
        end
    

    preDis就是鼠标到图片中心的位置,我为什么要设置一个lastDis呢,因为每次移动鼠标都更新图像实在太卡了,因此我们要加一个判定,当且仅当以下两种情况更新图片大小

    • 之前鼠标距离中心>=150,现在<150
    • 之前鼠标距离中心<150,现在>=150

    6 鼠标移动到fig中心时更新图片

    将之前的rotateCube函数改成这样:

    function rotateCube(~,~)
            theta=theta+0.02;
            ax.CameraPosition=[cos(theta)*5*sqrt(2),sin(theta)*5*sqrt(2),5];
            if (~all([preDis lastDis]<150))&&any([preDis lastDis]<150)
                for ii=1:6
                    if preDis<150
                        surfPicA(ii).XData=surfPic(ii).XData.*resizeMat(ii,1);
                        surfPicA(ii).YData=surfPic(ii).YData.*resizeMat(ii,2);
                        surfPicA(ii).ZData=surfPic(ii).ZData.*resizeMat(ii,3);
                    else
                        surfPicA(ii).XData=surfPic(ii).XData.*1.5;
                        surfPicA(ii).YData=surfPic(ii).YData.*1.5;
                        surfPicA(ii).ZData=surfPic(ii).ZData.*1.5;
                    end
                end
            end
            lastDis=preDis;
        end
    

    其中:

    (~all([preDis lastDis]<150))&&any([preDis lastDis]<150)

    是用来判断上一次鼠标位置和当前鼠标位置是否只有一个距离中心<150

    另:

    for 循环中使用else来判断应该绘制大图片还是中等图片

    完整代码

    function album3d
    path='.\album\';%文件夹名称
    files=dir(fullfile(path,'*.jpg')); 
    picNum=size(files,1);
    
    %遍历路径下每一幅图像
    for i=1:picNum
       fileName=strcat(path,files(i).name); 
       img=imread(fileName);
       img=imresize(img,[120,120]);
       imgSet{i}=img;
    end
    
    % fig axes设置
    fig=figure('units','pixels','position',[50 50 600 600],...
                           'Numbertitle','off','resize','off',...
                           'name','album3d','menubar','none');
    ax=axes('parent',fig,'position',[-0.5 -0.5 2 2],...
       'XLim', [-6 6],...
       'YLim', [-6 6],...
       'ZLim', [-6 6],...
       'Visible','on',...
       'XTick',[], ...
       'YTick',[],...
       'Color',[0 0 0],...
       'DataAspectRatioMode','manual',...
       'CameraPositionMode','manual');
    hold(ax,'on')
    ax.CameraPosition=[5 5 5];
    
    % 用于绘制图片的网格
    [XMesh,YMesh]=meshgrid(linspace(-1,1,120),linspace(-1,1,120));
    ZMesh=ones(120,120);
    
    % 绘制图片立方体
    surfPic(1)=surf(XMesh,YMesh,ZMesh,'CData',imgSet{mod(0,picNum)+1},'EdgeColor','none','FaceColor','interp');
    surfPic(2)=surf(XMesh,YMesh(end:-1:1,:),-ZMesh,'CData',imgSet{mod(1,picNum)+1},'EdgeColor','none','FaceColor','interp');
    surfPic(3)=surf(ZMesh,XMesh,YMesh(end:-1:1,:),'CData',imgSet{mod(2,picNum)+1},'EdgeColor','none','FaceColor','interp');
    surfPic(4)=surf(XMesh,ZMesh,YMesh(end:-1:1,:),'CData',imgSet{mod(3,picNum)+1},'EdgeColor','none','FaceColor','interp');
    surfPic(5)=surf(-ZMesh,XMesh,YMesh(end:-1:1,:),'CData',imgSet{mod(4,picNum)+1},'EdgeColor','none','FaceColor','interp');
    surfPic(6)=surf(XMesh,-ZMesh,YMesh(end:-1:1,:),'CData',imgSet{mod(5,picNum)+1},'EdgeColor','none','FaceColor','interp');
    
    % 依靠小立方体数据绘制中等立方体
    for i=1:6
        surfPicA(i)=surf(surfPic(i).XData.*1.5,surfPic(i).YData.*1.5,surfPic(i).ZData.*1.5,...
            'CData',surfPic(i).CData,'EdgeColor','none','FaceColor','interp','FaceAlpha',0.7);  
    end
    
    % 用来调整放大比例的矩阵
    resizeMat=[2 2 2.5;2 2 2.5;2.5 2 2;
               2 2.5 2;2.5 2 2;2 2.5 2];
    
    % 最大图片绘制       
    % for i=1:6
    %     surfPicB(i)=surf(surfPic(i).XData.*resizeMat(i,1),...
    %                      surfPic(i).YData.*resizeMat(i,2),...
    %                      surfPic(i).ZData.*resizeMat(i,3),...
    %                      'CData',surfPic(i).CData,'EdgeColor',...
    %                      'none','FaceColor','interp','FaceAlpha',0.7);  
    % end     
    
    
    lastDis=300;
    preDis=300;
    set(fig,'WindowButtonMotionFcn',@move2center)    
        function move2center(~,~)
            xy=get(fig,'CurrentPoint');
            preDis=sqrt(sum((xy-[300,300]).^2));
        end
    
    
    
    fps=40;theta=0;
    rotateTimer=timer('ExecutionMode', 'FixedRate', 'Period',1/fps, 'TimerFcn', @rotateCube);
    start(rotateTimer)
    
    
    
        function rotateCube(~,~)
            theta=theta+0.02;
            ax.CameraPosition=[cos(theta)*5*sqrt(2),sin(theta)*5*sqrt(2),5];
            if (~all([preDis lastDis]<150))&&any([preDis lastDis]<150)
                for ii=1:6
                    if preDis<150
                        surfPicA(ii).XData=surfPic(ii).XData.*resizeMat(ii,1);
                        surfPicA(ii).YData=surfPic(ii).YData.*resizeMat(ii,2);
                        surfPicA(ii).ZData=surfPic(ii).ZData.*resizeMat(ii,3);
                    else
                        surfPicA(ii).XData=surfPic(ii).XData.*1.5;
                        surfPicA(ii).YData=surfPic(ii).YData.*1.5;
                        surfPicA(ii).ZData=surfPic(ii).ZData.*1.5;
                    end
                end
            end
            lastDis=preDis;
        end
    
    
    
    
    % 弃用方案:太卡
    % set(fig,'WindowButtonMotionFcn',@move2center)    
    %     function move2center(~,~)
    %         xy=get(fig,'CurrentPoint');
    %         dis=sum((xy-[300,300]).^2);
    %         for ii=1:6
    %             if dis<200
    %                 surfPicA(ii).XData=surfPic(ii).XData.*resizeMat(ii,1);
    %                 surfPicA(ii).YData=surfPic(ii).YData.*resizeMat(ii,2);
    %                 surfPicA(ii).ZData=surfPic(ii).ZData.*resizeMat(ii,3);
    %             else
    %                 surfPicA(ii).XData=surfPic(ii).XData;
    %                 surfPicA(ii).YData=surfPic(ii).YData;
    %                 surfPicA(ii).ZData=surfPic(ii).ZData;
    %             end    
    %         end
    %         
    %         
    %         
    %     end
    
    end
    
    展开全文
  • html+css实现多种动态相册

    万次阅读 多人点赞 2019-07-21 16:45:53
    电子相册 全屏背景切换 照片墙 百叶窗 3d照片墙 立方体相册 代码

    电子相册

    原理:由a标签的锚点进行图片上的切换,左侧大图用verflow: hidden进行隐藏,右侧小图用overflow: scroll进行显示。
    HTML:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="../css/ElectronAlbum.css"/>
    	</head>
    	<body>
    		<div class="box">
    			<h1>电子相册</h1>
    			<ul class="list1">
    				<li><img src="../img/danji.jpg" id="img1"></li>
    				<li><img src="../img/dianwei.jpg" id="img2"></li>
    				<li><img src="../img/diaochan.jpg" id="img3"></li>
    				<li><img src="../img/lanlinwang.jpg" id="img4"></li>
    				<li><img src="../img/luban.jpg" id="img5"></li>
    				<li><img src="../img/zhaoyun.jpg" id="img6"></li>
    				<li><img src="../img/zhugeliang.jpg" id="img7"></li>
    				<li><img src="../img/kai.jpg" id="img8"></li>
    			</ul>
    			<ul class="list2">
    				<li><a href="#img1"><img src="../img/danji.jpg"></a></li>
    				<li><a href="#img2"><img src="../img/dianwei.jpg"></a></li>
    				<li><a href="#img3"><img src="../img/diaochan.jpg"></a></li>
    				<li><a href="#img4"><img src="../img/lanlinwang.jpg"></a></li>
    				<li><a href="#img5"><img src="../img/luban.jpg"></a></li>
    				<li><a href="#img6"><img src="../img/zhaoyun.jpg"></a></li>
    				<li><a href="#img7"><img src="../img/zhugeliang.jpg"></a></li>
    				<li><a href="#img8"><img src="../img/kai.jpg"></a></li>
    			</ul>
    		</div>
    	</body>
    </html>
    

    CSS

    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	background: #333;
    }
    
    li {
    	list-style: none;
    }
    
    h1 {
    	text-align: center;
    	height: 50px;
    	line-height: 50px;
    	color: #FFFFFF;
    }
    .box{
    	width: 660px;
    	height: 320px;
    	margin: 200px auto;
    	border: 5px solid white;
    	box-shadow: 0px 0px 10px black;
    }
    .list1,.list2{
    	float: left;
    }
    .list1{
    	width: 480px;
    	height: 270px;
    	overflow: hidden;
    }
    .list2{
    	width: 180px;
    	height: 270px;
    	overflow: scroll;
    }
    .list1 img{
    	width: 480px;
    	height: 270px;
    }
    .list2 img{
    	width: 160px;
    	height: 90px;
    }
    

    全屏背景切换

    原理:和电子相册类似用a标签进行图片的切换,设置图片原来的位置以及点击a标签后的:target属性,设置动画效果。
    HTML:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>FullPhoto</title>
    		<link rel="stylesheet" type="text/css" href="../css/FullPhoto.css"/>
    	</head>
    	<body>
    		<div class="box">
    			<img src="../img/dianwei.jpg" id="img1">
    			<img src="../img/diaochan.jpg" id="img2">
    			<img src="../img/lanlinwang.jpg" id="img3">
    			<img src="../img/sunshangxiang.jpg" id="img4">
    			<img src="../img/luban.jpg" id="img5">
    		</div>
    		<div class="list">
    			<ul>
    				<li><a href="#img1"><img src="../img/dianwei.jpg"></a></li>
    				<li><a href="#img2"><img src="../img/diaochan.jpg"></a></li>
    				<li><a href="#img3"><img src="../img/lanlinwang.jpg"></a></li>
    				<li><a href="#img4"><img src="../img/sunshangxiang.jpg"></a></li>
    				<li><a href="#img5"><img src="../img/luban.jpg"></a></li>
    			</ul>
    		</div>
    	</body>
    </html>
    

    CSS:

    * {
    	margin: 0;
    	padding: 0;
    }
    
    .box {
    	width: 100%;
    	height: 100%;
    }
    
    .box img {
    	width: 100%;
    	height: 100%;
    	position: fixed;
    	transition: all 1s linear;
    }
    
    .list {
    	position: absolute;
    	z-index: 999;
    	width: 1000px;
    	height: auto;
    	bottom: 20px;
    	left: 0;
    	right: 0;
    	margin: auto;
    }
    
    .list li {
    	list-style: none;
    	width: 130px;
    	height: 130px;
    	border: 5px solid lightskyblue;
    	float: left;
    	margin-left: 60px;
    	overflow: hidden;
    	border-radius: 50%;
    
    }
    
    .list li img {
    	width: 200%;
    }
    
    .box img:nth-child(1) {
    	opacity: 0;
    	left: -100%;
    }
    
    .box img:nth-child(1):target {
    	z-index: 1;
    	opacity: 1;
    	left: 0;
    }
    
    .box img:nth-child(2) {
    	top: -100%;
    }
    
    .box img:nth-child(2):target {
    	z-index: 1;
    	transform: rotate(360deg);
    	top: 0;
    }
    
    .box img:nth-child(3) {
    	opacity: 0;
    	right: -100%;
    }
    
    .box img:nth-child(3):target {
    	z-index: 1;
    	opacity: 1;
    	right: 0;
    }
    
    .box img:nth-child(4) {
    	bottom: -100%;
    }
    
    .box img:nth-child(4):target {
    	z-index: 1;
    	transform: rotate(360deg);
    	bottom: 0;
    }
    
    .box img:nth-child(5) {
    	opacity: 0;
    }
    
    .box img:nth-child(5):target {
    	z-index: 1;
    	opacity: 1;
    	transform: rotate(360deg);
    }
    

    照片墙

    原理:利用悬浮属性,使鼠标悬浮在上面的图片进行相应的变化
    版本1:
    HTML:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>PhotoWall1</title>
    		<link rel="stylesheet" type="text/css" href="../css/PhotoWall1.css"/>
    	</head>
    	<body>
    		<ul>
    			<li><img src="../img/danji.jpg" ></li>
    			<li><img src="../img/dianwei.jpg" ></li>
    			<li><img src="../img/diaochan.jpg" ></li>
    			<li><img src="../img/sunshangxiang.jpg" ></li>
    			<li><img src="../img/sunwukong.jpg" ></li>
    			<li><img src="../img/luban.jpg" ></li>
    			<li><img src="../img/lanlinwang.jpg" ></li>
    			<li><img src="../img/kai.jpg" ></li>
    			<li><img src="../img/donghuang.jpg" ></li>
    		</ul>
    	</body>
    </html>
    

    CSS:

    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	background-color: #333;
    }
    
    ul {
    	width: 1020px;
    	height: 600px;
    	border: white solid 5px;
    	margin: 60px auto;
    	box-shadow: 0px 0px 10px #ccc;
    }
    
    li {
    	width: 320px;
    	height: 180px;
    	list-style: none;
    	float: left;
    	margin: 10px;
    	/* x y 扩散程度 阴影颜色*/
    	box-shadow: 0px 0px 10px white;
    }
    
    img {
    	width: 100%;
    	height: 100%;
    }
    
    img:hover {
    	width: 150%;
    	height: 150%;
    	position: relative;
    	top: -40px;
    	left: -40px;
    }
    
    

    版本2:
    HTML:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>PhotoWall2</title>
    		<link rel="stylesheet" type="text/css" href="../css/PhotoWall2.css" />
    	</head>
    	<body>
    		<div class="box">
    			<img src="../img/danji.jpg">
    			<img src="../img/dianwei.jpg">
    			<img src="../img/diaochan.jpg">
    			<img src="../img/sunshangxiang.jpg">
    			<img src="../img/sunwukong.jpg">
    			<img src="../img/luban.jpg">
    			<img src="../img/lanlinwang.jpg">
    			<img src="../img/kai.jpg">
    			<img src="../img/donghuang.jpg" >
    		</div>
    	</body>
    </html>
    

    CSS:

    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	background: url(../img/wbg.png);
    }
    .box{
    	width: 1000px;
    	margin: 0px auto;
    	margin-top: 100px;
    }
    .box img {
    	width: 320px;
    	height: 180px;
    	border: 5px solid azure;
    	box-shadow: -10px -10px 10px black;
    	transition: all 0.3s linear;
    }
    
    img:nth-child(odd) {
    	transform: rotate(20deg);
    }
    
    img:nth-child(even) {
    	transform: rotate(-20deg);
    }
    
    img:hover {
    	transform: scale(1.3);
    	position: relative;
    	z-index: 2;
    }
    

    百叶窗

    原理:当鼠标悬浮在ul标签上,所有li标签变小,悬浮的li标签变大,添加css变化动画
    HTML:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>WindowShades</title>
    		<link rel="stylesheet" type="text/css" href="../css/WindowShades.css"/>
    	</head>
    	<body>
    		<div class="box">
    			<ul>
    				<li><img src="../img/danji.jpg" ></li>
    				<li><img src="../img/dianwei.jpg" ></li>
    				<li><img src="../img/diaochan.jpg" ></li>
    				<li><img src="../img/kai.jpg" ></li>
    				<li><img src="../img/lanlinwang.jpg" ></li>
    			</ul>
    		</div>
    	</body>
    </html>
    

    CSS:

    *{
    	margin: 0;
    	padding: 0;
    }
    body{
    	background: url(../img/wbg.png);
    }
    .box{
    	width: 800px;
    	height: 360px;
    	margin: 200px auto;
    	/*溢出部分隐藏*/
    	overflow: hidden;
    }
    .box img{
    	width: 640px;
    	height: 360px;
    }
    li{
    	list-style: none;
    	width: 155px;
    	height: 360px;
    	float: left;
    	border-left: 5px solid white;
    	box-shadow: -5px 0px 10px black;
    	transition: all 0.5s linear;
    }
    /*鼠标悬浮在ul上,让ul变小*/
    .box ul:hover li{
    	width: 35px;
    }
    /*鼠标悬浮到某个li上,让li变大*/
    .box ul li:hover{
    	width: 635px;
    }
    

    3d照片墙

    原理:将图片以绝对定位的方式放在父容器内(目的是使图片重叠在一起),将每张图片旋转对应的角度(360°均分),向z轴平移适合的距离。类似于一群人想要排成一个圆圈,则需要每个人平均转向不同的方向,然后向前走出一段距离。向父容器添加旋转动画,使所有照片旋转起来。
    HTML:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>3dPhoto</title>
    		<link rel="stylesheet" type="text/css" href="../css/3dPhoto.css"/>
    	</head>
    	<body>
    		<div class="show">
    			<div class="box">
    				<img src="../img/zhugeliang.jpg" >
    				<img src="../img/sunwukong.jpg" >
    				<img src="../img/diaochan.jpg" >
    				<img src="../img/libai.jpg" >
    				<img src="../img/zhaoyun.jpg" >
    				<img src="../img/donghuang.jpg" >
    				<img src="../img/dianwei.jpg" >
    				<img src="../img/kai.jpg" >
    				<img src="../img/lanlinwang.jpg" >
    				<img src="../img/sunshangxiang.jpg" >
    			</div>
    		</div>
    	</body>
    </html>
    

    CSS:

    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	background: url(../img/wbg.png);
    }
    
    
    .box {
    	width: 320px;
    	height: 200px;
    	position: absolute;
    	top: 0;
    	bottom: 0;
    	left: 0;
    	right: 0;
    	margin: auto;
    	transform-style: preserve-3d;
    	animation: im 20s linear infinite;
    }
    
    .box img {
    	width: 100%;
    	height: 100%;
    	position: absolute;
    }
    
    @keyframes im{
    	0% {
    		transform: rotateY(0deg) rotateX(10deg);
    	}
    
    	25% {
    		transform: rotateY(90deg) rotateX(-10deg);
    	}
    
    	50% {
    		transform: rotateY(180deg) rotateX(10deg);
    	}
    
    	75% {
    		transform: rotateY(270deg) rotateX(-10deg);
    	}
    
    	100% {
    		transform: rotateY(360deg) rotateX(10deg);
    	}
    
    }
    
    /*10张图片3d变换*/
    .box img:nth-child(1) {
    	transform: rotateY(0deg) translateZ(600px);
    	backface-visibility: visible;
    }
    
    .box img:nth-child(2) {
    	transform: rotateY(36deg) translateZ(600px);
    	backface-visibility: visible;
    }
    
    .box img:nth-child(3) {
    	transform: rotateY(72deg) translateZ(600px);
    	backface-visibility: visible;
    }
    
    .box img:nth-child(4) {
    	transform: rotateY(108deg) translateZ(600px);
    	backface-visibility: visible;
    }
    
    .box img:nth-child(5) {
    	transform: rotateY(144deg) translateZ(600px);
    	backface-visibility: visible;
    }
    
    .box img:nth-child(6) {
    	transform: rotateY(180deg) translateZ(600px);
    	backface-visibility: visible;
    }
    
    .box img:nth-child(7) {
    	transform: rotateY(216deg) translateZ(600px);
    	backface-visibility:visible;
    }
    
    .box img:nth-child(8) {
    	transform: rotateY(252deg) translateZ(600px);
    	backface-visibility: visible;
    }
    
    .box img:nth-child(9) {
    	transform: rotateY(288deg) translateZ(600px);
    	backface-visibility: visible;
    }
    
    .box img:nth-child(10) {
    	transform: rotateY(324deg) translateZ(600px);
    	backface-visibility: visible;
    }
    

    立方体相册

    原理:将ul下6个li标签进行绝对定位,6个li标签分别转向6个方向,向Z轴的两个方向扩展立方体边长的一半。
    HTML:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>cube</title>
    		<link rel="stylesheet" type="text/css" href="../css/cube.css"/>
    	</head>
    	<body>
    		<ul>
    			<li></li>
    			<li></li>
    			<li></li>
    			<li></li>
    			<li></li>
    			<li></li>
    		</ul>
    	</body>
    </html>
    

    CSS:

    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	background: #333;
    }
    
    ul {
    	width: 300px;
    	height: 300px;
    	position: absolute;
    	top: 0;
    	bottom: 0;
    	left: 0;
    	right: 0;
    	margin: auto;
    	/*3d空间*/
    	transform-style: preserve-3d;
    	animation: box 20s linear infinite;
    }
    
    @keyframes box {
    
    	/*3d旋转 x y z deg*/
    	from {
    		transform: rotate3d(0, 0, 0, 0deg);
    	}
    
    	to {
    		transform: rotate3d(1, 1, 1, 360deg);
    	}
    }
    
    li {
    	width: 300px;
    	height: 300px;
    	list-style: none;
    	border: 1px solid black;
    	position: absolute;
    	opacity: 0.8;
    	box-shadow: 0px 0px 10px white;
    }
    
    li:nth-child(1) {
    	background: url(../img/danji.jpg);
    	background-position: center;
    	background-size: cover;
    	transform: translateZ(150px);
    }
    
    /*后*/
    li:nth-child(2) {
    	background: url(../img/donghuang.jpg);
    	background-position: center;
    	background-size: cover;
    	transform: translateZ(-150px);
    }
    
    /*左*/
    li:nth-child(3) {
    	background: url(../img/luban.jpg);
    	background-position: center;
    	background-size: cover;
    	transform: rotateY(90deg) translateZ(-150px);
    }
    
    /*右*/
    li:nth-child(4) {
    	background: url(../img/libai.jpg);
    	background-position: center;
    	background-size: cover;
    	transform: rotateY(90deg) translateZ(150px);
    }
    
    /*上*/
    li:nth-child(5) {
    	background: url(../img/kai.jpg);
    	background-position: center;
    	background-size: cover;
    	transform: rotateX(90deg) translateZ(150px);
    }
    
    li:nth-child(6) {
    	background: url(../img/sunwukong.jpg);
    	background-position: center;
    	background-size: cover;
    	transform: rotateX(90deg) translateZ(-150px);
    }
    
    ul:hover {
    	animation-play-state: paused;
    }
    

    代码

    GitHub

    展开全文
  • 一款很不错的图片相册效果,左侧缩略图自动感应鼠标位置,上下自动滚动切换缩略图位置,右侧动态图片文字渐隐渐现,效果很不错哦
  • 抖音上很火的3D立体动态相册实现代码!

    万次阅读 多人点赞 2019-11-26 13:30:32
    圣诞节快到了,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册。赶紧学会了,来制作属于我们程序员的浪漫吧!先上效果图,来引起下你们的兴趣。 正文: ...

    前言:

    私信我,已经录制好操作视频,如果看文章不会操作的话!

    圣诞节快到了,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册。赶紧学会了,来制作属于我们程序员的浪漫吧!先上效果图,来引起下你们的兴趣。

     正文:

    一、新建一个index.html的文件,代码如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>纯CSS实现鼠标经过3D立体动态展示图片特效代码</title>
    <link type="text/css" href="css/style.css" rel="stylesheet" />
    </head>
    <body>
    <div class="box">
    	<ul class="minbox">
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    	</ul>
    	<ol class="maxbox">
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    	</ol>
    </div>
    </body>
    </html>

    二、css样式的代码

    @charset "utf-8";
    *{
    	margin:0;
    	padding:0;
    }
    body{
    	max-width: 100%;
    	min-width: 100%;
    	height: 100%;
    	background-size: cover;
    	background-repeat: no-repeat;
    	background-attachment: fixed;
    	background-size:100% 100%;
    	position: absolute;
    	margin-left: auto;
    	margin-right: auto;
    }
    li{
    	list-style: none;
    }
    .box{
    	width:200px;
    	height:200px;
    	background-size: cover;
    	background-repeat: no-repeat;
    	background-attachment: fixed;
    	background-size:100% 100%;
    	position: absolute;
    	margin-left: 42%;
    	margin-top: 22%;
    	-webkit-transform-style:preserve-3d;
    	-webkit-transform:rotateX(13deg);
    	-webkit-animation:move 5s linear infinite;
    }
    .minbox{
    	width:100px;
    	height:100px;
    	position: absolute;
    	left:50px;
    	top:30px;
    	-webkit-transform-style:preserve-3d;
    }
    .minbox li{
    	width:100px;
    	height:100px;
    	position: absolute;
    	left:0;
    	top:0;
    }
    .minbox li:nth-child(1){
    	background: url(../img/01.png) no-repeat 0 0;
    	-webkit-transform:translateZ(50px);
    }
    .minbox li:nth-child(2){
    	background: url(../img/02.png) no-repeat 0 0;
    	-webkit-transform:rotateX(180deg) translateZ(50px);
    }
    .minbox li:nth-child(3){
    	background: url(../img/03.png) no-repeat 0 0;
    	-webkit-transform:rotateX(-90deg) translateZ(50px);
    }
    .minbox li:nth-child(4){
    	background: url(../img/04.png) no-repeat 0 0;
    	-webkit-transform:rotateX(90deg) translateZ(50px);
    }
    .minbox li:nth-child(5){
    	background: url(../img/05.png) no-repeat 0 0;
    	-webkit-transform:rotateY(-90deg) translateZ(50px);
    }
    .minbox li:nth-child(6){
    	background: url(../img/06.png) no-repeat 0 0;
    	-webkit-transform:rotateY(90deg) translateZ(50px);
    }
    .maxbox li:nth-child(1){
    	background: url(../img/1.png) no-repeat 0 0;
    	-webkit-transform:translateZ(50px);
    }
    .maxbox li:nth-child(2){
    	background: url(../img/2.png) no-repeat 0 0;
    	-webkit-transform:translateZ(50px);
    }
    .maxbox li:nth-child(3){
    	background: url(../img/3.png) no-repeat 0 0;
    	-webkit-transform:rotateX(-90deg) translateZ(50px);
    }
    .maxbox li:nth-child(4){
    	background: url(../img/4.png) no-repeat 0 0;
    	-webkit-transform:rotateX(90deg) translateZ(50px);
    }
    .maxbox li:nth-child(5){
    	background: url(../img/5.png) no-repeat 0 0;
    	-webkit-transform:rotateY(-90deg) translateZ(50px);
    }
    .maxbox li:nth-child(6){
    	background: url(../img/6.png) no-repeat 0 0;
    	-webkit-transform:rotateY(90deg) translateZ(50px);
    }
    .maxbox{
    	width: 800px;
    	height: 400px;
    	position: absolute;
    	left: 0;
    	top: -20px;
    	-webkit-transform-style: preserve-3d;
    	
    }
    .maxbox li{
    	width: 200px;
    	height: 200px;
    	background: #fff;
    	border:1px solid #ccc;
    	position: absolute;
    	left: 0;
    	top: 0;
    	opacity: 0.2;
    	-webkit-transition:all 1s ease;
    }
    .maxbox li:nth-child(1){
    	-webkit-transform:translateZ(100px);
    }
    .maxbox li:nth-child(2){
    	-webkit-transform:rotateX(180deg) translateZ(100px);
    }
    .maxbox li:nth-child(3){
    	-webkit-transform:rotateX(-90deg) translateZ(100px);
    }
    .maxbox li:nth-child(4){
    	-webkit-transform:rotateX(90deg) translateZ(100px);
    }
    .maxbox li:nth-child(5){
    	-webkit-transform:rotateY(-90deg) translateZ(100px);
    }
    .maxbox li:nth-child(6){
    	-webkit-transform:rotateY(90deg) translateZ(100px);
    }
    .box:hover ol li:nth-child(1){
    	-webkit-transform:translateZ(300px);
    	width: 400px;
    	height: 400px;
    	opacity: 0.8;
    	left: -100px;
    	top: -100px;
    }
    .box:hover ol li:nth-child(2){
    	-webkit-transform:rotateX(180deg) translateZ(300px);
    	width: 400px;
    	height: 400px;
    	opacity: 0.8;
    	left: -100px;
    	top: -100px;
    }
    .box:hover ol li:nth-child(3){
    	-webkit-transform:rotateX(-90deg) translateZ(300px);
    	width: 400px;
    	height: 400px;
    	opacity: 0.8;
    	left: -100px;
    	top: -100px;
    }
    .box:hover ol li:nth-child(4){
    	-webkit-transform:rotateX(90deg) translateZ(300px);
    	width: 400px;
    	height: 400px;
    	opacity: 0.8;
    	left: -100px;
    	top: -100px;
    }
    .box:hover ol li:nth-child(5){
    	-webkit-transform:rotateY(-90deg) translateZ(300px);
    	width: 400px;
    	height: 400px;
    	opacity: 0.8;
    	left: -100px;
    	top: -100px;
    }
    .box:hover ol li:nth-child(6){
    	-webkit-transform:rotateY(90deg) translateZ(300px);
    	width: 400px;
    	height: 400px;
    	opacity: 0.8;
    	left: -100px;
    	top: -100px;
    }
    @keyframes move{
    	0%{
    		-webkit-transform: rotateX(13deg) rotateY(0deg);
    	}
    	100%{
    		-webkit-transform:rotateX(13deg) rotateY(360deg);
    	}
    }
    

    三、文件的目录结构,把css文件放到css文件夹里,图片放到img文件夹里。

    四、图片尺寸不会修改的,可以选择使用美图秀秀网页版很简单

    五、容易出现的问题 ,图片展示不全或展示的方向不对

    1.图片尺寸需要修改 (解决展示不全的情况)

    上图是我的图片文件夹里放的图片 ,首先01-06编号命名的图片尺寸是100x100px的大小的,1-6编号是400x400px,如果效果想展示最佳,100x100px的图片是以头部特写的照片最好,因为01-06是立体照片内部小正方体的照片,1-6编号是外部正方体的照片。

    2.图片的方向需要修改(解决头朝下的问题)

    修改的方向如上图展示所示,比如第三张头就应该朝下,否则形成的效果图像会出现头是倒着的情况。

    六、放一下动态效果图

    总结:

     生活虽然总有辛酸,但是我们不应该减少去创造生活的乐趣,不断寻找属于自己的那份快乐,才应该是我们生活的态度。如果是非技术的朋友看到这篇博客,发现不会弄,可以直接留言要代码包,自己替换下图片就可以啦。

    我是阿达,一名喜欢分享知识的程序员,时不时的也会荒腔走板的聊一聊电影、电视剧、音乐、漫画,这里已经有723位小伙伴在等你们啦,感兴趣的就赶紧来点击关注我把,哪里有不明白或有不同观点的地方欢迎留言!

    3D代码包的下载地址:百度网盘-链接不存在

    提取码请关注公众号,回复3D相册代码获取提取码:

    展开全文
  • 动态相册图片展示flash动画是一款左侧大图右侧小图展示,点击切换图片动画下载。
  • 制作3D动态相册的源码,完全不懂编程的小白也可以轻松完成。下载,解压,放入图片文件,运行,即可得到一个像是电子版爆炸盒子一样的有趣相册。
  • 动态相册制作

    2014-05-07 13:49:00
    PPT动态相册制作,更容易入手,背景音乐,文字框都有。
  • 520创意浪漫动态相册表白通用PPT模板是一款可用于520表白节里进行示爱告白的PPT,总有些这样的时候,为了爱而悄悄躲开,躲开的是身影,躲不开的是那份默默的情怀,欢迎大家下载520创意浪漫动态相册表白通用PPT模板...
  • 基于ASP.NET的在线动态相册
  • 这是一张翻书效果PPT动态相册,第一PPT模板网提供幻灯片动画免费下载; PPT动画用绣花布料,鲜花作为PPT动画装饰背景,画面主体物是一本相册翻页的PPT展示动画,本PPT动画供需要的人选择欣赏使用; 关键词:布料、...
  • 前言:生活处处惊喜,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇文章就分享下前端代码如何实现3D立体动态相册。赶紧学会了,来制作属于我们程序员的浪漫吧!先上效果图,来引起下你们的兴趣。正文:...
  • 送给女朋友的3D立体动态相册的实现代码

    万次阅读 多人点赞 2020-03-09 00:15:09
    目前在抖音上很火的送给女朋友的3D立体动态相册,现在把代码分享给大家,有兴趣的朋友建议自己重头敲打一遍,这样才会理解的更加透彻。哈哈,先上效果图,吸引起你们的兴趣! 接下来就进入正题了!前方高能,注意别...
  • 3d动态相册

    2012-12-17 00:32:47
    3d动态相册
  • happy birthday,可爱的小熊倒计时钟表拉开帷幕,宝宝周岁纪念相册,动态相册ppt模板。
  • CSS实现3D立体动态相册代码!

    千次阅读 2020-07-16 16:20:52
    你们喜欢玩的3D立体动态相册都在这里了,有手就行哦。 2.创建好路径 创建好一个文件夹,css目录下面创建好css文件,img目录下放好需要展示的图片,创建好html文件,具体如图所示: 3.HTML代码如下 <!DOCTYPE ...
  • JavaScript 动态相册

    2012-01-05 16:31:47
    JavaScript 相册 图片
  • 相框徽标是一个梦幻般的After Effects模板,带有快速动态的动画徽标。 此模板包含54个媒体占位符,1个文本占位符和1个徽标占位符。 一个简洁的方式来展示您的新产品,投资组合,体育,时尚,朋友和家人的照片。 使用...
  • 3D立体动态相册(带背景音乐)HTML+CSS脚本。程序员硬核送礼方式。。。动画效果 截图效果: 照片准备:命名为1、2、3、…… 音乐: 将文件依次放在各自文件夹中: CSS文本,命名:index.csshtml{background: #000;...
  • 纯HTML加CSS实现3D立体动态相册【超简单、附源码】

    万次阅读 多人点赞 2020-04-05 13:47:28
    于是,在他的万般焦急等待下,为他量身定做的动态相册出炉了,鉴于时间紧任务重,实现的功能比较单一,但是他已经很满足了,我也很欣慰! 先来看一下效果: 具体代码如下: <!DOCTYPE html> <html>...
  • 纯CSS实现鼠标经过3D立体动态展示图片特效代码*{margin:0;padding:0;}body{max-width: 100%;min-width: 100%;height: 100%;background-size: cover;background-repeat: no-repeat;background-attachment: fixed;...
  • 动态相册ppt模板.rar

    2019-09-06 17:57:11
    动态相册ppt模板
  • 如何用HTML+CSS制作3D动态相册? #情人节表白#

    千次阅读 多人点赞 2021-02-12 20:44:19
    <!... <... <head>...meta charset="UTF-8">...3D立体相册</title> <link type="text/css" href="css/index.css" rel="stylesheet" /> </head> </body> <audio autoplay="autoplay
  • 免费动态相册,可以把N多的相片压缩成非常in的相册哦
  • 纯HTML加CSS实现3D立体动态相册

    千次阅读 2020-04-22 22:56:36
    听说是大佬写给女朋友的 效果: 卧槽,我又没女盆友我激动个啥。 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <... *{marg...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,724
精华内容 7,889
关键字:

动态相册