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 ...
随机推荐
- 【WinForm】使用NSIS发布程序
简介 NSIS(Nullsoft Scriptable Install System)是一个开源的 Windows 系统下安装程序制作程序.它提供了安装.卸载.系统设置.文件解压缩等功能 使用 以下是 ...
- delphi HTML代码
################################属性 设置################################################字体设置{//-------- ...
- show processlist 命令详解
如果有 SUPER 权限,则可以看到全部的线程,否则,只能看到自己发起的线程(这是指,当前对应的 MySQL 帐户运行的线程). mysql> show processlist; +—–+— ...
- android UI进阶之实现listview的分页加载
上篇博文和大家分享了下拉刷新,这是一个用户体验非常好的操作方式.新浪微薄就是使用这种方式的典型. 还有个问题,当用户从网络上读取微薄的时候,如果一 下子全部加载用户未读的微薄这将耗费比较长的时间,造成 ...
- iOS开发——UI_swift篇&UITableView实现单元格展开与隐藏
UITableView实现单元格展开与隐藏 关于UITableView的展开的收缩在前面的文章我已经结束,就是使用代理,通知,block传值的时候实现的,当时是使用一个Bool值来实现,最后使用着三 ...
- 1083. List Grades (25)
the problem is from PAT,which website is http://pat.zju.edu.cn/contests/pat-a-practise/1083 and the ...
- 数据库字段类型中char和Varchar区别
char和varchar区别 char类型:对英文(ASCII)字符占用1个字节,对一个汉字占用2个字节,char存储定长数据很方便,char字段上的索引效率级高,比如定义char(10),那么不论你 ...
- 小白日记35：kali渗透测试之Web渗透-手动漏洞挖掘（一）-默认安装引发的漏洞
手动漏洞挖掘 即扫描后,如何对发现的漏洞告警进行验证. #默认安装 流传linux操作系统比windows系统安全的说法,是因为windows系统默认安装后,会开放很多服务和无用的端口,而且未经过严格 ...
- df 和 du 命令详解
df命令详细用法 a:显示全部的档案系统和各分割区的磁盘使用情形 i:显示i -nodes的使用量 k:大小用k来表示 (默认值) t:显示某一个档案系统的所有分割区磁盘使用量 x:显示不是某一个档案 ...
- Spring与Struts整合
Spring框架是一个非常优秀的轻量级Java EE容器,Spring框架是整个轻量级Java EE框架的核心.大部分的Java EE应用,都会考虑使用Spring容器管理应用中的组件,从而保证各组件 ...