使用 | HTML & CSS | 制作精美相框

最新推荐文章于 2024-07-29 09:17:12 发布
最新推荐文章于 2024-07-29 09:17:12 发布
阅读量2.6k 收藏 17
点赞数 4
分类专栏： HTML 实例 文章标签： css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62617719/article/details/122046603
版权

文章目录

使用dw编写精美相框

1，制作魔法动态相册

（1）html源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>相册</title>
<link href="css/mof.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrap">
<div class="cube">
	<div class="out_front">
		<img src="images/1.jpg"  class="pic" >
	</div>
	<div class="out_back">
		<img src="images/2.jpg"  class="pic">
	</div>
	<div class="out_left">
		<img src="images/3.jpg"  class="pic">
	</div>
	<div class="out_right">
		<img src="images/4.jpg"  class="pic">
	</div>
	<div class="out_top">
		<img src="images/5.jpg"  class="pic">
	</div>
	<div class="out_bottom">
		<img src="images/6.jpg"  class="pic">
	</div>
	<span class="in_front">
		<img src="images/7.jpg" class="in_pic" />
	</span>
	<span class="in_back">
		 <img src="images/8.jpg" class="in_pic" />
	</span>
	<span class="in_left">
		<img src="images/9.jpg" class="in_pic" />
	</span>
	<span class="in_right">
		<img src="images/10.jpg" class="in_pic" />
	</span>
	<span class="in_top">
		<img src="images/11.jpg" class="in_pic" />
	</span>
	<span class="in_bottom">
		<img src="images/12.jpg" class="in_pic" />
	</span>
</div>
</div>
</body>
</html>
（2）css源码
@charset "utf-8";
/* CSS Document */
html{
	background:pink;
    height: 100%;	
}
.wrap{
	width: 10px;
	height: 10px;
	/*改变左右上下,图片方块移动*/
	margin: 200px 400px;
	position: relative;
	
}
.cube{
	width:600px;
	height:400px;
	margin: 0 auto;
	transform-style: preserve-3d;
	transform: rotateX(-30deg) rotateY(-80deg);
	-webkit-animation: rotate 20s infinite;
	animation-timing-function: linear;
}
@-webkit-keyframes rotate{
	from{transform: rotateX(0deg) rotateY(0deg);}
	to{transform: rotateX(360deg) rotateY(360deg);}
}
.cube div{
	position: absolute;
	width: 300px;
	height: 300px;
	opacity: 0.8;
	transition: all .4s;
}
.pic{
	width: 300px;
	height: 300px;
}
.cube .out_front{
	transform: rotateY(0deg) translateZ(150px);
}
.cube .out_back{
	transform: translateZ(-150px) rotateY(180deg);
}
.cube .out_left{
	transform: rotateY(90deg) translateZ(150px);
}
.cube .out_right{
	transform: rotateY(-90deg) translateZ(150px);
}
.cube .out_top{
	transform: rotateX(90deg) translateZ(150px);
}
.cube .out_bottom{
	transform: rotateX(-90deg) translateZ(150px);
}
.cube span{
	display: bloack;
	width: 200px;
	height: 200px;
	position: absolute;
	top: 50px;
	left: 50px;
}
.cube .in_pic{
	width: 200px;
	height: 200px;
}
.cube .in_front{
	transform: rotateY(0deg) translateZ(100px);
}
.cube .in_back{
	transform: translateZ(-100px) rotateY(180deg);
}
.cube .in_left{
	transform: rotateY(90deg) translateZ(100px);
}
.cube .in_right{
	transform: rotateY(-90deg) translateZ(100px);
}
.cube .in_top{
	transform: rotateX(90deg) translateZ(100px);
}
.cube .in_bottom{
	transform: rotateX(-90deg) translateZ(100px);
}
.cube:hover .out_front{
	transform: rotateY(0deg) translateZ(400px);
}
.cube:hover .out_back{
	transform: translateZ(-400px) rotateY(180deg);
}
.cube:hover .out_left{
	transform: rotateY(90deg) translateZ(400px);
}
.cube:hover .out_right{
	transform: rotateY(-90deg) translateZ(400px);
}
.cube:hover .out_top{
	transform: rotateX(90deg) translateZ(400px);
}
.cube:hover .out_bottom{
	transform: rotateX(-90deg) translateZ(400px);
}

（3）运行效果

在这里插入图片描述

2，神奇创意相框

（1）HTML源码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS完成神奇创意的相框</title>
<style type="text/css">
*{
 text-align: center;
 border: 0;
 list-style: none;
}

body{
 font-size: 12px;
 font-family: Tahoma, Geneva, sans-serif;
 background: #000;
}

.photo{
 width: 404px;
 margin: 0 auto;
 border-left: solid 2px #333;
 border-right: solid 2px #333;
 background: #fff;
}

.photo h1{
 font-size: 14px;
 color: #666;
 line-height: 40px;
}

.photo ul{
 margin: 0;
 padding: 0;
}

.photo li{
 position: relative;
 width: 400px;
 height: 300px;
 overflow: hidden;
}

