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()可以实现按比例放大或者缩小功能. ...
随机推荐
- Flink组件及特性
Flink 是一个针对流数据和批数据的分布式处理引擎.它主要是由 Java 代码实现.目前主要还是依靠开源社区的贡献而发展.对 Flink 而言,其所要处理的主要场景就是流数据,批数据只是流数据的一个 ...
- 关于OPC连接读写下位机PLC(转)
原文转自:http://blog.csdn.net/u012252959/article/details/49736285?locationNum=11 开发OPC客户端程序时,首先应该生成OPC服务 ...
- Babel编译:类继承
编译前 // 父类 class Fruit { static nutrition = "vitamin" static plant() { console.log('种果树'); ...
- 阿里云 Centos7 部署 Django 项目
前期准备 阿里云服务器 mysql数据库 已经本地运行成功的项目 阿里云服务器的环境配置 Git #代码管理 Gitlab #代码托管,要求服务器内存不低于2G,我选择放弃 Mysql #连接数据库 ...
- 配置idea中类头注释中的 ${user} 自动获取电脑的名字,怎么去修改名字
在idea安装路径下找到 idea\IntelliJ IDEA 2018.3.2\bin下面有一个文件叫:idea64.exe.vmoptions 编辑此文件就能修改主时钟自动获取的名称: 例如:添加 ...
- mysql的my.sock不存在问题
因为是初步学习Linux,所以为了对其更加了解,没有使用yum对mysql进行安装,而是使用xftp6的方式上传然后解压安装 1.在安装过程中,好像如果不安装在usr/local目录下会存在不能启动的 ...
- mysql驱动表与被驱动表及join优化
驱动表与被驱动表 先了解在join连接时哪个表是驱动表,哪个表是被驱动表:1.当使用left join时,左表是驱动表,右表是被驱动表2.当使用right join时,右表时驱动表,左表是驱动表3.当 ...
- notepad++通过调用cmd运行java程序
notepad++运行java程序方法主要有下面两个: 通过插件NppExec运行(自行百度“notepad++运行java”) 通过运行 调用cmd编译执行java程序(下面详细讲解) 点击上面工具 ...
- 开篇——从程序员到IT经理
2002年~2005年我在广州的广东水力电力职业技术学院求学,主修网络工程.求学期间,我从事最多的就是玩游戏,当时就是玩MU和CS,所以有一门编程课叫C语言的“肥佬”(广东话)了,要补考,没办法,于是 ...
- 获取kafka最新offset-scala
无论是在spark streaming消费kafka,或是监控kafka的数据时,我们经常会需要知道offset最新情况 kafka数据的topic基于分区,并且通过每个partition的主分区可以 ...