CSS3过渡和变形综合应用——不同图片效果

最新推荐文章于 2022-10-25 20:58:54 发布

Shmily_ox

最新推荐文章于 2022-10-25 20:58:54 发布

阅读量856

点赞数

文章标签： css3 html

本文链接：https://blog.csdn.net/Shmily_ox/article/details/105122422

版权

本文介绍了如何使用CSS3的过渡和变形属性来创建各种图片效果，包括鼠标悬停时图片边框从直角变为圆角、图片放大、图片旋转以及图片透明度变化，同时还有盒子阴影的过渡效果。

摘要由CSDN通过智能技术生成

CSS3过渡和变形的综合应用

在前面的文章我们了解了CSS3的过渡属性和变形属性，今天利用这两个属性的来实现不同的图片效

果，一起来看看吧！

要求：

（1）当鼠标移上第一-张图像时，产生直角边框过渡为圆角边框的效果。

（2）当鼠标移上第二张图像时，产生图片逐渐放大的过渡效果。

（3）当鼠标移上第三张图像时，产生图片旋转的过渡效果。

（4）当鼠标移上第四张图像时，产生图片透明度逐渐变暗的过渡效果。

（5）当鼠标移上四张图像的任一图像时，都伴随着盒子阴影的过渡效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS过渡与变形</title>
    <style>
        body{
            background-color: black;    //设置背景色
            padding: 40px;
        }
        .div{
            display: flex;      //弹性盒子
            justify-content: space-between;   //两端对齐，子元素之间有间隙
        }
        .shape,.displacement,.position,.color{
            display: flex;
            color: white;