CSS-动画,让图片上的图形有涨起来的效果(逐渐变高)和(逐渐变长)
效果图:

html:
<div class="inner3">
<div class="over">
<img src="data:image/kuang3tt.png" />
</div>
</div>
css:
.inner3{
margin-top: 20px;
width: 890px;
height:169px;
background: url(../image/kuang33.png) no-repeat;
}
.over{
position: absolute;
bottom: 32px;
left: 0;
height: 0;
width: 880px;
overflow: hidden;
animation: zt 2s ease 0.5s forwards;
}
.inner3 img{
margin-top: 12px;
margin-left: 63px;
height: 126px;
width: 810px;
position: absolute;
bottom: 0;
}
@keyframes zt
{
0% {height: 0;}
100% {height: 136px;}
}
CSS-动画,让图片上的图形有涨起来的效果(逐渐变高)和(逐渐变长)的更多相关文章
- CSS从大图片上截取小图标的操作
注:图片名称(tabicons.png)每个小图标width:18px;height:18px从左上角坐标为(-0px;-0px;); 例如第一个对号的坐标为(-0px;-0px;)第二个加号的图标为 ...
- CSS从大图片上截取小图标的操作(转)
一张图片,用CSS分割成多个小图标. css样式: .icon{ background:url(../images/tabicons.png) no-repeat;width:18px; line-h ...
- CSS从大图片上截取小图标
一张图片,用CSS分割成多个小图标. css样式: .icon{ background:url(../images/tabicons.png) no-repeat;width:18px; line-h ...
- css实现在图片上显示文字
一. 准备工作 1. 点击此下载 相关的文件 二. 浏览器中运行 play-img.html 文件,即可显示效果 三. 效果图
- CSS从大图片上截取小图标的操作以及三角形的画法
#name{ background:url(images/name.png) no-repeat 2px 2px; background-position: -2px -70px;//其中这个是定位图 ...
- css动画特效与js动画特效(一)------2017-03-24
1.用css做动画效果: 放鼠标才会发生 利用hover <head> <style> #aa{ background-color: red; width: 100px; he ...
- 用HTML和CSS实现WWDC 2015上的动画效果
用HTML和CSS实现WWDC 2015上的动画效果 动画效果WWDC 2015 原文:https://cssanimation.rocks/wwdc15/ 译者:周晓楷(@Helkyle) 每年 ...
- CSS 动画之十-图片+图片信息展示
这个动画主要是运用了一些css3的特性,效果是展示一张商品图片,然后在商品图片的制定位置显示该商品的详细信息.效果在chrome浏览器中预览. <!DOCTYPE html> <ht ...
- CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)
转载自:http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能. ...
随机推荐
- 5.2.k8s.Secret
#Secret Secret存储密码.token.密钥等敏感数据 Secret以Volume或环境变量方式使用 #Secret类型 Opaque : base64 编码格式的 Secret kuber ...
- 我在DBGridEh增加一栏复选框及对应操作的解决方案
最近客户有个需求,要求对单据列表里指定的单据进行批量审核,很自然的,我想到了在DBGridEh增加一栏复选框的列,审核时遍历所有单据,将打了勾的单据审核就可以了.查阅了网上很多文章,不外有2个方案,1 ...
- 动画演示 Delphi 2007 IDE 功能[2] - 定义变量
https://my.oschina.net/hermer/blog/319152 动画剧本: 第一个变量: 输入: var; 然后执行 Ctrl+J ... 回车 第二个变量: 执行 Ctrl+J; ...
- Debian或者Ubuntu中安装secureCRT/secureFX
1.官网下载 ubuntu 下的 xx.deb安装包.此处使用的安装包是scrt-sfx-8.5.4-1942.ubuntu16-64.x86_64.deb,点击下载,提取码:5em3. 2.安装 d ...
- text_to_be_present_in_element
text_to_be_present_in_element(locator,text)是指定页面元素的文本位置, 一般用于验证一个文本信息或者错误的信息,我们任然以百度登录为案例, 用户名和密码为空, ...
- .net core 学习小结之 自定义JWT授权
自定义token的验证类 using System; using System.Collections.Generic; using System.IO; using System.Linq; usi ...
- 删除MicrosoftOffice2016的扫尾工作
因为用到一些画流程图之类的工具,想到以前用的Visio挺好用的,就找来安装一下,结果因为装了Microsoft Office2016在安装时报错不断,先说下网上的帖子:用OfficeDeploymen ...
- CentOS7创建本地源过程
1)使用yum安装http服务(主节点) yum -y install httpd 2)将httpd服务加入系统自启动服务并设置开机启动 systemctl start httpd #启动apache ...
- 状态压缩dp相关
状态压缩dp 状态压缩是设计dp状态的一种方式. 当普通的dp状态维数很多(或者说维数与输入数据有关),但每一维总 量很少是,可以将多维状态压缩为一维来记录. 这种题目最明显的特征就是: 都存在某一给 ...
- 类———用类定义对象———error:C++表达式必须包含类类型
//原文参考https://blog.csdn.net/lanchunhui/article/details/52503332 你以为你定义了一个类的对象,其实在编译器看来你是声明了一个函数 clas ...