css 照片墙案例

迈不过友情╰ 2021-07-24 11:20 411阅读 0赞

<html>
    	<head>
    		<title>照片墙</title>
    		<meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style type="text/css"> body{ 
    				text-align:center;
    				background-color:orangered;
    			}
    			img{ 
    				width:18%;
    				border:solid 1px orange;
    				padding:10px;   /*图片到边框的内边距*/
    				background-color:orange;
    				transform:rotate(7deg);
    				margin: 20px;   /*图片外边距*/
    			}
    			/*使用伪类给标签添加样式*/
    			img:hover{  /*hover悬停，鼠标放上去才显示样式*/
    				border:solid 30px yellow;
    				transform:rotate(0deg) scale(1.3); /*设置旋转角度和缩放比例*/
    				z-index:1;   /*层级，优先显示鼠标悬停位置，不被其他图片覆盖，数值越大基本越高*/
    				transition: 1.5s;  /*设置显示时间*/
    			}  
    			
    		</style>
    	</head>
    	<br /><br /><br /><br /><br /><br />
    	<body>
    		
    		<img src="img/钢铁侠2.jpg" alt="加载失败" title="" />
    		<img src="img/美国队长.jpg" alt="加载失败" title=""/>
    		<img src="img/黑寡妇.jpg" alt="加载失败" title=""/>
    		<img src="img/心灵女巫.jpg" alt="加载失败" title=""/><br />
    		<img src="img/蜘蛛侠.jpg" alt="加载失败" title=""/>
    		<img src="img/盾牌.jpg" alt="加载失败" title=""/>
    		<img src="img/无线手套.jpg" alt="加载失败" title=""/>
    		<img src="img/灭霸.jpg" alt="加载失败" title=""/>
    	</body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，411人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML+CSS实现照片墙

效果图如下 > 鼠标停留在图片上，会放大图片 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_tex

谁借莪１个温暖的怀抱￠/ 2023年10月03日 13:59/ 0 赞/ 47 阅读

相关 html css3中照片墙,CSS_CSS3简单实现照片墙，HTML 复制代码代码如下:

CSS3简单实现照片墙 HTML 复制代码代码如下: 照片墙制作 ![Image 1][] ![Image 1][] ![Image 1][] ![Image

╰+哭是因爲堅強的太久メ/ 2022年09月03日 02:21/ 0 赞/ 186 阅读

相关 css3实现绚丽照片墙

css3实现绚丽照片墙这里主要给大家介绍几个css3比较绚`这里写代码片`丽和实用的动画属性，其中包括旋转、缩放等。课程实现的照片墙特效内容为：照片随意的摆放在页面的不

朴灿烈づ我的快乐病毒、/ 2022年07月12日 22:58/ 0 赞/ 238 阅读

相关 H5 照片墙制作

H5 照片墙制作一、概述随着时代的发展，越来越多的人喜欢分享自己的照片，他们通过网络来传播，来获得别人的称赞。Html+js能够实现很多美丽的效果，能使得图片拥有更好的

╰+哭是因爲堅強的太久メ/ 2022年06月10日 06:40/ 0 赞/ 305 阅读

相关用CSS3做一个立方照片墙

用CSS3的2D，3D和动画效果来做一个立方照片墙 3D转换：平移 translateX() 沿X轴平移 trans

旧城等待，/ 2022年05月29日 06:52/ 0 赞/ 236 阅读

相关 GridView实现照片墙

转载请注明：[http://blog.csdn.net/feather\_wch/article/details/79568078][http_blog.csdn.net_fe

女爷i/ 2022年05月29日 02:46/ 0 赞/ 233 阅读

相关 android 瀑布流照片墙

参考此三个网址： 1.[https://blog.csdn.net/guolin\_blog/article/details/10470797/][https_blog.cs

快来打我*/ 2022年04月08日 11:40/ 0 赞/ 295 阅读

相关 CSS照片墙

开发工具与关键技术：DW 作者：文泽钦撰写时间：2019年1月31日今天跟大家分享一个css照片墙，代码也很简单，能省略的效果也省略了，大家也不要学我，不然学校也

Myth丶恋晨/ 2022年03月21日 09:28/ 0 赞/ 325 阅读

相关照片墙

开发工具与关键技术：Adobe Dreamweaver CC 2017 CSS 作者：廖亚星撰写时间：2019年2月15日下面是让多张照片错乱分布在页面上，当移

痛定思痛。/ 2022年03月18日 13:22/ 0 赞/ 324 阅读

相关 css 照片墙案例

<html> <head> <title>照片墙</title> <meta http-equiv="content-type" co

迈不过友情╰/ 2021年07月24日 11:20/ 0 赞/ 412 阅读