HTML CSS 动画 实现图片过渡与变换（图片不超过边框范围局部放大）

最新推荐文章于 2024-04-27 22:13:08 发布
最新推荐文章于 2024-04-27 22:13:08 发布
阅读量2.5k 收藏 21
点赞数 4
分类专栏： 网页设计 CSS 文章标签： 网页设计 html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51393229/article/details/121533946
版权

实例:实现图片方形变圆形,放大,倾斜,变黑白

效果:

过渡与变换
局部放大四分之一

HTML CSS 代码实现:

<html>
<head>
    <title>过渡与变形</title>
    <style type="text/css">
        body {
            background-color: #000000;
            /* line-height:10px;*/
        }

        .word {
            font-family: 'Times New Roman';
            font-size: 20px;
            color: #ffffff;
        }

        table {
            width: 1000px;
            height: 500px;
            margin: 80px 70px 20px 120px;
            border-collapse: separate;
            border-spacing: 70px;
        }

        .css1 {
            border: 8px solid #ffffff;
            -webkit-box-shadow: #ffffff 0 0 25px;
            border-radius: 15px;
            width: 135px;
            height: 135px;
            -webkit-transition-duration: 2s;
        }

            .css1:hover {
                -webkit-transition-property: -webkit-border-radius;
                -webkit-border-radius: 50%;
            }

        .css2 {
            width: 135px;
            height: 135px;
            -webkit-transition-duration: 2s;
        }

        .img-box {
            width: 135px;
            height: 135px;
            overflow: hidden;
            border: 8px solid #ffffff;
            -webkit-box-shadow: #ffffff 0 0 25px;
            border-radius: 15px;
        }

        .css2:hover {
            display: block;
            -webkit-transform: scale(2,2);
            transform-origin: 0% 0%;
        }

        .css3 {
            border: 8px solid #ffffff;
            -webkit-box-shadow: #ffffff 0 0 25px;
            border-radius: 15px;
            width: 135px;
            height: 135px;
            -webkit-transition-duration: 2s;
        }

            .css3:hover {
                -webkit-transform: rotate(45deg);
            }

        .css4 {
            border: 8px solid #ffffff;
            -webkit-box-shadow: #ffffff 0 0 25px;
            border-radius: 15px;
            width: 135px;
            height: 135px;
            -webkit-transition-duration: 2s;
        }

            .css4:hover {
                /*-webkit-filter: grayscale(100%);*/
                -webkit-filter: grayscale(100%);
            }
    </style>
</head>
<body>
    <table>
        <tr>
            <td align="center">
                <span class="word">SHAPE</span>
            </td>
            <td align="center">
                <span class="word">DISPLACEMENT</span>
            </td>
            <td align="center">
                <span class="word"> POSITION</span>
            </td>
            <td align="center">
                <span class="word">COLOR</span>
            </td>
        </tr>
        <tr>
            <td align="center">
                <img class="css1" src="images/image1.jpg" />
            </td>
            <td align="center">
                <div class="img-box"><img class="css2" src="images/image2.jpg" /></div>
            </td>
            <td align="center">
                <img class="css3" src="images/image3.jpg" />
            <td align="center">
                <img class="css4" src="images/image4.jpg" />
            </td>
        </tr>
    </table>
</body>
</html>

2021年11月26日更新🙌
以上就是最新的代码，已经接近实现最想要的效果了。最重要的是如何写css2样式了。因为边框的问题于是我删了img选择器。写了css1 css2 css3 css4与他们的hover。终于达到了最想要的效果。注意，css2里 transform-origin: 0% 0%;将中心点定在了左上角。

Dogboss233
关注
  • 4
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
12种炫酷CSS3图片切换过渡效果
12-29
12种炫酷CSS3图片切换过渡效果
百度编辑器上传图片后展示超出边框解决办法
白白
02-10 3944
首先我们找到如下文件： \ueditor\themes\iframe.css 从这个文件里，就能看到有这一句：/可以在这里添加你自己的css/ 哈哈，接下来，我们写css吧： ———————————- img { max-width: 100%; /图片自适应宽度/ } body { overflow-y: scroll !important; } .view { word...
第9章 过渡、变形和动画
笔触狂放的博客
01-04 921
掌握过渡的各种属性，能够为网页中的元素添加过渡效果。掌握变形的各种属性，能够制作2D变形效果和3D变形效果。掌握动画的各种属性，能够为网页中的元素添加动画效果。在传统的Web设计中，当网页中要显示动画或特效时，往往需要使用JavaScript脚本或者Flash来实现。在CSS3中，新增了过渡、变形和动画属性，可以轻松实现旋转、缩放、移动和过渡等动画效果，让动画和特效的实现变得更加简单。本章将对CSS3中的过渡、变形和动画进行详细讲解。
渐变、浏览器内核及前缀、精灵图制作、过渡和变形
m0_50785753的博客
06-16 69
渐变、浏览器内核及前缀、精灵图制作、过渡和变形
CSS过渡、变形及动画的实现
m0_52942098的博客
04-30 298
目录过渡变形动画 过渡 元素从一种样式逐渐改变为另一种的效果。 需要规定： 指定要添加效果的CSS属性 指定效果的持续时间 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=
12种炫酷CSS3图片切换过渡效果.rar
04-07
12种炫酷CSS3图片切换过渡效果CSS3多种图片切换转场显示动画效果，这实际上是一个网页焦点图特效，但这个焦点图的图片切换效果几乎不重复，每切换一次，切换的过渡转场特效都不一样，有淡入淡出渐变，有旋转渐变，有向上向下滑出，有重叠显示，有飞入飞出效果，任一种效果你都可以从代码中将其单独摘出来，用在你自己的图片特效中。
html 图片的过渡效果,3个CSS3图片过渡动画特效
weixin_35775988的博客
06-03 2391
CSS语言：CSSSCSS确定div {width: 200px;height: 200px;margin-top: 100px;margin-left: 100px;float: left;}.div1 img {transition-property: all;transition-duration: 4s;transition-delay: 0s, 1s, 0s;border: solid ...
html图片过渡放大,css3图片放大缩小过度动画
weixin_28938385的博客
06-05 702
(1)需要加动画的节点.lucky_h_img {animation: mymove 3s infinite;-webkit-animation: mymove 3s infinite; /*Safari and Chrome*/animation-direction: alternate; /*轮流反向播放动画。*/animation-timing-function: ease-in-out; ...
图片自动切换（带过渡效果）
03-05
图片自动切换（带过渡效果）
html--过渡效果
sanjiaowuhuan的博客
09-23 462
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ /*什么样式，用多少时间，时间曲线，延时开始时间*/ ...
HTML5焦点图片波浪过渡效果切换动画特效.zip
07-11
HTML5焦点图片波浪过渡效果切换动画特效
CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）
05-30
CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义） CSS3的transform:scale()可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。 参考文档： http://blog.csdn.net/u014175572/article/details/51535768
css实现鼠标放上去时图片过渡转换动画效果
01-18
代码 <div></div> <div></div> .test{ width: 200px; height: 200px; margin-top: 200px; margin-left: 300px; overflow: hidden; background-color: red;... .test div:last-child{
使用CSS实现图片帧动画与曲线运动
12-14
所有动画的基本原理都是：在短时间内连续依次展示对应的图片，这样在视觉上看起来就是’动’的了。 本文主要来说一说第4点和第5点。 图片帧动画 当我们要实现的动画效果比较复杂，而且开发排期比较紧的情况下，用...
15种css3鼠标悬停图片动画过渡效果.rar
04-19
内容概要：本资源包含15种基于CSS3的鼠标悬停图片动画过渡效果，涵盖了常见的图片展示、导航菜单、按钮等场景，通过简单的HTML和CSS代码即可实现。每种效果都附带了详细的代码注释和演示效果，方便开发者学习和使用...
JS与CSS3实现图片响应鼠标移动放大效果示例
12-09
本文实例讲述了JS与CSS3实现图片响应鼠标移动放大效果。分享给大家供大家参考，具体如下： 今天看网易的网站上，当我把鼠标放上去的时候发现图片放大，移开图片缩小，于是自行尝试，结果如下。 方法一：使用js和css3...
CSS实现的一个图片放大展示的一种思路
10-30
CSS实现的一个图片放大展示的一种思路
前端HTML5学习2（新增多媒体标签，H5的兼容性处理）
最新发布
qq_51752841的博客
04-27 498
前端HTML5学习2（新增多媒体标签，H5的兼容性处理）
css利用transform:skew()属性画一个大屏的背景斜面四边形特效
Demon's blog
04-27 289
使用css transform function中的skew()方法实现画其中一个斜面，然后调整背景色实现ß。在工作工程中需要写一个如下的大屏背景，是由几个斜面做成的效果。2. 添加transform属性。4. 重复三个，注意背景色不一样。3. 添加渐变背景色和阴影。
html点击图片局部放大,js实现图片局部放大效果
06-10
要实现图片的局部放大效果，可以使用JavaScript和CSS来实现。下面是一种实现方式： 1. HTML代码 首先，需要在HTML代码中添加图片元素和一个容器元素，用于显示放大后的局部图像。 ```html <img src="image.jpg" id="image" /> <div id="container"></div> ``` 2. CSS样式 在CSS中，需要设置容器元素的样式，使其覆盖在图片上方，并且设置该元素的宽度和高度为放大后的局部图像的大小。 ```css #container { position: absolute; top: 0; left: 0; width: 200px; height: 200px; background-repeat: no-repeat; background-size: 400px 400px; display: none; } ``` 3. JavaScript代码 接下来，需要使用JavaScript代码来实现图片局部放大的效果。具体实现步骤如下： - 获取图片元素和容器元素。 - 监听图片元素的鼠标移动事件。 - 在事件处理程序中，计算当前鼠标位置所对应的局部图像的位置。 - 设置容器元素的背景图像和位置，并显示容器元素。 ```javascript var image = document.getElementById('image'); var container = document.getElementById('container'); image.addEventListener('mousemove', function (e) { var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; var bgPosX = -x * 2; var bgPosY = -y * 2; container.style.backgroundImage = 'url(' + this.src + ')'; container.style.backgroundPosition = bgPosX + 'px ' + bgPosY + 'px'; container.style.display = 'block'; }); image.addEventListener('mouseout', function () { container.style.display = 'none'; }); ``` 在上面的代码中，我们使用了鼠标移动事件和鼠标移出事件来控制容器元素的显示和隐藏。在鼠标移动事件中，我们计算当前鼠标位置所对应的局部图像的位置，并将其设置为容器元素的背景位置。最后，我们显示容器元素。在鼠标移出事件中，我们隐藏容器元素。 这样，就可以实现图片的局部放大效果了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值