一些简单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 ...
随机推荐
- IOS Bug分析
异常代码是SIGABRT.通常, SIGABRT 异常是由于某个对象接收到未实现的消息引起的. 或者,用简单的话说,在某个对象上调用了不存在的方法. iOS应用崩溃日志分析 分析iOS Crash文 ...
- 如何提高android串口kernel log等级
在 /device/qcom/common/rootdir/etc/init.qcom.rc write /proc/sys/kernel/printk "6 6 1 7" 第一 ...
- 【leetcode❤python】 111. Minimum Depth of Binary Tree
#-*- coding: UTF-8 -*- # Definition for a binary tree node.# class TreeNode(object):# def __init ...
- block 实现原理（内存管理详解）（二）
在以前,MRC环境下,使用block很可能会出现内存泄漏问题,并且在以往的面试中,一些接触比较久的程序员都会喜欢问到这个问题,block内存泄漏的问题! 下面,我来介绍一下,MRC下Block内存泄漏 ...
- 关于JDK的配置
① 安装官网下载的相应JDK安装包. 现在官网主推JDK8,JDK7以及更老的版本需要注册才能提供下载链接. ② 比如个人下载的jdk7-xxx.exe,安装路径为C:\Program Files\J ...
- Latex中关于参考文献的一些经验
又到了继春节后的又一个投稿高峰,在Latex中写参考文献时经常会出现这样那样的问题,而且出版社不同比如IEEE与Elaver,需要引入的包也有不同.在search解决方案时,发现一篇有用的博文,转载一 ...
- Oracle的数据恢复——Flashback用法汇总
/* 11g的flashbackup 分好几种,分别用途不一样. A.flashback database 闪回数据库,简单理解就是把数据库闪回到某个以前的时间点, 能恢复到的最早的SCN, 取决与F ...
- Oracle同义词学习
oracle的同义词总结 从字面上理解就是别名的意思,和视图的功能类似.就是一种映射关系. 同义词拥有如下好处: 节省大量的数据库空间,对不同用户的操作同一张表没有多少差别; 扩展的数 ...
- iOS - OC 基本语法
1.常见文件扩展名 .c C 语言源文件 .cc..cpp C++ 语言源文件 .m Objective-C 源文件 .mm Objective-C++ 源文件 .h 头文件 .pl Perl 源文件 ...
- iOS - UIStoryboard
前言 NS_CLASS_AVAILABLE_IOS(5_0) @interface UIStoryboard : NSObject @available(iOS 5.0, *) public clas ...