争怎路由网/网站教程/内容

在页面中如何用css让图片有立体感的效果?(代码实测)

网站教程2024-03-24 阅读
网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
网页页面上如果出现立体感的图片,总会让人有种高科技的感觉。其实立体感的设计并不难,我们可以通过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>

效果如下图:

e9368a8353395f04ab4baa174860f46.png

相关属性注释:

一、box-shadow

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

二、transform
transform的效果很多,这里只用了旋转:

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

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

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

  • 微信

  • 网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



    ……

    标签:在页面中怎样用css让图片有立体感的效果?(代码实测)
    相关阅读