CSS3 transition transform属性及实例详解-鼠标放到图片上图片等比例放大

CSS3的transform:scale()可以实现按比例放大或者缩小功能,transform呈现的是一种变形结果。

CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡,transition呈现的是一种过渡,是一种动画转换过程,如渐显、渐弱、动画快慢等。

transiton:过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间;

transiton:transition-property  transition-duration  transition-timing-function  transition-delay

transition-property :指定要过渡的css属性

transition-duration: 指定完成过渡花费的时间

transition-timing-function: 指定速度效果的速度曲线,取值:

linear:匀速
ease: 默认,动画以低速开始,然后加快,在结束前变慢。
ease-in:缓慢开始(加速)
ease-out:缓慢结束(减速)
ease-in-out:缓慢开始,缓慢结束(先加速后减速)

transition-delay:指定过渡效果何时开始

CSS3 transition transform实例-鼠标放到图片上图片等比例放大

Html代码:

<div> <img src="1.jpg" /> </div>

CSS代码:

div {
    width: 500px;
    height: 500px;
    border: #000 solid 1px;
    margin: 50px auto;
    overflow: hidden;
}
div img {
    cursor: pointer;
    transition: all 0.7s;
}
div img:hover {
    transform: scale(1.5);
}

代码解释:

transition: all 0.6s;表示所有的属性变化在0.6s的时间段内完成。

transform: scale(1.4);表示在鼠标放到图片上的时候图片按比例放大1.4倍。

兼容各浏览器的实例代码,请阅读《鼠标指向图片实现放大效果-CSS3特效》一文。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/2405.html

(0)
江山如画的头像江山如画管理团队
上一篇 2018年8月1日 上午7:46
下一篇 2018年8月1日 下午10:10

99%的人还看了以下文章

  • Html5一句代码制作语音搜索框

    HTML5+CSS3打造可自动获得焦点和支持语音输入的超酷搜索框

    2022年3月19日 网页制作
    9720
  • jquery动态新增元素节点.click点击事件失效的2个解决方法

    问题: ajax读取留言列表,每条留言后面有个回复按钮,class为“reply”,用$(“.reply”).click(function(){ //do something… }),后面通过ajax加载进来的列表中的回复按钮,点击事件会失效。 解决方法: 最简单的方法就是直接在标签中写onclick=”&#8…

    2019年2月16日
    3.6K0
  • 第7课:元素的分类与标识(class和id)

    有时,你希望对特定元素或者特定一组元素应用特殊的样式。在这一课,我们将深入学习如何利用class和id来为所选元素指定属性。 如何实现为网站上许多标题中的某一个单独应用颜色?如何实现把网站上的链接分为不同的类,并对各类链接分别应用不同的样式?这只是本课将解决的诸多问题中的最具代表性的两个问题。 用class对元素进行分类 比方说,我们有两个由链接组成的列表。…

    2020年2月25日
    2.8K0
  • Zoho Docs-在网页中嵌入PPT的最佳方案(个人版5G免费)

    Zoho WorkDrive – 全面的在线共享文档工具 在125建站网上想嵌入PPT,分享给大家 ,并且可以播放。 我思考了三种方法: 是在Zoho Docs上操作; 是PPT以图片的形式保存(动画效果没有了),直接轮播; 是自己手写动画+轮播,达到PPT播放效果(用express.js来实现)比较复杂,并且对小白站长不适用。 很自信的要自己手…

    2023年1月16日 网页制作
    8810
  • css布局基础:行内元素、块级元素练习

    主要知识点: 1、理解什么是行内元素?什么是块级元素? 2、知道块级元素能够设置宽高,行内元素不可设置宽高(替换元素可以)。 3、掌握display属性的使用。 4、掌握css伪类选择器的使用。 扩展: 1、nth-child()选择器 选择其父元素的第n个子元素。 效果图: 参考: <nav> <ul> <li><…

    2020年4月4日
    2.2K0
  • 纯CSS3制作的垂直手风琴效果,点击标题展开详细介绍

    纯CSS3制作的垂直手风琴效果 CSS代码: @import url(“css/font-awesome.css”); * { margin: 0; padding: 0; } *, *:before, *:after { box-sizing: border-box; } html, body { height: 100%; font: 16px/1 ‘O…

    2018年12月26日
    2.7K0

发表回复

登录后才能评论