css
来源：互联网 发布：查live网络电视直播 编辑：程序博客网 时间：2024/05/29 17:33
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><style>div{margin:30px;width:200px;height:100px;background-color:red;}.translate2{margin:30px;width:200px;height:100px;background-color:red;transform:rotate(45deg);/*-ms-transform:rotate(45deg);-moz-transform:rotate(45deg); -webkit-transform:rotate(45deg);-o-transform:rotate(45deg);*/transform:translate(30px,-120px);-ms-transform:translate(30px,-120px);-moz-transform:translate(30px,-120px); -webkit-transform:translate(30px,-120px); -o-transform:translate(30px,-120px);}.translate{transform:rotate(10deg);-ms-transform:rotate(10deg); /* Internet Explorer */-moz-transform:rotate(10deg); /* Firefox */-webkit-transform:rotate(10deg);/* Safari 和 Chrome */-o-transform:rotate(10deg);}.skew{margin:30px;width:200px;height:100px;background-color:red;transform:skew(10deg);-ms-transform:skew(10deg); /* Internet Explorer */-moz-transform:skew(10deg); /* Firefox */-webkit-transform:skew(30deg);/* Safari 和 Chrome */-o-transform:skew(10deg);}.transition{width:100px;height:100px;background:blue;transition: 2s;-moz-transition:width 2s; /* Firefox 4 */-webkit-transition:width 2s; /* Safari and Chrome */-o-transition:width 2s; /* Opera */}.transition:hover{width:300px;}.animation{width:200px;height:200px;background:red;position:relative;animation:mymove 2s infinite;-webkit-animation:mymove 5s infinte;}@keyframes mymove{from {left:0px;}to {left:1000px;}}@-webkit-keyframes mymove /*Safari and Chrome*/{from {left:0px;}to {left:1000px;}}</style><body><div class="translate">旋转加移位</div><div class="translate2">旋转加移位</div><div class="skew">倾斜</div><div class="transition">鼠标放上发送改变</div><div class="animation">动画</div></body></html>
