<!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. 【转】Rails 3.1错误-Could not find a JavaScript runtime及execjs和therubyracer介绍

    转自:http://rubyer.me/blog/740/ Rails 3.1错误 /gems/execjs-1.1.2/lib/ execjs/runtimes.rb:43:in `autodete ...

  2. 将Java程序作成exe文件的几种方法【转载】

    看到网上有同志的介绍将Java程序作成exe文件的方法,写的不错,但是也许是这篇文章完成的时间比较早,许多内容已经不合适了.我在这里补充几条: 一.exe4j 说明:exe4j可以将Jar文件制作成e ...

  3. codeforces Gym 100418D BOPC 打表找规律,求逆元

    BOPCTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/view.action?c ...

  4. C# 制作外挂常用的API

    C#做外挂的常用API,本人用了很久,基本没发现问题 using System; using System.Collections.Generic; using System.Text; using  ...

  5. exosip

    exosip针对UA是对osip进行扩展,oSIP不提供不论什么高速产生请求消息和响应消息的方法,全部请求消息和响应消息的形成必须调用一组sip message api来手动组装完毕,所以作者在osi ...

  6. Android 事件监听处理

    事件监听的处理模型包括三个成员:事件源.事件以及事件监听器. 基于监听的事件处理模型一般包括几个步骤: 1.获取普通界面组件: 2.实现事件监听器类 3.将监听器对象注冊给普通组件 当事件源上发生指定 ...

  7. mysql 5.7 多源复制 原创

    一从两主:多源复制 每台mysql 服务器都需要加my.cnf要加两个参数才可以在GTID多源复制 master-info-repository=TABLE relay-log-info-reposi ...

  8. 错误:expected ‘=’, ‘,’, ‘;’, ‘asm’ or ‘__attribute__’ before ‘{’ token

    GCC编译C源程序时出现:错误:expected ‘=’, ‘,’, ‘;’, ‘asm’ or ‘__attribute__’ before ‘{’ token,通常是因为在函数声明(包括包含的头文 ...

  9. VBoxGuestAdditions下载地址

    http://dlc.sun.com.edgesuite.net/virtualbox/

  10. linux:ifconfig命令

    许多windows非常熟悉ipconfig命令行工具,它被用来获取网络接口配置信息并对此进行修改.Linux系统拥有一个类似的工具,也就是ifconfig(interfaces config).通常需 ...