最近我发现了一些有趣的 CSS 搞笑图片,简直让我大喊“太有创意了!”
img{ border: 5px solid black; border-radius: 50%; box-shadow: 0 0 20px 5px #00ff00; transform: rotate(360deg) }
首先来看这个旋转的球,有人可能会认为是使用 JavaScript 实现的,但是其实只需要 CSS 就可以完成。
img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(45deg) }
还有这只旋转的猫头鹰,利用了绝对定位和 translate 实现了中心旋转的效果。
div{ border: 5px solid black; padding: 20px; font-size: 40px; font-weight: bold; background-color: #00ff00; transform: perspective(600px) rotateX(45deg) rotateY(45deg); }
这个立体效果非常棒的方块,使用了 CSS 的透视变换,同时绕着 X 轴和 y 轴旋转。
div{ width: 50px; height: 50px; border: 5px solid black; background-color: #00ff00; animation: shake 0.5s infinite alternate; } @keyframes shake{ 0%{ transform: translate(0,0)} 100%{ transform: translate(10px,10px)} }
最后,这个快速晃动的方格,通过使用 CSS 的关键帧动画来实现。
总的来说,这些 CSS 搞笑图片真的非常有趣和创意,不只能让我们在学习 CSS 的过程中保持乐观和开心,同时也能激发我们自己的想象力,制作出更加有趣的网页效果。