首页 > 代码库 > css11动态效果
css11动态效果
<!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>
css11动态效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。