1-5 编程练习
本节编程练习不计算学习进度,请电脑登录imooc.com操作

编程练习

效果说明:鼠标放在 div 上,div 旋转变大以及颜色变化,并且显示出文字。

效果图如下:

任务

一.实现步骤建议:

1、页面创建:设置 div 居中,固定宽高,灰色背景。并且加入文字“您好”,将文字颜色设为和div背景色一样,达到一开始看不到文字的效果。

2、初始状态的div放大倍数为 1,旋转角度为 0deg,并且设置动画时间为 1s。

3、给div添加鼠标移上去的样式,即背景颜色变为红色,文字变为黑色。同时设置旋转角度为 720deg 和放大倍数为   2。

注意:
    文字一开始设备和背景色一样,鼠标移动到 div 才将文字颜色改变能达到文字由隐藏到显示的效果。rotate 和 scale 属性可以在 transform 一次性同时设置的,所以不需要换多行设置。注意兼容写法。 

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <style>
  6. .mainDiv{
  7. width:100px;
  8. height:100px;
  9. margin:100px auto;
  10. text-align: center;
  11. line-height: 100px;
  12. font-weight: bold;
  13. color:#ddd;
  14. background:#ddd;
  15. border:1px solid #ddd;
  16. -webkit-transform:rotate(0deg) scale(1);
  17. -moz-transform:rotate(0deg) scale(1);
  18. transform:rotate(0deg) scale(1);
  19. -webkit-transition:2s;
  20. -moz-transition:2s;
  21. transition:2s;
  22.  
  23. }
  24. .mainDiv:hover{
  25. }
  26. </style>
  27. <title>css3特效</title>
  28. </head>
  29. <body>
  30. <div class="mainDiv">您好</div>
  31. </body>
  32. </html>
返回课程