.photo li a:link span,.photo li a:visited span{
 display:none;
}

.photo li a:hover span{
 display:block;
 text-align:center;
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 font-size:40px;
 line-height:300px;
 color:#f00;
 background:#000;
 filter:alpha(opacity=70);
 -moz-opacity: 0.;
 opacity: 0.7;
}

.magic1,.magic2,.magic3{
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
}
.magic1{
 background: url() no-repeat;
}
.magic2{
 background: url()) no-repeat;
}
.magic3{
 background: url() no-repeat;
}
a:link,a:visited,a:hover{
 text-decoration:none;
}
</style>
</head>
<body>

<div class="photo">
    <h1>Magic Photo Frame 神奇创意相框</h1>
 <ul>
        <li>
            <a href="#"><img src="图片路径"><span>This is Magic!</span><em class="magic1">&nbsp;</em></a>
        </li>
        <li>
            <a href="#"><img src="图片路径"><span>This is Magic!</span><em class="magic2">&nbsp;</em></a>
        </li>
        <li>
            <a href="#"><img src="图片路径"><span>This is Magic!</span><em class="magic3">&nbsp;</em></a>
        </li>
 </ul>
</div>
<div class="photo">
 <ul>
        <li>
            <a href="#"><img src="图片路径"><span>This is Magic!</span><em class="magic1">&nbsp;</em></a>
        </li>
        <li>
            <a href="#"><img src="图片路径"><span>This is Magic!</span><em class="magic2">&nbsp;</em></a>
        </li>
        <li>
            <a href="#"><img src="images/6.jpg"><span>This is Magic!</span><em class="magic3">&nbsp;</em></a>
        </li>
        <li>
            <a href="#"><img src="图片路径"><span>This is Magic!</span><em class="magic2">&nbsp;</em></a>
        </li>
        <li>
            <a href="#"><img src="图片路径"><span>This is Magic!</span><em class="magic1">&nbsp;</em></a>
        </li>
 </ul>
</div>
</body>
</html>

（2）运行结果

在这里插入图片描述

3，普通相框

（1）HTML源码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯css制作相框效果</title>
    <style>
        body{
            background-color: #999999;
        }
        img.xk{
            position: absolute;
            background-color: black;
            width: 250px;
            height: 250px;
            border: 6px solid white;
            box-shadow: 1px 1px 5px #333333;
        }
        div{
            position: absolute;
            left: 50px;
            top: 300px;
            text-align: center;
            font-size: 15px;
            padding: 10px;
            border: 1px solid #990;
            background-color: white;
            box-shadow: 1px 1px 5px #333333;
            width: 200px;
            transform: rotate(30deg);
        }
        img{
            width: 100%;
        }
    </style>
</head>
<body>
<img src="图片路径" class="xk">
<br>
<br>
<br>
<div class="xk">
    <img src="图片路径">
    精美女头像
</div>
</body>
</html>

（2）运行结果

在这里插入图片描述

4，形状相框

（1）HTML源码
<!DOCTYPE html>
<html>
<head>
	<title>相框</title>
	<style type="text/css">
		.a{
			width: 300px;
			height: 293px;
			border:2px solid #FF8EFF; 
			border-radius:150px;
			overflow:hidden; 
			margin-right: 50px;
			margin-bottom: 10px;
			margin-top: 100px;
			float: left;
			box-shadow: 10px 10px 10px black;
		}
		.b{
			width: 300px;
			height: 389px;
			border:2px solid #FF8EFF; 
			border-radius:100px;
			overflow:hidden; 
			margin-right: 50px;
			margin-bottom: 10px;
			margin-top: 150px;
			float: left;
			box-shadow: 10px 10px 10px black;
		}
		.c{
			width: 300px;
			height: 300px;
			border:2px solid #FF8EFF; 
			border-radius:100px;
			overflow:hidden; 
			margin-right: 50px;
			margin-bottom: 10px;
			margin-top: 300px;
			float: left;
			box-shadow: 10px 10px 10px black;
		}
	</style>
</head>
<body>
	<div class="a"><img src="images/1.jpg"></div>
	<div class="b"><img src="images/2.jpg"></div>
	<div class="c"><img src="images/3.jpg"></div>

</body>
</html>

（2）运行结果

在这里插入图片描述

