这里只是鼠标移入的时候出现的动态效果，并没有使用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. hadoop学习要点

    一.HDFS (一)HDFS 概念 (二)HDFS命令行接口 (三)Java 接口 (四)文件读取和文件写入,一致性 (五)集群数据的均衡 (六)存档 (七)NameNode 单点故障问题 (八)大量 ...

  2. 《java入门第一季》之面向对象综合小案例

    需求: /*     教练和运动员案例         乒乓球运动员和篮球运动员.         乒乓球教练和篮球教练.         跟乒乓球相关的人员都需要学习英语.         分析,这 ...

  3. Mplayer 的编译

    由于项目要用到mplayer,所以要对mplayer进行编译,首先我的平台如下: 系统:windows xp2 安装好mingw+msys,目录为c:/mingw,其中装的gcc是4.3.2版本的. ...

  4. 停止预览时调用Camera.release(), 出现Method called after release()异常问题原因及解决办法

    如下代码: private void stopPreview() { Log.w(TAG, "stopPreview(), _isPreviewing = " + _isPrevi ...

  5. ExtJS：Grid数据导出至excel实例

    导出函数ExportExcel() var config={ store: alldataStore, title: '测试标题' }; var tab=tabPanel.getActiveTab() ...

  6. OpenCV 透视变换实例

    参考文献: http://www.cnblogs.com/self-control/archive/2013/01/18/2867022.html http://opencv-code.com/tut ...

  7. LeetCode之“字符串”：ZigZag Conversion

    题目链接 题目要求: The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of ...

  8. C++项目中的extern "C" {}（转）

    注:本文转自吴秦先生的博客http://www.cnblogs.com/skynet/archive/2010/07/10/1774964.html#.吴秦先生的博客写的非常详细深刻容易理解,故特转载 ...

  9. java 调用JRuby

    1.core package vanilla; import org.jruby.embed.ScriptingContainer; public class HelloWorld { private ...

  10. javascript内置对象速查（一）

    字符串对象 var str = new String("Hello World"); 可以调用其中的一些方法: str.length str.big 日期对象 var dt = n ...