<!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
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3
CSS3

css3学习笔记之效果的更多相关文章

  1. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  2. CSS3学习笔记之linear-gradient

    我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...

  3. CSS3学习笔记（5）—页面遮罩效果

    今天把页面遮罩的效果发一下,之前遮罩都是用JS实现的,忽然发现CSS3里面的box-shadow属性除了做立体阴影外,还可以做页面的遮罩. 下面来看一下完成的动态效果: 从上图可以看出,就是当鼠标悬浮 ...

  4. 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 ...

  5. [CSS3] 学习笔记-HTML与CSS简单页面效果实例

    一个简单的首页的设计: html文件: <!doctype html> <html> <head> <meta charset="UTF-8&quo ...

  6. CSS3学习笔记1-选择器和新增属性

    前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...

  7. 十天精通CSS3学习笔记 part4

    CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...

  8. HTML5+CSS3学习笔记（二） 页面布局：HTML5新元素及其特性

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

  9. HTML5+CSS3学习笔记（一）

    HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...

随机推荐

  1. oracle 基本语句练习(一) where, between ,null, like,转义字符,order by

    1   where  筛选关键字; select * from emp where job >'CLERK' 从emp表中列出 job值大于'CLERK'的项 (由于比较的是字符串,所以加单引号 ...

  2. delphi res 字符串资源

    delphi res 字符串资源 (2011/12/10 19:19:36) //res 字符串资源 //rc 文件:StringTablebegin0 "AAAA"1 " ...

  3. delphi execCommand

    WebBrowser1.Document as IHTMLDocument2 关键点 function execCommand(const cmdID: WideString; showUI: Wor ...

  4. thinkphp分配数组

    TestAction.class.php 的edit方法中 $this->assign('list',array('one'=>'a','two'=>'b')); 后,在edit.h ...

  5. maven插件开发（二）

    因为很多jar都是在开发环境中,没有到仓库中,因此偷个懒,用命令直接自动安装到仓库去.在开发的过程中遇到一个比较诡异的问题,插件用命令调mvn 安装jar到仓库总是抛如下异常: maven Canno ...

  6. NetBeans 安装Android 开发环境

    基本的开发环境都是Eclipse + Android SDK + Android plugin for Eclipse NetBeans下开发Android的所需要的基本条件:NetBeans(包含J ...

  7. 网站安全通用防护代码（C#版本源码提供）

    每一个开发者都会意识到,网站发布之前,需要进行安全检查. 那么如何拦截攻击者注入恶意代码?如何防御诸如跨站脚本攻击(XSS).SQL注入攻击等恶意攻击行为? 针对目前常见的一些安全问题,结合目前一些常 ...

  8. python(7)– 类的反射

    python中的反射功能是由以下四个内置函数提供:hasattr.getattr.setattr.delattr,改四个函数分别用于对对象内部执行:检查是否含有某成员.获取成员.设置成员.删除成员. ...

  9. linux内存查看

    一般用free命令,显示整体内存使用状况: 第二行从OS角度,used包括内核+应用+buffers+cached使用的内存,buffers/cached是磁盘缓存的大小 第三行从应用角度,可用内存= ...

  10. HTML <base> 标签的 target 属性 —— <base target="_blank" />

    为页面上所有链接规定默认目标: <head> <base target="_blank" /> </head> <body> < ...