这里只是鼠标移入的时候出现的动态效果，并没有使用CSS的动画属性animation和变形属性transform。后面再补。。。

HTML代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="font_edpqa2m2qpp3c8fr/iconfont.css">
<link rel="stylesheet" href="index.css">
<body>
<div id="main">

// 每个li为一个框
<ul class="u1-items">
<li>
<div class="first"><img class="first-img" src="data:images/480_yugao.jpg" alt=""/>
<div class="items-icon">
<span><i class="iconfont icon-favorite"></i>
</span>
<span><i class="iconfont icon-caigou"></i></span>
</div>
<div class="items-txt">
<h2><span class="items-txt1">WARM </span><span class="items-txt2">OSCAR</span></h2>
</div>
</div>
</li>
<li>
<div class="second">
<img class="second-img" src="data:images/12.jpg"><h2><span>STRANGE</span><span>DEXTER</span></h2>
<h3>Dexter had his own strange way. You could watch him training ants.</h3>
<div class="items2-bd"> </div>
</div>
</li>

<li>
<div class="last">
<img src="data:images/1.jpg">
<h2><i class="iconfont icon-yinle"></i><span> Sweet </span><span>Marley</span></h2>
<div class="last-bd">

</div>

<div class="last-txt">
<p>Marley tried to convince her but she was not interested.</p>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>

Css代码：

#main ul li{
list-style-type: none;
width:360px;
height:360px;
display: inline-block;
padding:30px;

}
ul li img{
width: 360px;
height: 360px;
position: absolute;
}
.items-icon{
position: absolute;
margin-top: 300px;
margin-left: 300px;
z-index:1;
opacity: 0;
width: 100px;
height: 100px;
-webkit-transition: all 1s;
}
.second-img{
opacity: 0.9;
-webkit-transition: all 1s;
}
.second:hover .second-img{
opacity: 1;
}
.items-txt:hover{
opacity:0;
}
.first:hover .items-icon{
opacity: 1;

}
.items-txt{
background-color: rgba(43,43,43,0.6);
position:absolute;
z-index: 2;
width:360px;
height: 360px;
color: #fff;
-webkit-transition: all 1s;
}
.items-txt h2{
margin-left:20px;
margin-top:40px;
display: inline-block;
}
.second:hover h3{
opacity: 1;
}
.second:hover .items2-bd{
margin-top:180px;
}
.second h3{
display: inline-block;
position: absolute;
color: #ffffff;
font-size: 18px;
width: 200px;
margin-left: 70px;
margin-top: 200px;
opacity: 0;
-webkit-transition: all 1s;
}

.last h2{
color: #ffffff;
position: absolute;
margin-left: 120px;
margin-top: 90px;
-webkit-transition: all 1s;
}
.last-txt{
opacity: 0;
-webkit-transition: all 1s;
}
.last-bd{
border: 1px solid #ffffff;
height: 5px;
width: 300px;
margin: 0 auto;
position: absolute;
background-color: #ffffff;
margin-top: 150px;
margin-left: 30px;
opacity: 0;
-webkit-transition: all 1s;

}
.last-txt p{
color: #fff;
font-weight: 400;
margin-top: 200px;
font-size: 25px;
margin-left: 30px;
}

.last:hover h2{
margin-top:40px;
}
.last:hover .last-bd{
opacity: 1;
margin-top:70px;
}
.last:hover .last-txt{
opacity: 1;
}
.last-txt {
width:300px;
text-align: right;
position: absolute;
}
.last hr{
position:absolute;
}

.second h2{
display: inline-block;
position:absolute;
color: #ffffff;
margin-left: 70px;
margin-top: 60px;
}
.items2-bd{
display: inline-block;
width:270px;
height: 135px;
border:10px solid #ffffff;
position: absolute;
margin-left: 35px;
margin-top: 20px;
-webkit-transition: all 1s;
}

