html 背景阴影效果,html – CSS上的不对称背景阴影

最新推荐文章于 2022-08-04 19:31:32 发布

大橘子嘿嘿

最新推荐文章于 2022-08-04 19:31:32 发布

阅读量325

点赞数

文章标签： html 背景阴影效果

这篇博客介绍了一种使用CSS Transform来创建3D透视旋转效果的方法。通过设置`perspective`和`rotateX`属性，可以为HTML元素添加倾斜效果。示例中，背景图片与文字分别进行了不同角度的旋转，以达到视觉上的平衡和立体感。

摘要由CSDN通过智能技术生成

您可以使用css

transform这样做：

JSFiddle – DEMO

body {

background:url('http://thumbs.xdesktopwallpapers.com/wp-content/uploads/2011/11-1/Drops-On-Green-Background-720x405.jpg')

}

div {

background-color: rgba(0, 0, 0, 0.6);

color: #fff;

font-size: 22px;

width: 600px;

height: 400px;

margin: 0 auto;

-webkit-transform: perspective(600px) rotateX(15deg);

-moz-transform: perspective(600px) rotateX(15deg);

transform: perspective(600px) rotateX(15deg);

display: table;

padding: 0 40px;

box-sizing: border-box;

}

p {

display: table-cell;

vertical-align: middle;

-webkit-transform: perspective(600px) rotateX(-15deg);

-moz-transform: perspective(600px) rotateX(-15deg);

transform: perspective(600px) rotateX(-15deg);

}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin luctus vestibulum elementum. Vivamus feugiat diam eget aliquet fringilla. Nullam et ex id dui malesuada bibendum. Duis interdum pharetra nibh sit amet lacinia. Sed sit amet fermentum diam. Nulla euismod libero nibh, ac volutpat nulla luctus vitae. Nulla sit amet lectus odio.