一.实现步骤建议:
1、页面创建:设置 div 居中,固定宽高,灰色背景。并且加入文字“您好”,将文字颜色设为和div背景色一样,达到一开始看不到文字的效果。
2、初始状态的div放大倍数为 1,旋转角度为 0deg,并且设置动画时间为 1s。
3、给div添加鼠标移上去的样式,即背景颜色变为红色,文字变为黑色。同时设置旋转角度为 720deg 和放大倍数为 2。
注意:
文字一开始设备和背景色一样,鼠标移动到 div 才将文字颜色改变能达到文字由隐藏到显示的效果。rotate 和 scale 属性可以在 transform 一次性同时设置的,所以不需要换多行设置。注意兼容写法。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .mainDiv{ width:100px; height:100px; margin:100px auto; text-align: center; line-height: 100px; font-weight: bold; color:#ddd; background:#ddd; border:1px solid #ddd; -webkit-transform:rotate(0deg) scale(1); -moz-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1); -webkit-transition:2s; -moz-transition:2s; transition:2s; } .mainDiv:hover{ ? ? ? ? ? } </style> <title>css3特效</title> </head> <body> <div class="mainDiv">您好</div> </body> </html>