这里只是鼠标移入的时候出现的动态效果，并没有使用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. TableLayout和Viewpager实现切换

    因为我是在之前的基础上写的,所以这个TableLayout和Viewpager实际上是写在Fragment上的.要写到Activity里其实也是一样的啦. 先看效果图,原谅我不会动态图,只能截个图啦 ...

  2. ＃一周五＃ VS2015 CTP6, TFS2015 CTP1更新，老衣的开发工具汇总，2015 MVP 社区巡讲

    又到周五,这一周博主我工作效率极高,每天更新博客一篇,<快速创建网站>系列已经进程大半了,希望这个系列能够对大家有所帮助.今天周五了,博主要休息一下,就给大家唠叨一下这段时间都发生了什么. ...

  3. 写论文如何做相关工作(realted work)的调研

    1.找一篇目标研究领域的中文综述,读懂,对该领域有了些基本的了解,如何找到好的综述,就是要关注一些大牛的实验组的综述和进展: 2.找该中文综述引用的外文文献来看,通常是一些比较经典的文献 3.找这些外 ...

  4. Android Hal 分析

    本文是基于android4.0.3.对应其他低版本的代码,可能有所差异,但基本大同小异. Android的HAL是为了保护一些硬件提供商的知识产权而提出的,是为了避开linux的GPL束缚.思路是把控 ...

  5. Linux网络设置(第二版) --互联网寻址过程

    Linux网络设置 --互联网寻址过程 1.TCP/IP与OSI参考模型比较 TCP/IP OSI 物理层 网卡 数据链路层 * MAC地址 网络层 IP,ICMP,ARP协议 传输层 TCP,UDP ...

  6. 第十八篇 ANDROID的声音管理系统及服务

     声音管理系统用来实现声音的输入和输出.声音的控制和路由等功能,包括主和各种音源的音量调节.声音焦点控制,声音外设的检测和状态管理,声音源输入和输出的策略管理.音效的播放.音轨设置和播放.录音设置 ...

  7. 【Android 应用开发】BluetoothClass详解

    一. BluetoothClass简介 1. 继承关系 public final class BluetoothClass extends Object implements Parcelable 该 ...

  8. Android BLE与终端通信（一）——Android Bluetooth基础API以及简单使用获取本地蓝牙名称地址

    Android BLE与终端通信(一)--Android Bluetooth基础API以及简单使用获取本地蓝牙名称地址 Hello,工作需要,也必须开始向BLE方向学习了,公司的核心技术就是BLE终端 ...

  9. iOS视频播放Demo VideoPlayerDemo

    VideoPlayerDemo https://github.com/CaliosD/VideoPlayerDemo 一个视频播放的例子,使用了pod.

  10. linux下64位汇编的系统调用(3)

    背景知识基本交代清楚了,下面我们实际写一个小例子看一下.代码的功能很简单,显示一行文本,然后退出.我们使用了syscall中的write和exit调用,查一下前面的调用号和参数,我们初步总结如下: w ...