暑期学习日记35：图片缩放动画

今天学习了使用html+css实现图片缩放动画，将鼠标移动到图片上会使图片放大。

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片缩放动画</title><style>.main{width:200px;height:175px;position: relative;overflow: hidden;}.main img{width: 200px;}.main img:hover{transform: scale(1.5);transition: 0.5s;cursor: pointer;}.btys{width: 100%;height: 30px;background: black;position: absolute;bottom: 0px;left: 0px;opacity: 0.5;}.main a{position: absolute;bottom: 5px;left: 50px;color: white;text-decoration: none;}</style>
</head>
<body><div class="main"><img src="hua1.jpg" alt=""><div class="btys"></div><a href="">这是一朵花花</a></div>
</body>
</html>

显示效果为：

正常状态下：

鼠标移入图片后：

暑期学习日记35：图片缩放动画相关推荐

【iOS】图片缩放动画
iOS 开发中,可用 UIView 的下述方法实现图片的缩放动画效果: + transitionWithView:duration:options:animations:completion: 示例代 ...
android图片缩放动画,Android开发笔记——点击查看大图过渡动画与图片缩放与移动...
从一个activity到另一个activity的过渡 1.小图点击事件代码@Override public void onClick(View view) { switch (view.getId() ...
android图片缩放动画,Android动画共享元素(例列表图片放大到详情图片动画)
一.什么是共享元素简单来说共享元素就是两个Activity中都拥有此元素,在第二个Activity中进行强调而展示一些的动画效果.例如圆按钮的漂移动画.图片的放大动画. 二.为什么使用共享元素主要 ...
暑期学习日记31：js实现轮播图
本次学习了使用js实现轮播图效果,逻辑为: (1)通过函数autochange()将横向排列的图片列表定时左移,来达到自动轮播的效果. (2)通过imggo(n)函数通过改变marginleft样式移 ...
暑期学习日记19：CSS表单
通过使用 CSS,可以极大地改善 HTML 表单的外观,如: 使用 width 属性来确定输入字段的宽度. 使用 padding 属性在文本字段内添加空间. 使用 border 属性更改边框的粗细和颜 ...
暑期学习日记34：js全选功能
今天学习了使用js实现全选功能,点击全选的复选框后会将下面所有的复选框变为被选择状态. 代码如下: <!doctype html> <html> <head> &l ...
暑期学习日记33：登录页面
今天学习使用html+css制作了登录页面,与之前用js制作的验证码生成可以结合起来成为一个具有验证登录功能的页面. 代码如下: <!doctype html> <html> ...
暑期学习日记32：导航栏和导航下拉菜单
今天学习了用HTML+CSS制作导航栏和下拉菜单.代码如下: <!doctype html> <html> <head> <meta charset=&quo ...
暑期学习日记26：js实现支付成功页面跳转
本周学习了用js实现支付页面的跳转功能,逻辑为: 1.在支付界面时,点击确定支付,弹出确认框,确认后跳转到支付成功页面. 2.在支付成功界面时,会在倒计时10秒后自动跳转页面,或者点击立即返回立即跳转 ...

暑期学习日记35：图片缩放动画

暑期学习日记35：图片缩放动画相关推荐

最新文章

热门文章