用于WebKit的CSS诀窍[译]（3）
作者：vocal 来源：前端观察 发布时间：2009-03-11 20:03:00
标签：css,浏览器,Safari,Chrome,WebKit
动画图片翻转
另一个前端工程师常见的现象是，当用户将鼠标放到图片上时，变换为另一张图片。在这个技巧中，让我们看看如何让图片从一个到另一个渐变交换，而不是简单的直接交换两张图片。实现这个效果的CSS和HTML如下：
div.swapper img { -webkit-transition: opacity 1s ease-in-out; }
img.img1, div.swapper:hover img.img2 { opacity: 1.0; }
div.swapper:hover img.img1, img.img2 { opacity: 0; }
<div class="swapper">
<img class="img1" style="position: absolute;" src="megan.jpg">
<img class="img2" src="megan2.jpg">
</div>
在这里，”transition”属性使用简化符号来指定（图片）过渡的所有参说。第一个参数将属性指定为动画，第二个参数指定时间，第三个参数为简便指定时间功能。”ease-in-out”只是众多你可以只有支配的时间功能中的一个。你还可以指定一个线形变换、渐入、渐出或高级的立体贝塞尔曲线效果！
你可以自己亲身体验一下这个效果，你将会看到下图中的效果。
截图4. 一个CSS只能制定一个渐变效果
设想: 纯CSS的渐变效果！
0
投稿猜你喜欢
- 最近有需求是，需要把对方提供的ftp地址上的图片获取到本地服务器，原先计划想着是用shell 操作，因为shell 本身也支持ftp的命令
本文为大家分享了pygame游戏之旅的第12篇，供大家参考，具体内容如下实现点击功能：click = pygame.mouse.get_pr- 前言为了机器人在寻路的过程中避障并且找到最短距离，我们需要使用一些算法进行路径规划（Path Planning），常用的算法有Djikstr
- 本文实例为大家分享了pyqt实现右下角弹出框的具体代码，供大家参考，具体内容如下构造函数中：self.desktop=QDesktopWid
- AttribteError: ‘module' object has no attribute xxx'描述:模块没有相关属
- 仿照微信朋友圈做了一个界面如下，先看效果：1、点开界面2、选择图片3、点击上传4、动态显示第一个页面的wxml：<view class
- 删除 [HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manage
- 本文实例讲述了Python企业编码生成系统总体系统设计。分享给大家供大家参考，具体如下：一 系统功能结构二 系统主界面三
- 通常的情况是，我们一般会载入一个模板文件，然后用 Context渲染它，最后返回这个处理好的HttpResponse对象给用户。 我们已经优
- 前言在访问量大的时候，为了提高查询效率，我们会将数据先缓存到redis中。先查询redis，查询不到再去查询数据库，实现这个逻辑也不复杂，写
- 注:以String类型为例一.导出redis某个库的数据import redisimport jsonfile_path = "w
- Math.random()Math.random()是JavaScript默认提供的生成随机数的方法。该方法返回一个0到1之间的浮点数，其值
- 我一直很难理解Javascript语言的继承机制。它没有"子类"和"父类"的概念，也没有"
- Select CONCAT( 'drop table ', table_name, ';' ) FROM i
- #!/usr/bin/env python# -*- coding:utf-8-*-# file: {NAME}.py# @author:
- 本文实例讲述了Python自定义函数计算给定日期是该年第几天的方法。分享给大家供大家参考，具体如下：写一个函数，计算给定日期是该年的第几天．
- 之前给大家介绍过python高手之路python处理excel文件(方法汇总) Python操作Excel之xlsx文件&nbs
- 一、前言本来写了脚本用于暴力破解密码，可是1秒钟尝试一个密码2220000个密码我的天，想用多线程可是只会一个for全开，难道开222000
- 一个常常令设计师和前端开发人员都头疼的事情就是字体的使用，设计师常常在设计稿中使用某些很漂亮的字体，以实现比较酷炫的界面。但这样常常给编码人
- Tebsorflow开源实现多GPU训练cifar10数据集：cifar10_multi_gpu_train.pyTensorflow开源实
