这里只是鼠标移入的时候出现的动态效果，并没有使用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. Ext.Net_1.X_WINDOW遮罩层被GridPanel挡住

    通过调试HTML代码,发现其实是DIV. chrome 中修改DIV Z:INDEX 就不被遮住了?但是又晓得如何修改window的Z:INDEX.那就修改"背景"GP的吧.

  2. tomcat整合apache

    历时4个多小时,终于把tomcat与apache整合起来了. 中间出了各种各样的问题,现记录一下,也希望能对后来者有点帮助. 背景 apache与tomcat的区别联系大家都知道: tomcat能处理 ...

  3. Android 获取某apk的签名信息，可用作防盗版进入。

    转载请标明出处:  http://write.blog.csdn.net/postedit/45721779作者:skay 一般项目中有防盗版的需求,必须是正版软件才能使用,这就需要获取当前安装包的签 ...

  4. Web应用程序设计十个建议

    原文链接:  Top 10 Design Tips for Web Apps 原文日期: 2014年04月02日 翻译日期: 2014年04月11日 翻译人员: 铁锚 现代web应用通常在互联网上通过 ...

  5. Android下Json数据解析

    如从网络获取JSON 则需要创建一个工具类,该类返回一个字符串为JSON文本 package com.example.jsonapp; import java.io.InputStreamReader ...

  6. AndroidUI之绘图机制和原理 最完整的文章

    转载请标明出处:http://blog.csdn.net/sk719887916/article/details/39961171,作者:skay  导读: 熟悉javaGUI的朋友对java绘图必定 ...

  7. mahout系列----Dirichlet 分布

    Dirichlet分布可以看做是分布之上的分布.如何理解这句话,我们可以先举个例子:假设我们有一个骰子,其有六面,分别为{1,2,3,4,5,6}.现在我们做了10000次投掷的实验,得到的实验结果是 ...

  8. JVM学习--(六)类加载器原理

    我们知道我们编写的java代码,会经过编译器编译成字节码文件(class文件),再把字节码文件装载到JVM中,映射到各个内存区域中,我们的程序就可以在内存中运行了.那么字节码文件是怎样装载到JVM中的 ...

  9. IoC和DI的基本概念的思维导图

    最近在学习Spring开发,IoC这个概念让我有点儿迷糊,控制反转这四个字是在是无法做到望文生义,于是乎就找了一些材料来学习,研究了半天,绘制了下面这幅思维导图.仅供参考!

  10. 使用padding后内容超出父级元素

    解决方法: