一些简单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 ...
随机推荐
- bmp格式图片文件读取
C++读取bmp图片 #include <windows.h> #include <stdio.h> #include <stdlib.h> #include &l ...
- JavaScript的数据类型
JavaScript的数据类型 1.JavaScript的数据类型包括:字符串.数值.布尔.数组.对象.Null.Undefined. 2.JavaScript拥有动态类型,这以为着同一个变量可用作不 ...
- HDU 4997 Biconnected （状态压缩DP）
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=4997 题意:一个n个点的完全图中去掉一些边.求这个图有多少个子图是边双联通的.(就是去掉任意一条边之后 ...
- pch和info.plist初探
整理下之前的关于pch和info.plist文件,一下文件部分内容是从传智博客的课件里截取
- How To PLAY_SOUND in Oracle Forms
Play_sound is used to play audio files in Oracle Forms, Play_Sound plays the sound object in the spe ...
- XML详解：第三部分 XML解析
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- 移动应用调试之 Inspect
移动端开发时,我们常使用chrome自带的模拟器,模拟各种手机设备. 但模拟毕竟是模拟,当开发完毕,使用真机访问页面出现问题时如何调试呢? 下面介绍2种针对android机的调试方法 一.直接使用Ch ...
- ubuntu 安装JDK
下载JDK6安装包,我的为32位系统所以选择jdk-6u35-linux-i586.bin 下载地址:http://www.oracle.com/technetwork/java/javase/dow ...
- oracle的基本概念
一·简介 1)数据库(DataBase) 用于存放数据,管理数据的存储仓库,是有效组织在一起的数据集合. 2)常用数据库软件 大型数据库:Oracle 中小型数据库:Mysql MySQL 3)RDB ...
- linux学习笔记2-命令总结1
计划一个长期过程系统学习linux,这是本周学习总结,如果错误望指出纠正. 文件处理命令 命令格式与目录处理命令 ls 目录处理命令 cd cp mkdir mv pwd rm rmd ...