[CSS] Scale on Hover with Transition
效果
源码
<!doctype html> <html class="outline color"> <head> <meta charset="utf-8">
<title>图片scale动画</title> <style>
.img-box {
position: relative;
width: 740px;
height: 420px;
overflow: hidden;
}
/* 彩色图片缩放动画 */ .img-box>.image-scale {
position: absolute;
width: 900px;
height: 580px;
top: -80px;
left: -80px;
background-size: cover;
transition: all 0.5s ease-in-out;
} .img-box:hover>.image-scale {
transform: scale(0.822);
}
</style> </head> <body> <div class="img-box">
<div class="image-scale" style="background-image: url(./images/1.jpg);"></div>
</div> </body> </html>
img-box: 装图片的盒子,确保子元素超出部分隐藏起来.
image-scale: 绝对定位,并手动设置图片居中.
素材
[CSS] Scale on Hover with Transition的更多相关文章
- css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层,正常是 里外层 鼠标上来 外层有hover,如果就想到里层hover触发外层hover,要用外层position 定义绝对定位,内层的hover跳出外层的div,这样视觉上就是两个单独的div,进行内外层联动。
css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层,正常是 里外层 鼠标上来 外层有hover,如果就想到里层hover触发 ...
- 在css中使用hover来控制其他元素的样式,该两个元素必须是父子元素
.col-3:hover .check-box { display: block; } 在css中使用hover来控制其他元素的样式,该两个元素必须是父子元素!!!!
- CSS中2d转换:transition过渡放在:hover伪类中与应用在整个元素中区别
css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...
- CSS动画:animation、transition、transform、translate
https://blog.csdn.net/px01ih8/article/details/80780470 一.区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画). ...
- 402 CSS菜鸟:transform and transition
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- css中的transform,transition,translate的关系
transform 旋转(transform是没有动画效果,你改变了它的值,元素的样子就唰的改变了.其中的位移的函数名就叫translate,所以说,translate是transform的一部分.) ...
- 两种纯CSS方式实现hover图片pop-out弹出效果
实现原理 主要图形的组成元素由背景和前景图两个元素,以下示例代码中,背景元素使用伪元素 figure::before 表示, 前景元素使用 figure img 表示,当鼠标 hover 悬浮至 fi ...
- CSS 3D旋转 hover 后设置transform 是相对于正常位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css中关于transform、transition、animate的区别
写动画经常会用到这几个属性,他们之间有什么区别呢? 1.transform 每每演示transform属性的,看起来好像都是带动画.这使得小部分直觉化思维的人(包括我)认为transform属性是动画 ...
随机推荐
- silverlight属性改变事件通知
工作中遇到silverlight本身没有提供的某些属性改变事件,但又需要在属性改变时得到通知,Google搬运stack overflow,原地址 /// Listen for change of t ...
- java中最常见的几种运行时异常,你get了吗?
NullPointerException (空指针异常) ClassCastException (类型强制转换异常) NumberFormatException (数字格式异常) NegativeAr ...
- 一文了解Python中的判断语句
判断(if)语句 目标 开发中的应用场景 if 语句体验 if 语句进阶 综合应用 01. 开发中的应用场景 生活中的判断几乎是无所不在的,我们每天都在做各种各样的选择,如果这样?如果那样?…… 程序 ...
- ML - 特征选择
1. 决策树中的特征选择 分类决策树是一种描述对实例进行分类的树型结构,决策树学习本质上就是从训练数据集中归纳出一组分类规则,而二叉决策树类似于if-else规则.决策树的构建也是非常的简单,首先依据 ...
- 好用的shell可以事半功倍
程序员离不开shell,一个好用的shell可以事半功倍,推荐zsh以及一些插件 # install zsh $ brew install zsh # install a framework, we ...
- Ambari集群移动现有复制到另外地方或更改ip地址,导致各项服务组件上为黄色问号代表心跳丢失的解决方案(图文详解)(博主推荐)
前言 最近,是在做集群搬移工作,大家肯定会遇到如下的场景. (1) 比如,你新购买的电脑,初步者学习使用Ambari集群.从旧电脑复制到新电脑这边来. (2) 比如,你公司Ambari集群的ip,因业 ...
- linux命令-awk入门
最近经常查看nginx日志,有时候需要做一些统计分析,于是就想起了awk,学习了就顺便做一个记录. 目录 概述:简单介绍awk背景原理 基本用法:常用到的awk语法 内建变量 综合实例 概述 awk是 ...
- Java 容器源码分析之 LinkedList
概览 同 ArrayList 一样,LinkedList 也是对 List 接口的一种具体实现.不同的是,ArrayList 是基于数组来实现的,而 LinkedList 是基于双向链表实现的.Lin ...
- Python爬虫之诗歌接龙
介绍 本文将展示如何利用Python爬虫来实现诗歌接龙. 该项目的思路如下: 利用爬虫爬取诗歌,制作诗歌语料库: 将诗歌分句,形成字典:键(key)为该句首字的拼音,值(value)为该拼音对 ...
- TensorFlow.js入门(一)一维向量的学习
TensorFlow的介绍 TensorFlow是谷歌基于DistBelief进行研发的第二代人工智能学习系统,其命名来源于本身的运行原理.Tensor(张量)意味着N维数组,Flow(流)意味着 ...