css动画，div设置了动画，但不希望DIV内部的文字也跟着动？

html-css036

css动画，div设置了动画，但不希望DIV内部的文字也跟着动？,第1张

把文字和背景分别放到两个平级的div中，文字覆盖在背景的上面，然后只需要把动画作用到背景所在的div上，这样文字不受影响就可以保持不动了。而且，这样一来，外框与背景就不需要做反向运动，只需要背景动即可，外框保持不动，这样只需要一个动画，提高了效率：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

#myDIV

{

width:100px

height:100px

position:relative

}

@keyframes mymove

{

0% {}

100% {-webkit-transform:rotate(360deg)}

}

#mybak{

position:absolute

left:0

top:0

width:100px

height:100px

background:black

-webkit-animation:mymove 10s infinite

}

#mynum{

position:absolute

left:0

top:0

width:100px

height:100px

text-align:center

color:white

font-size:70px

line-height:100px

}

</style>

</head>

<body>

<div id="myDIV"><div id="mybak"></div><div id="mynum">10</div></div>

</body>

</html>

首先要学习前端页面重构。包括PC端网站布局、HTML5+CSS3基础、WebApp页面布局等等，打好前端开发的基础。

然后要学JavaScript高级程序设计、PC端全栈开发的知识。包括原生JavaScript交互功能开发、面向对象进阶与ES5/ES6/ES7应用、JavaScript工具库自主研发、jQuery经典交互特效开发、PHP+MySQL后端基础、前端工程化与模块化应用等。

前面的知识都掌握了，就可以学框架、混合开发了。包括Node.js后端开发、Vue.js前端框架、React前端框架、混合开发(Hybrid,RN)、Angular前端框架等等。学习前端一定要有清晰的学习路线，掌握有效率的学习方法。

基础性的学习网站：

w3school：http://www.w3school.com.cn/

w3cplus：www.w3cplus.com

MDN网站 ：https://developer.mozilla.org/zh-CN/docs/Web

菜鸟教程网：http://www.runoob.com

易百教程：http://www.yiibai.com/

脚本之家：http://www.jb51.net

视频类的学习网站：

尚学堂：http://www.bjsxt.com/

慕课网：https://www.imooc.com/

扣丁课堂：https://www.codingke.com/

极客学院：http://www.jikexueyuan.com/

腾讯课堂：https://ke.qq.com/

51cto：http://edu.51cto.com/courselist/index.html

实验楼：https://www.shiyanlou.com/

网易云课堂：http://study.163.com/

我要自学网：http://www.51zxw.net/

个人博客类的学习网站：

张鑫旭：http://www.zhangxinxu.com/

阮一峰：http://www.ruanyifeng.com/home.html

廖雪峰：https://www.liaoxuefeng.com/

辰辰：http://www.chennoted.com/

轩枫阁：http://www.xuanfengge.com/

社区类的学习网站：

segmentfault：https://segmentfault.com/

掘金：https://juejin.im/

简书：https://www.jianshu.com/

WEB前端-伯乐在线：http://web.jobbole.com/

Stack Overflow:https://stackoverflow.com/

CSDN：https://www.csdn.net/

博客园：https://www.cnblogs.com/

开发者头条：https://toutiao.io/