一些简单css3效果的整理
代码：
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="con con1">
<img src="1.jpg" class="img1">
<h2>第一文字</h2>
<p>下方文字闪出来</p>
</div>
<div class="con con2">
<img src="2.jpg">
<p class="p p1">第一先锋</p>
<p class="p p2">第二二先锋</p>
<p class="p p3">第三三三先锋</p>
</div>
<div class="con con3">
<img src="3.jpg">
<p>好好学习，天天向上好好学习，天天向上好
好学习，天天向上好好学习，天天向上好好
学习，天天向上好好学习，天天向上好好学
习，天天向上
</p>
</div>
<div class="con con4">
<img src="4.jpg">
<div class="con44">
<p>晨落梦公子</p>
</div>
</div>
<div class="con con5">
<img src="5.jpg">
<div class="box"></div>
</div>
<div class="con con6">
<img src="6.jpg">
<h2>旋转消失</h2>
<p>我只是内容不要看我</p>
</div>
<div class="con con7">
<img src="7.jpg">
<div class="box"></div>
</div>
<div class="con con8">
<img src="8.jpg">
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
<div class="con con9">
<img src="9.jpg">
</div>
</body>
</html>
css:
* {
list-style: none;
padding:;
margin:;
}
/*+++++++++++++++++++++con1++++++++++++++++++++++++++*/
.con {
position: relative;
float: left;
width: 350px;
height: 300px;
overflow: hidden;
}
.con img {
width: 100%;
height: 100%;
position: absolute;
}
.con1 .img1 {
width: 120%;
margin-left: -30px;
left:;
opacity:;
-webkit-transition: all 1s ease;
}
.con1:hover .img1 {
left: 30px;
opacity: 0.6;
}
.con1 h2 {
color: #fff;
position: absolute;
top: 180px;
left: 5px;
-webkit-transition: all 1s ease;
}
.con1:hover h2 {
top: 220px;
}
.con1 p {
color: #fff;
font-size: 12px;
position: absolute;
top: 300px;
left: 5px;
-webkit-transition: all 1s ease;
}
.con1:hover p {
top: 260px;
}
/*++++++++++++++++++++con2+++++++++++++++++++++++*/
.con2 p {
font-size: 12px;
color: #000;
position: absolute;
background: #ffffff;
padding: 5px;
}
.con2 .p1 {
top: 150px;
left: -80px;
-webkit-transition: all 1s ease-in-out;
}
.con2 .p2 {
top: 180px;
left: -100px;
-webkit-transition: all 1s ease-in-out;
-webkit-transition-delay: 0.2s;
}
.con2 .p3 {
top: 210px;
left: -120px;
-webkit-transition: all 1s ease-in-out;
-webkit-transition-delay: 0.4s;
}
.con2:hover .p1,
.con2:hover .p2,
.con2:hover .p3 {
left: 20px;
}
/*+++++++++++++++++++con3++++++++++++++++++++++++*/
.con3 p {
background: #fff;
color: #000000;
position: absolute;
text-indent: 2em;
font-size: 12px;
top: 300px;
-webkit-transition: all 1s ease-in-out;
}
.con3:hover p {
top: 255px;
}
/*+++++++++++++++++con4++++++++++++++++++++++++++++*/
.con4 .con44 {
width: 200%;
height: 100%;
background: #fff;
font-size: 12px;
color: #000000;
position: absolute;
top: 300px;
-webkit-transition: all 1s ease-in-out;
}
.con4 .con44 p {
margin-left: 300px;
line-height: 150px;
-webkit-transition: all 1s ease-in-out;
}
.con4:hover .con44 {
-webkit-transform: rotate(-20deg);
-webkit-transform-origin: 0 300px;
}
.con4:hover p {
-webkit-transform: rotate(20deg);
}
/*+++++++++++++++con5+++++++++++++++++++++++*/
.con5 img {
width: 120%;
left: -40px;
-webkit-transition: all 1s ease-in-out;
}
.con5:hover img {
left:;
}
.con5 .box {
border: 2px solid #000000;
width: 250px;
height: 250px;
position: absolute;
top: 25px;
left: 50px;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: -100px -100px;
-webkit-transition: all 1s ease-in-out;
}
.con5:hover .box {
-webkit-transform: rotate(0deg);
-webkit-transform-origin: 0 0;
}
/*++++++++++++++++++con6++++++++++++++*/
.con6 h2 {
position: absolute;
color: #000;
top: 100px;
left: 10px;
-webkit-transition: all 1s ease-in-out;
}
.con6 p {
font-size: 24px;
color: #000;
position: absolute;
top: 150px;
left: 10px;
-webkit-transition: all 1s ease-in-out;
}
.con6:hover h2, .con6:hover p {
-webkit-transform: skewX(90deg);
}
/*++++++++++++++++con7++++++++++++++++++++++++++*/
.con7 .box {
position: absolute;
border: 2px solid #fff;
width: 350px;
height: 300px;
-webkit-transition: all 1s ease-in-out ;
}
.con7 img {
width: 450px;
height: 400px;
left: -50px;
top: -50px;
-webkit-transition: all 1s ease-in-out;
}
.con7:hover img, .con7:hover .box {
opacity: 0.6;
-webkit-transform: scale(0.8);
}
/*+++++++++++++con8++++++++++++++++++++++++++*/
.con8 .top {
position: absolute;
top: 35px;
left: 25px;
width: 300px;
height: 1px;
background: black;
-webkit-transform: scale(0);
-webkit-transition: all 1s ease-in-out;
}
.con8 .bottom {
position: absolute;
top: 265px;
left: 25px;
width: 300px;
height: 1px;
background: black;
-webkit-transform: scale(0);
-webkit-transition: all 1s ease-in-out;
}
.con8 .left {
position: absolute;
top: 25px;
left: 35px;
width: 1px;
height: 250px;
background: black;
-webkit-transform: scale(0);
-webkit-transition: all 1s ease-in-out;
}
.con8 .right {
position: absolute;
top: 25px;
left: 315px;
width: 1px;
background: black;
height: 250px;
-webkit-transform: scale(0);
-webkit-transition: all 1s ease-in-out;
}
.con8:hover .right,
.con8:hover .top,
.con8:hover .bottom,
.con8:hover .left {
-webkit-transform: scale(1);
}
/*++++++++++++++con9++++++++++++++++++++++*/
.con9 {
-webkit-transition: all 1s ease-in-out;
}
.con9:hover {
opacity: 0.5;
}
这里记录一下鄙人对于animation和transition不同之处的理解（待补充。）
animation
可以实现永远循环的动画
transition
可以实现hover鼠标移除移入的动画
一些注意点：（带补充。）
1，transform的行使对象应该是块级元素
2，写hover动画的时候，默然对象状态要有和hover状态中与之对应的属性，例子：如果hover里面有left:30px,对应的原始状态里面也应该有left:0;
3，初始状态中有rotate(90deg),再在hover里面写rotate(0deg)，hover后目标元素应该是保持其应有的状态（这里指角度），而不是其应有状态在旋转-90度，移动，缩放等同理
4，动画有时候会设置旋转点，而这个设置应该在本身样式里面设置，而不是在hover里面设置。
一些简单css3效果的整理的更多相关文章
- css3网格效果（整理）
css3网格效果(整理) 一.总结 一句话总结: css3网格原理是渐变(linear-gradient)绘制图形,background-size属性指定重复的小单元的大小 多个渐变(linear-g ...
- web前端学习（三）css学习笔记部分（5）-- CSS动画--页面特效、HTML与CSS3简单页面效果实例
CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记,之后工作了进行内容的补充 7. CSS动画--页面特效 7.1 2D.3D转换 7.1.1 通过CSS3转换,我们能够对元素进行 ...
- 简单CSS3实现炫酷读者墙
如题,给大家介绍和讲解几个常用的CSS3属性,并用到实处. 先看demo(请使用Chrome或者Firefox浏览,IE的靠边): 点此查看实例 觉得爽的可以继续阅读下面的知识点,感觉不爽的可绕行. ...
- 精选12个时尚的 CSS3 效果【附源码下载】
这里是精选的12个很炫的 CSS3 效果.CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写复杂的 JavaScript ...
- 让你心动的 HTML5 & CSS3 效果【附源码下载】
这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...
- 8个前沿的 HTML5 & CSS3 效果【附源码下载】
作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...
- 新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】
新鲜出炉的30个精美的 jQuery & CSS3 效果[附演示和教程] 作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 ...
- 10款让你心动的 HTML5 & CSS3 效果
这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 1.超炫的 HT ...
- 12款令程序员惊叹的CSS3效果库
最新的CSS3都配备了新的特性,来设计创建动画和互动的网页.在本文中,可以找到一些非常优秀的CSS3效果库,来让你的Web设计看起来更加引人注目.还在等什么?让我们一起看起来吧! Animate.cs ...
随机推荐
- BZOJ 2324 营救皮卡丘（最小费用最大流）
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2324 题意:n+1个城市(0到n).初始时K个 人都在0城市.城市之间有距离.要求(1) ...
- Cheatsheet: 2013 11.12 ~ 11.30
Mobile Xcode 5 Essentials Android vs. iOS Development: Fight! Using MVC to Understand ASP.NET, iOS, ...
- jquery之 off()方法
off()函数用于移除元素上绑定的一个或多个事件的事件处理函数. off()函数主要用于解除由on()函数绑定的事件处理函数. 该函数属于jQuery对象(实例). 语法 jQuery 1.7 新增该 ...
- centos7 安装教程
1. 在安装的时候,不要用默认的最小安装.选择GNOME Desktop 2.自动分区的时候,选择自己进行分区 2个分区,1个大小为1024M的swap分区,剩下的分配一个ext3的分区.设备类型都选 ...
- spring加载hibernate映射文件的几种方式 (转)
在Spring的applicationContext.xml中配置映射文件,通常是在<sessionFactory>这个 Bean实例中进行的,若配置的映射文件较少时,可以用session ...
- [SAP ABAP开发技术总结]RETURN、STOP、EXIT、CHECK、LEAVE、REJECT
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- 快速查看SQL Server 中各表的数据量以及占用空间大小
快速查看SQL Server 中各表的数据量以及占用空间大小. CREATE TABLE #T (NAME nvarchar(100),ROWS char(20),reserved varchar(1 ...
- So easy Webservice 5.WSDL 文件说明
WSDL – WebService Description Language – Web服务描述语言 通过XML形式说明服务在什么地方-地址. 通过XML形式说明服务提供什么样的方法 – 如何调用. ...
- splay学习
今天学习了一下spaly..... 感觉除了比较难打,比较难调,但还是很好理解的啊.... 1588: [HNOI2002]营业额统计 Time Limit: 5 Sec Memory Limit: ...
- python_way day21 Django文件上传Form方式提交，原生Ajax提交字符处啊，Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式，Django验证码，抽屉示例，
python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...