首页 / CSS / 在页面中怎么用css让图片有立体感的效果?（代码实测）

在页面中怎么用css让图片有立体感的效果?（代码实测）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了在页面中怎么用css让图片有立体感的效果?（代码实测），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1800字，纯文字阅读大概需要3分钟。

内容图文

网页页面上如果出现立体感的图片，总会让人有种高科技的感觉。其实立体感的设计并不难，我们可以通过css实现立体感的效果。非常简单易懂，首先我们可以有这样的简单思路，为了突显立体感，要让阴影左右重中间轻，也就是css阴影立体效果，这里使用了::before,::after伪元素，创建并让它们定位在#Demo元素后(z-index:-1)，同时设置阴影，并设置旋转。本篇文章就给大家详细介绍css图片立体效果的实现。

css图片立体效果具体代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css立体感测试</title>
    <style>
        #demo{ display:inline-block; position:relative; margin:50px; padding:20px; background:#fafafa; box-shadow:0 0 3px rgba(0, 0, 0, 0.2); -moz-border-radius:4px; border-radius:4px; color:rgba(0,0,0, 0.8); text-shadow:0 1px 0 #fff;}
        #demo::before, #demo::after{ position:absolute; content:""; top:10px; bottom:15px; left:10px; width:50%; box-shadow:0 15px 10px rgba(0, 0, 0, 0.5); -webkit-transform: rotate(-3deg); -moz-transform:rotate(-3deg); -o-transform:rotate(-3deg); -ms-transform:rotate(-3deg); transform:rotate(-3deg); z-index:-1;}
        #demo::after{ right:10px; left:auto; -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -o-transform:rotate(3deg); -ms-transform:rotate(3deg); transform: rotate(3deg);}
        #demo img{ vertical-align:bottom;}
    </style>
</head>
<body>
<div id="demo">
    <img src="1.png" width="650" height="100" />
</div>
</body>
</html>

效果如下图：

在页面中怎么用css让图片有立体感的效果?（代码实测） - 文章图片

相关属性注释：

一、box-shadow

box-shadow:5px 2px 6px #000;
数值从左至右：阴影水平偏移值（正值向右，负值向左）；阴影垂直偏移值（正值向下，负值向上）；阴影模糊值；阴影颜色。

二、transform
transform的效果很多，这里只用了旋转：

transform: rotate(-3deg)
数值表示旋转的角度，正值为顺时针，负值为逆时针。

希望本篇关于css图片立体效果的介绍对大家有所帮助！

以上就是在页面中怎么用css让图片有立体感的效果?（代码实测）的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的在页面中怎么用css让图片有立体感的效果?（代码实测）全部内容，希望文章能够帮你解决在页面中怎么用css让图片有立体感的效果?（代码实测）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/411685.html

来源：【匿名】