css3学习笔记之效果
<!DOCTYPE html>
<html>
<head>
<style>
#t1
{
border-radius: 15px;
width:60px;
height:40px;
background: #00FF99;
transition: width 1s, height 1s, transform 1s,background 1s,font-size 1s;
word-wrap:break-word;
font-size:5px;
text-align:center;
line-height:35px;
} #t1:hover
{
width:120px;
height:80px;
transform: rotate(360deg);
background: #33CCFF;
font-size:50px;
}
</style>
</head>
<body> <div id="t1">CSS3</div> </body>
</html>
CSS3还有很多未知的有趣的。。。。。
最终效果，虽然很丑，但是学了半天这样已经很累啦。。。。。
css3学习笔记之效果的更多相关文章
- CSS3学习笔记(3)-CSS3边框
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
- CSS3学习笔记之linear-gradient
我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...
- CSS3学习笔记（5）—页面遮罩效果
今天把页面遮罩的效果发一下,之前遮罩都是用JS实现的,忽然发现CSS3里面的box-shadow属性除了做立体阴影外,还可以做页面的遮罩. 下面来看一下完成的动态效果: 从上图可以看出,就是当鼠标悬浮 ...
- css3学习笔记之文本效果
CSS3的文本阴影 CSS3中,text-shadow属性适用于文本阴影. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html ...
- [CSS3] 学习笔记-HTML与CSS简单页面效果实例
一个简单的首页的设计: html文件: <!doctype html> <html> <head> <meta charset="UTF-8&quo ...
- CSS3学习笔记1-选择器和新增属性
前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...
- 十天精通CSS3学习笔记 part4
CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...
- HTML5+CSS3学习笔记（二） 页面布局：HTML5新元素及其特性
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...
- HTML5+CSS3学习笔记（一）
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...
随机推荐
- JSP/ Servlet常见的中文乱码原因
在开发中,我们经常遇到中文乱码的问题,比方: &浏览器中看到的 Jsp/Servlet 页面中的汉字成了 '?' ? &浏览器中看到的 Servlet 页面中的汉字都成了乱码 &a ...
- c# 反射学习笔记
首先了解C#反射的概念,反射是一个运行库类型发现的过程.通过反射可以得到一个给定程序集所包含的所有类型的列表, 这个列表包括给定类型中定义的方法.字段.属性和事件.也可以动态的发现一组给定类支持的借口 ...
- MySQL锁系列3 MDL锁
http://www.cnblogs.com/xpchild/p/3790139.html MySQL为了保护数据字典元数据,使用了metadata lock,即MDL锁,保证在并发的情况下,结构 ...
- XtraBackup原理4
MySQL · 答疑解惑 · 物理备份死锁分析 背景 本文对 5.6 主备场景下,在备库做物理备份遇到死锁的case进行分析,希望对大家有所帮助. 这里用的的物理备份工具是 Percona-XtraB ...
- Swift 3必看：新的访问控制fileprivate和open
在swift 3中新增加了两中访问控制权限 fileprivate和 open.下面将对这两种新增访问控制做详细介绍. fileprivate 在原有的swift中的 private其实并不是真正的私 ...
- Ios插件开发
Ios插件开发 http://www.exmobi.cn/course/course_26.html Android插件开发 http://www.exmobi.cn/course/course_25 ...
- Sublime Text 2 实用快捷键[Mac OS X]
lucasfais 总结了一些非常实用的 Sublime Text 2 快捷键,Lucifr 将它们翻译成了中文,以方便查阅. 注意:修饰键(如⌘)后跟多个按键的情况表示在按住修饰键的情况下依次按下相 ...
- linux 基本命令 [转]
linux 基本命令 1.ls (list 显示当前目录下文件和目录 ls -l 详细显示 =ll ) [root@linux ~]# ls [-aAdfFhilRS] 目录名称 [root@lin ...
- HDU 1016 Prime Ring Problem (DFS)
Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- Mysql学习笔记之常用数据类型 （转）
http://www.cnblogs.com/doit8791/archive/2012/05/11/2495319.html 数据类型是定义列中可以存储什么数据以及该数据实际怎么存储的基本规则.My ...