css变形处理绘制照片墙

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>照片墙</title></head><style type="text/css">body{margin-left: 50px;background-image: url("img/bg3.JPG");      }
/*多个div的相同样式*/      div{float: left;height: 150px;background-color: white;margin-left: 30px;margin-top: 40px;text-align: center;font-size:16px;padding-top: 10px;/*box-shadow: 1px 1px 1px 2px #666666;*/}
/*鼠标经过时竖直摆放,放大1.2倍  */#div1{width: 200px;transform: rotate(-10deg);}#div1:hover{transform: scale(1.2);}#div2{width: 170px;transform: rotate(-10deg);}#div2:hover{transform: scale(1.2);}#div3{width: 200px;transform: rotate(20deg);}#div3:hover{transform: scale(1.2);}#div4{width: 170px;}#div4:hover{transform: scale(1.2);}#div5{width: 140px;transform: rotate(10deg);}#div5:hover{transform: scale(1.2);}#div6{width: 170px;transform: rotate(-10deg);}#div6:hover{transform: scale(1.2);}</style><body><div id="div1"><img src="img/11.JPG" width="180px" height="120px">相识</div><div id="div2"><img src="img/22.JPG" width="150px" height="120px">凝视</div><div id="div3"><img src="img/33.JPG"/ width="180px" height="120px">甜睡</div><div id="div4"><img src="img/44.JPG"/ width="150px" height="120px"> 逗乐</div><div id="div5"><img src="img/55.JPG"/ width="120px" height="120px">奔跑</div><div id="div6"><img src="img/66.JPG"/ width="150px" height="120px">冷漠</div></body>
</html>

css变形处理绘制照片墙相关推荐

html5网页仿写,纯CSS代码模仿绘制蚂蚁庄园页面
CSS的图形绘制功能还是很强大的,今天就用CSS模仿一个支付宝蚂蚁庄园的页面,当然,说是模仿,因为是电脑页面,又因为时间关系,只能模仿个大概.先把效果图贴出来,截图只能截取静态效果,动画看不出来,大家 ...
php中修改弹窗的样式,CSS变形弹窗效果示例
大家都知道,弹出窗体已经是现在网页常用的一种交互设计,在这个注重交互动画体验的时代,网页弹窗也是可以来点新鲜点子的,比如今天分享的CSS 变形Modal Window. 当用户点击按钮时,按钮将会变成 ...
css变形-扭曲(skew())
开发工具与关键技术:css skew属性作者:黄海峰撰写时间:2019.02.15 Css变形中的第二个属性扭曲(skew()),做一个样本,然后添加shew属性,看看会有什么变化. 浏览器打开: ...
❤七夕情人节将至，用HTML+CSS给女朋友绘制一张彩色代码相册吧!
❤七夕情人节将至,用HTML+CSS给女朋友绘制一张彩色代码相册吧(可帮定制噢~ )! 七夕情人节将至,中国传统的情人节.可预期到的是,估计有很多年轻的情侣们,已经为这个节日提前准备好久了吧?烂大街的 ...
html表白照片墙,【原创】【申精】用python去告白绘制照片墙(自定义格式)
[Python] 纯文本查看复制代码# -*- coding: utf-8 -*- from PIL import Image import os, sys save_image_name = &q ...
css3绘制环形_利用CSS简单地绘制一个操场
前言伴随着 CSS3(CSS Module 3)的发布,我们设计网页时有了更多的选择.对于一些比较简单的小图标和图片,我们可以利用 CSS3 很方便的进行绘制,从而减少页面的图片数量和HTTP请求次 ...
css 外弧_CSS绘制圆(弧)
1.绘制一个圆使用块元素或行内块元素可以绘制一个矩形,然后添加一个圆角,如果矩形的长宽一样,圆角半径恰好是边长一半,就会得到一个圆形. 半径值 10 30 50 效果 2.绘制胶囊形状把上面的方形 ...
CSS应用之绘制正六边形
使用CSS绘制一个正六边形: 具体步骤:通过绘制三个长方形进行叠加实现,其中长方形的长宽比例为::1. note:设置标签的position属性为absolute时,即设置为绝对定位的元素相对于属性不 ...
强大的CSS：图形绘制合集，方便你我！
以下这些造型简单的图形都是纯CSS外加一个HTML标签实现的,不少实现以前我介绍过,或者你也知道,但是有些相信你没见过. 1. 正方形实时渲染效果如下: 相关CSS代码: #square {widt ...

css变形处理绘制照片墙

css变形处理绘制照片墙相关推荐

最新文章

热门文章