从中心放大

最新推荐文章于 2022-04-18 23:03:14 发布
最新推荐文章于 2022-04-18 23:03:14 发布
阅读量302 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bin1813/article/details/53513119
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width:100px;
            height: 100px;
            background: #ccc;
            position: absolute;
            left:200px;
            top:200px;
        }
        #div2{
            width: 200px;
            height:200px;
            background: yellow;
            position: absolute;
            left:200px;
            top:200px;
            margin-left: -50px;
            margin-top:-50px;
        }

    </style>
    <script src="move3.js"></script>
    <script>

    </script>
</head>
<body>
<div id="div2"></div>
<div id="div1"></div>

</body>
</html>
Apress92
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
svg按中心放大
飞鸟慕鱼的博客
07-27 2198
svg正常放大 <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000"> <rect x="30" y="20" width="100" height="100" fill="none" stroke="red" stroke-width="1"/> <rect x="30" y="20" width="100" height="100" fill="none" stroke="yell
css让图片等比缩放，从中心往两边扩大过渡效果。
weixin_43871703的博客
12-01 1551
//外层容器即可视宽高 <div class="sc"> <img src="" alt /> // 换成自己的图 </div> .sc { height: 300px; width: 400px; overflow: hidden; } img { height: 100%; width: 100%; transition: transfor
CSS3 仿京东边框从中间逐渐放大效果
李二狗的博客
02-16 3505
昨天看一个朋友发的京东的效果 然后就自己扒了下来  确实感觉到css3的强大  话不多说 贴代码   #box{     width: 300px;     height: 300px;     transition: all 5s;     position: relative;   }   #box ::before{     co
用CSS3实现放大效果
Andone_hsx的博客
12-17 8123
任务描述 本关任务：用CSS3放大效果。 效果如下： 相关知识 为了完成本关任务，你需要掌握：1.transform属性，2.transition属性。 transform属性 下面是基本的html结构，： &lt;div class="scale"&gt; &lt;img src="img/diary1.jpg" alt="diary1"/&gt; &lt;/div&gt;..
html 中心放大,css3中的放大
weixin_33578569的博客
05-30 860
用css的 a:hover img 放大图片时怎么让放大后的图a:hover img { width:400px; height:200px; position:absolute; z-index用CSS3中的transfrom:scale{x,y}来放大，如下： *{margin:0;padding:0;} div{border:solid 1px #333;width:40px;height:...
解决css中总以中心点缩放
ivan_jq的博客
04-24 1万+
css中缩放是使用 transform来控制，参数可为scale、scaleX、scaleY等，但常规的缩放总以中心点为基准点，在很多时候都是很不方便的。 使用transform-origin来进行控制，使用transform-origin属性，可以改变缩放的基准点。 transform-origin: 10px 10px; // 定义缩放原点,相对于左上角的距离x、y，单位px 参数可使用值...
wpf 转动滚轮以鼠标为中心放大缩小控件
12-27
要实现"以鼠标为中心放大缩小控件"的功能，我们需要以下步骤： 1. **创建MatrixTransform对象**：在XAML中为控件定义一个MatrixTransform，并将其设置为Transform属性，如`...
仿抖音个人中心，下拉放大缩小效果
08-12
"仿抖音个人中心，下拉放大缩小效果"是一个典型的例子，它实现了用户在个人中心页面下拉时，页面内容放大，松手后恢复原状的弹性动画效果。这种效果通过巧妙地运用Android Design Support Library中的`...
JQuery控制图片由中心点逐渐放大效果
10-22
在该例子中，当鼠标悬停在图片上时，通过修改图片的`width`、`height`、`left`和`top`属性来实现图片从中心点放大的效果。 接下来，我们看具体的实现过程。首先，定义了`wValue`和`hValue`变量，这两个变量分别代表...
Android 利用CoordinatorLayout实现高仿抖音个人中心 下拉越界回弹 图片放大
12-04
本示例中的“Android 利用CoordinatorLayout实现高仿抖音个人中心 下拉越界回弹 图片放大”就是一个很好的案例，它展示了如何通过 CoordinatorLayout 结合其他组件来构建类似抖音个人中心的下拉回弹以及图片放大效果...
work-notes（7）：如何让元素从中心放大？如何让图片从中心放大？
jinzai9976的博客
04-18 380
时间：2022-04-18 文章目录原因解释实现代码 原因解释 之前一直在纠结如何让北京图片从中心放大，好像 background-size 做不到这样的效果； 最后找到了一个最简单的方法，一个 CSS 属性就能解决； 实现代码 <style> .big_more{ transform: scale(1.2); } </style> 这里表示，把该元素从中心放大 1.2 倍；当然还可以添加一些过渡时间不那么突兀； transition: 0.5s;
CSS实现图片以中心缩放 --- 20/03/18
HimeYui的博客
04-12 7903
CSS图片以中心缩放、放大，超出隐藏 HTML代码： <div> <img src="#"> </div> CSS代码： <style> .container{ width: 100%; overflow: hidden; position: relative; } .container im...
CSS实现图片以中心缩放
just
02-08 4285
CSS图片以中心缩放、放大，超出隐藏 layui轮播图 <!-- 轮播图 --> <div class="layui-carousel wzg-carousel" id="test1"> <div carousel-item> <div><img src="../res/images/1.jpg" alt=""></div&g...
笔记：css3 transition 实现div宽度以中心为原点向两边伸长
qq_39108466的博客
08-28 1万+
参考原文章（问答）： css3 transition width在变长的时候 能以中心为原点，向两边伸长吗？ 我在项目中用来作为导航菜单的鼠标悬停交互 : 核心代码(CSS)：.container { text-align: center; } .bar { width: 100px; display: inline-block;
css实现在鼠标放上去时图片从中心位置变大
qijingpei的博客
08-07 1万+
鼠标放到图片上时，图片从中心位置变大，而不是从左上角为原点变大
CSS3图片以中心缩放，放大超出隐藏实现
aizuo3784的博客
10-08 1009
<!--Html代码--> <div class="selfScale"> <img sr="#" /> </div>/*样式代码*/ .selfScale{//容器 cursor: pointer; width: 100%; overflow: hidden; position: relative;}.selfS...
css3 实现鼠标放上去图片外框不变大，里面中心放大
幻听
01-06 5480
css代码 .img-box{ width: 390px; height: 296px; overflow: hidden; //这个一定要加上 不然就不是外框不变里面变大了 } .img{ display: block; width: 100%; height: 100%; transition: all 1s; } .img:hove
css scale 缩放基准点
热门推荐
solocao的专栏
10-09 2万+
使用transform-origin来进行控制 在使用transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点。 用法：transform-origin: 10px 10px; 共两个参数，表示相对左上角原点的距离，单位px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离； ...
C# 载入窗体时，从中心放大动画 代码
最新发布
06-07
在 C# 中实现窗体载入时从中心放大的动画效果，可以使用 `System.Windows.Forms.Timer` 控件和 `Graphics` 类的缩放方法。以下是实现该效果的代码示例: ```csharp public partial class Form1 : Form { private float scale = 1.0f; private Timer timer; public Form1() { InitializeComponent(); this.StartPosition = FormStartPosition.CenterScreen; // 设置窗体在屏幕中央 this.timer = new Timer(); this.timer.Interval = 10; this.timer.Tick += new EventHandler(timer_Tick); this.timer.Start(); } private void timer_Tick(object sender, EventArgs e) { if (scale < 1.0f) { scale += 0.1f; // 每次缩放 0.1 倍 this.Invalidate(); // 重绘窗体 } else { this.timer.Stop(); // 动画结束，停止计时器 } } protected override void OnPaint(PaintEventArgs e) { base.OnPaint(e); Graphics g = e.Graphics; g.ScaleTransform(scale, scale); // 缩放窗体 } } ``` 在上面的代码中，我们定义了一个名为 `scale` 的变量，用于保存窗体的缩放比例；另外，我们创建了一个 `System.Windows.Forms.Timer` 控件，用于定时执行动画效果。在 `Form1` 的构造函数中，我们将计时器的 `Interval` 属性设置为 10 毫秒，每次执行 `timer_Tick` 方法时，窗体的缩放比例 `scale` 将增加 0.1 倍，直到达到 1.0 倍为止。我们在 `OnPaint` 方法中使用 `Graphics` 类的 `ScaleTransform` 方法进行窗体的缩放操作。最后，在 `Form1` 的构造函数中启动计时器，以开始动画效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值