这里只是鼠标移入的时候出现的动态效果，并没有使用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. 【重构】 代码的坏味道总结 Bad Smell (一) (重复代码 | 过长函数 | 过大的类 | 过长参数列 | 发散式变化 | 霰弹式修改)

    膜拜下 Martin Fowler 大神 , 开始学习 圣经 重构-改善既有代码设计 . 代码的坏味道就意味着需要重构, 对代码的坏味道了然于心是重构的比要前提; . 作者 : 万境绝尘 转载请注明出 ...

  2. android ndk编译项目(android-ndk-16r1)

    由于采用android-ndk-16r1版本的ndk来编译 编译的环境之类在这里省略,注意是最后编译的命令如下 Administrator@WIN-AF6P80LVIJ0 ~ $ cd $ANDROI ...

  3. LIRe提供的图像检索算法的速度

    本文翻译了LIRe的作者Mathias Lux发表的论文<LIRe: Lucene Image Retrieval - An Extensible Java CBIR Library>.主 ...

  4. jQuery的ajax使用

    一:jQuery.ajax语法基础 jQuery.ajax([options]) 概述:通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $. ...

  5. 如何使用ZOL一键安装器下载中关村在线的源安装包

    如何使用ZOL一键安装器下载中关村在线的源安装包 马根峰               (广东联合电子服务股份有限公司, 广州 510300) 摘要    中关村在线最近开始推出ZOL一键安装器,用户直 ...

  6. XML 和 java对象相互转换

    XML 和 java对象相互转换 博客分类: XML 和 JSON   下面使用的是JDK自带的类,没有引用任何第三方jar包. Unmarshaller 类使客户端应用程序能够将 XML 数据转换为 ...

  7. JVM组成

    java内存组成介绍:堆(Heap)和非堆(Non-heap)内存 按照官方的说法:“Java 虚拟机具有一个堆,堆是运行时数据区域,所有类实例和数组的内存均从此处分配.堆是在 Java 虚拟机启动时 ...

  8. 新盘进行LVM的划分

    echo "- - -" > /sys/class/scsi_host/host2/scan LVM是 Logical Volume Manager(逻辑卷管理)的简写,它由 ...

  9. FFmpeg备忘录

    av_dup_packet函数 av_dup_packet会为destruct指针为av_destruct_packet_nofree的AVPacket新建一个缓冲区,将原有的缓冲区数据拷贝至新缓冲区 ...

  10. 【读书笔记】C++Primer---第二章

    1.C++基本数据类型:字符型.整型.浮点型等: 2.算术类型如下表,下表只是表示C++要求的最小储存空间,但是一般编译器使用的都比所要求的储存空间大,以前类型所能表示的最大值也因机器的不同而有不同的 ...