當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

css实现快速抖动效果_web前端入门到实战：CSS实现照片堆叠效果

發(fā)布時間：2025/3/13 HTML 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 css实现快速抖动效果_web前端入门到实战：CSS实现照片堆叠效果小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

實(shí)現(xiàn)效果

步驟

1.初始index.html
為了建立第一張照片，也就是最上面的那張。我們只需要添加一個div，里面包含照片的img。就這么多，剩下的效果都是通過CSS來實(shí)現(xiàn)的。確保div的class為stackone。

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Photo Stack</title><style>* {margin: 0;padding: 0;}html,body {width: 100%;height: 100%;overflow: hidden;}.stackone {--img-width: 480px;--img-height: 320px;border: 6px solid #fff;float: left;height:var(--img-height);width: var(--img-width);margin: 50px;position: relative;-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);}.stackone img {width: var(--img-width);}</style> </head><body><div class="stackone"><img src="../../../assets/image/landscape-4378548_960_720.jpg"></div> </body></html>

初始的效果如下：

2.The First Pseudo Element
現(xiàn)在我們添加一層底片。我們想得到的效果是：底層圖片看上去好像是在頂層照片下面。我們可以用CSS的偽類:before來實(shí)現(xiàn)。

.stackone::before {content: "";height:var(--img-height);width: var(--img-width);background: #eff4de;border: 6px solid #fff;-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); }

此時效果相差甚遠(yuǎn)

3.完善before
這不是我們想要的效果。如何修復(fù)？我們需要給:before加入一些定位，然后設(shè)置z-index將它放在后面。

.stackone::before {content: "";height:var(--img-height);width: var(--img-width);background: #eff4de;border: 6px solid #fff;position: absolute;z-index: -1;top: 0px;left: -10px;-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);-webkit-transform: rotate(-5deg);-moz-transform: rotate(-5deg);-o-transform: rotate(-5deg);-ms-transform: rotate(-5deg);transform: rotate(-5deg); }

此時效果正常，初見端倪

4.The Second Pseudo Element

.stackone::after {content: "";height:var(--img-height);width: var(--img-width);background: lightblue;border: 6px solid #fff;position: absolute;z-index: -1;top: 5px;left: 0px;-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);-webkit-transform: rotate(4deg);-moz-transform: rotate(4deg);-o-transform: rotate(4deg);-ms-transform: rotate(4deg);transform: rotate(4deg); }

最后大功告成，具有層次感：

更多大型互聯(lián)網(wǎng)web前端實(shí)戰(zhàn)操作，在線解析，學(xué)習(xí)指導(dǎo)，學(xué)習(xí)資源，點(diǎn)：【W(wǎng)EB前端資源】

總結(jié)

以上是生活随笔為你收集整理的css实现快速抖动效果_web前端入门到实战：CSS实现照片堆叠效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：本工作簿不能再使用其他新字体_1.2.1
下一篇：软件测试用例_通用测试用例执行软件