3个简单CSS实现的动态效果的更多相关文章

  1. 简单CSS定位瀑布流实现方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 简单CSS实现闪烁动画（+1白话讲解）

    原文:简单CSS实现闪烁动画(+1白话讲解) 本文转载于:猿2048网站⇒https://www.mk2048.com/blog/blog.php?id=icj2chj2ab 背景 本文承接自上文&l ...

  3. 循序渐进BootstrapVue，开发公司门户网站（2）--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果

    在我们开发的页面中,让页面有一些动画效果,可以让页面更加有吸引力,只要不是处理太过,一般人还是希望有一些动态效果,如滚动动画加载,悬停处理变化等效果,本篇随笔介绍使用wow.js动画组件以及自定义的C ...

  4. 简单CSS hack：区分IE6、IE7、IE8、Firefox、Opera

    一.跨浏览器的网页设计一直是让人很头疼的问题,这不只是因为浏览器的版本众多,还有一个重要的原因是相同浏览器的不同时期的版本也会有差异,甚至是在不同操作同台上还会有不同.因此使CSS hack技术进行浏 ...

  5. 简单CSS 布局

    CSS Layout CSS Layout 是对上下左右布局的一个简单封装,主要针对自己项目里面方便使用. 坚持组合大于继承的原则,复杂的布局也是由简单布局组成的. 所以不习惯margin/paddi ...

  6. 利用css实现hover动态效果

    .font em:hover { font-size: 2em } .font strong:hover { font-weight: normal } .font span:hover { colo ...

  7. 简单css实现input提示交互动画效果

    通过基础CSS实现输入提示交互动画效果,并兼容各浏览器! 1.效果展示 2.css代码 h4 { margin: 30px 0; } input { margin:; font-size: 16px; ...

  8. 简单CSS的应用

    今天主要学习了一些关于CSS的内容 通过css调试了一个简单的表格 <%@ page language="java" contentType="text/html; ...

  9. gulp 之一 安装及简单CSS，JS文件合并压缩

    最近研究了一下gulp构建工具,发现使用起来比grunt顺手一些.(个人感受),以下是grunt和gulp构建方式和原理: grunt 基于文件方式构建,会把文件先写到临时目录下,然后进行读文件,修改 ...

随机推荐

  1. Python学习笔记 - 列表生成式listComprehensions

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- list(range(1, 11)) # 生成1乘1,2乘2...10乘10 L = [] for x i ...

  2. Linux共享内存编程实例

    /*共享内存允许两个或多个进程进程共享同一块内存(这块内存会映射到各个进程自己独立的地址空间) 从而使得这些进程可以相互通信. 在GNU/Linux中所有的进程都有唯一的虚拟地址空间,而共享内存应用编 ...

  3. Cocos2D遍历场景图(Scene Graph)

    另一个Cocos2D有用的调试特性是打印出递归的打印出节点的孩子们. 你可以添加以下一行到MainScene或GameScene的didLoadFromCCB的方法中: [self.scene wal ...

  4. SpriteBuilder中如何平均拉伸精灵帧动画的距离

    首先要在Timeline中选中所有的精灵帧,可以通过如下2种的任意一种办法达成: 1按下Shift键的同时鼠标单击它们 2鼠标在Timeline空白区拖拽直到拉出的矩形包围住所有精灵帧方块后放开鼠标. ...

  5. java的参数传递与内存分配问题

    本文可作为北京尚学堂java课程的学习笔记. 看下面这段代码. class BirthDate { private int day; private int month; private int ye ...

  6. [译] NSScanner：一个陌生的条件判断利器！

    NSScanner官方文档 NSScanner类是一个类簇的抽象父类,该类簇为一个从NSString对象扫描值的对象提供了程序接口. NSScanner对象把NSString 对象的的字符解释和转化成 ...

  7. 【Visual C++】游戏编程学习笔记之四：透明动画实现

    本系列文章由@二货梦想家张程 所写,转载请注明出处. 本文章链接:http://blog.csdn.net/terence1212/article/details/44224963 作者:ZeeCod ...

  8. 框架页面高度自动刷新Javascript脚本

    实现原理:加载index.htm时候,每隔1秒钟自动调用脚本刷新框架页面代码 代码优点:只需要设置index.html框架页面中的脚本,调用加载的子页面中不需要设置任何代码. index.htm代码如 ...

  9. 内核调试工具 — kdump & crash

    kdump简介 kdump是系统崩溃的时候,用来转储运行内存的一个工具. 系统一旦崩溃,内核就没法正常工作了,这个时候将由kdump提供一个用于捕获当前运行信息的内核, 该内核会将此时内存中的所有运行 ...

  10. Gradle 1.12用户指南翻译——第三十九章. IDEA 插件

    本文由CSDN博客万一博主翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...