梁辰兴
关注
专栏目录
HTML--相框
weixin_46016070的博客
06-02 700
<!DOCTYPE html> <html> <head> <title>相框</title> <style type="text/css"> .a{ width: 300px; height: 293px; border:2px solid #FF8EFF; border-radius:150px; overflow:hidden; margin-right: 50px; marg
《web课程设计》期末网页制作 基于HTML+CSS+JavaScript制作公司官网页面精美
QQ_____365392777的博客
08-09 244
💄美妆介绍、👜美妆分享、👒 品牌化妆品官网网站 、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设...
CSS相框效果
pan_junbiao的博客
10-14 3189
效果图 1、CSS样式 .pic .box{ background:url(/MyDemo/images/round1.png) no-repeat; width:60px; height:60px; display:block; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLo...
CSS中实现图片边框的酷炫效果
最新发布
jun778895的博客
07-29 1675
在CSS中实现图片边框的酷炫效果是一个既有趣又富有创意的任务，它不仅能够提升网页的视觉吸引力，还能通过不同的样式和动画效果给用户带来更加丰富的视觉体验。以下，我将详细探讨几种使用CSS为图片添加边框的酷炫方法，每种方法都会包含代码示例、适用场景以及可能的扩展思路，以确保内容不低于2500字。
HTML练习之路14(制作创意画框)
qq_62714412的博客
01-25 3030
本次要完成如图效果的创意画框： 通过分析可知，整体框架为一个大盒子包裹着一个小盒子，并且为两个盒子设置class，方便书写CSS时区分： <body> <div class="out"> <div class="in"></div> </div> </body> 搭建完整体框架后预览是没有任何效果的，因为我们只给了两个容器，而没有给容器任何内容，为了便于后期维护，并且遵循内容与样式相分离的原则，我们将在CSS中为两个
HTML5 CSS3 照片相框 添加花边修饰特效.rar
07-10
CSS3 HTML5技术实现的增加图片花边效果，学习HTML5 CSS3很好的范例效果，添加花边修饰特效，当鼠标悬停于图片时，花边相框特效出现，并有动态的视觉效果，请参见预览图，注意，本效果只有鼠标放在图片上时才会显示图片花边边框。
html怎么做出相框的效果,PS滤镜制作漂亮的实木相框效果
weixin_30000407的博客
06-03 369
一、新建一个600 * 800像素的文件，然后新建一个图层，前景颜色设置为红色，背景设置为深红色，执行：滤镜 > 渲染 > 纤维，参数设置如下图。二、执行：图像 > 旋转画布 > 逆时针90度，选择举行选框工具在画布上选区一个长条形，执行：滤镜 > 扭曲 > 旋转扭曲。三、扭曲后的效果，主要是增强木质感。四、新建一个图层，做一个比画布稍小的选区，拉上金属渐变色，...
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
1.JS+CSS仿腾讯QQ首页搜索框无刷新换肤效果代码 2.js+css简单后台二级树形菜单demo示例 3.JS+CSS美化经典Select选项框插件 4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录...
JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个
10-11
2. jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的...
使用CSS制作图片相框以及图片放大旋转效果
ConStanying的博客
05-21 1025
最终实现效果如图 千F的课堂作业 代码如下： <html> <head> <meta charset="utf-8" /> <title>照片</title> <style > #box{ width: 1100px; height: 650px; margin: 100...
html网页制作多种标题相框
06-08
本人收集的素材，对初学者来说是个很不错的材料，避免了不会用ps和flash而造成的烦恼，希望对大家有所帮助
纯CSS实现的漂亮的立体图片边框效果，阴影代码
09-05
纯CSS 漂亮的立体图片边框效果，图片阴影代码，个人觉得这个挺实用，CSs实现的，定义成类，可让你整个网页上的图片都是有立体阴影的，不错吧，感谢作者分享。
js 特效 html 特效 带彩色边框的图片
06-13
js 特效 html 特效 带彩色边框的图片 js 特效 html 特效 带彩色边框的图片
html怎么做出相框的效果,使用CSS3制作PS级的图片边框效果
weixin_39592789的博客
06-03 1009
当一个开发者需要制作图片边框效果时通常有两种选择：一是使用Photoshop来制作，二是在通过CSS来渲染“盒中盒”的效果。在这个教程中，我们要制作一种带复杂边框的相框效果，通过 CSS3 我们可以很容易的完成这种效果。通常在美术馆中展览的相片或图片都使用一个相框将其表起来。除了最外层的相框外，里面还有几层不同颜色和纹理的装饰，我们就是要在网页上通过CSS来展示这种效果。我们使用的HTML结构仅仅...
纯CSS+HTML打造图片相框背景
weixin_34290096的博客
05-27 1074
为什么80%的码农都做不了架构师？>>> ...
【CSS】图片动画特效（相框）
weixin_39415598的博客
05-06 454
微信订阅号：Rabbit 下面是效果图 微信订阅号：Rabbit HTML代码 <!-- 主容器 --> <div class="box"> <!-- 图片 --> <img src="images/pic.png" alt=""/> <!--...
纯HTML+CSS实战之制作相框效果
qq_41886761的博客
01-21 8061
效果如图所示 主要运用了盒子阴影，图片阴影，边框属性三个要点 代码如下：  &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;纯css制作相框效果&lt;/title&gt; &lt
CSS完成神奇创意的相框
WEB架构师- Facestrap
07-11 1357
CSS完成神奇创意的相框 *{ text-align:center; border:0; list-style:none; } body{ font-size:12px; font-family:Tahoma, Geneva, sans-serif; background:#000; } .photo{ width:404px; margin:0 auto; bor
html怎么做出相框的效果,纯CSS实现的相框效果
weixin_28889007的博客
06-03 881
CSS语言：CSSSCSS确定body {background: whitesmoke;display: -webkit-box;display: -ms-flexbox;display: flex;height: 100vh;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梁辰兴

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值