生活随笔
收集整理的這篇文章主要介紹了
CSS实现立体效果
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
最終效果
全部代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document
</title>
</head>
<style>*{margin: 0;padding: 0;}.main{width: 100vw;height: 100vh;background-color: #f5f5f5;overflow: hidden;}.three-main{width: 600px;height: 80px;display: flex;align-items: center;justify-content: space-between;margin: 100px auto;}.text{display: inline-block;width: 80px;line-height: 80px;text-align: center;font-size: 28px;color: var(--color);}.text-item{display: flex;align-items: center;justify-content: center;transition: all 0.3s;cursor: pointer;}.text-item:hover{transform: rotate(-30deg) skew(20deg);}.text-item::after{position: absolute;content: '';width: 80px;height: 80px;border: 2px solid var(--color);border-radius: 4px;box-sizing: border-box;}.others{display: block;position: absolute;width: 80px;height: 80px;box-sizing: border-box;border-radius: 4px;border: 2px solid var(--color);transform: translateX(calc(var(--i) * -8px)) translateY(calc(var(--i) * 8px));box-shadow: -1px 1px 3px var(--color);opacity: 0;transition: all 0.3s;}.text-item:hover .others{opacity: calc((4 - var(--i)) * 0.25);}
</style>
<body><div class="main"><div class="three-main"><div class="text-item" style="--color: #ec3e27"><span class="others" style="--i:1"></span><span class="others" style="--i:2"></span><span class="others" style="--i:3"></span><span class="text">立
</span></div><div class="text-item" style="--color: #fd79a8"><span class="others" style="--i:1"></span><span class="others" style="--i:2"></span><span class="others" style="--i:3"></span><span class="text">體
</span></div><div class="text-item" style="--color: #0984e3"><span class="others" style="--i:1"></span><span class="others" style="--i:2"></span><span class="others" style="--i:3"></span><span class="text">效
</span></div><div class="text-item" style="--color: #00b894"><span class="others" style="--i:1"></span><span class="others" style="--i:2"></span><span class="others" style="--i:3"></span><span class="text">果
</span></div></div></div>
</body>
</html>
總結(jié)
以上是生活随笔為你收集整理的CSS实现立体效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
