<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>transform的使用</title> <style> li{ list-style: none; float: left; width: 80px; line-height: 40px; background: rgba(242, 123, 5, 0.61); border-radius: 6px; font-size: 16px; margin-left: 3px; } li a{ text-decoration: none; color: #fff; display: block; text-align: center; height: 40px; } li a:hover{ background: rgba(242, 88, 6, 0.87); border-radius: 6px; /*设置a元素在鼠标移入时向右下角移动4px，8px*/ /* transform: translate(4px,8px); 平移*/ /*鼠标放入 显示1.5倍的效果 transform: scale(1.5);*/ /* transform: skewX(15deg);只针对X轴 transform: skewY(15deg);只针对Y轴*/ transform: skew(15deg,-15deg); } img:hover{ /*旋转 默认是 顺时针旋转*/ transform: rotate(90deg) scale(1.5); } </style> </head> <body> <ul> <li><a href="#">服装城</a></li> <li><a href="#">美妆馆</a></li> <li><a href="#">超市</a></li> <li><a href="#">全球购</a></li> <li><a href="#">闪购</a></li> <li><a href="#">团购</a></li> <li><a href="#">拍卖</a></li> <li><a href="#">金融</a></li> </ul> <img src="cat.jpg" alt="小猫咪" height="100px" width="100px"> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>transition属性</title> <style type="text/css"> /* transition属性的值： transition-property：过渡效果的css属性的名称（color,background,font-size....）! 可以只设置一个属性， 一般方便起见使用all！针对于所有的属性 transition-duration:过渡效果需要多少秒 transition-timing-function：速度曲线！ ease：慢速开始，之后变快！ linear：匀速！ ease-in:慢速开始! ease-out:慢速结束： ease-in-out:慢速开始!慢速结束! transition-delay:过度效果开始前的等待时间！ 默认是0s！ */ div{ width: 100px; height: 100px; text-align: center; line-height: 100px; background-color: orange; /*过度效果*/ transition:all 1s linear; } div:hover{ background-color: red; font-size: 25px; transform: rotate(360deg); } </style> </head> <body> <div> 能旋转不？ </div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>animation的使用</title> <style type="text/css"> div{ width: 100px; height: 100px; background: red; /*调用动画*/ animation:animates 3s linear infinite; } /*创建关键帧*/ @keyframes animates{ 0%{ width: 0px; transform: translate(50px,0) ; } 25%{ width: 25px; height: 150px; transform: translate(150px,0) rotate(90deg); background-color: pink; } 50%{ width: 50px; height: 300px; background-color: aqua; transform: translate(300px,0) rotate(180deg); } 75%{ width: 75px; height: 150px; background-color: orange; transform: translate(150px,0) rotate(270deg); } 100%{ width: 100px; transform: translate(50px,0) rotate(360deg); } } </style> </head> <body> <div></div> </body> </html>