CSS一些常用的功能;Js配合CSS3处理

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3</title>
<style type="text/css">
body, div {
margin: 0;
padding: 0;
font-family: "微软雅黑";
font-size: 14px;
-webkit-user-select: none;
}
#div1 {
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
font-size: 28px;
cursor: pointer;
/*background: -webkit-linear-gradient(top left, #22b909, #efe8ca 20%, #FFE0E9 40%, #ffff00);*/
/*background: linear-gradient(top left, #22b909, #efe8ca 20%, #FFE0E9 40%, #ffff00);*/
background: -webkit-radial-gradient(#22b909, #efe8ca, #FFE0E9, #ffff00);
background: radial-gradient(#22b909, #efe8ca, #FFE0E9, #ffff00);
border-radius: 30px 100px;
box-shadow: 10px 10px 30px 2px #ccc; /*inset:内阴影,不写是外阴影 x轴偏移 y轴偏移 阴影的模糊度 模糊范围 阴影的颜色*/
text-shadow: 15px 15px 4px #000, 35px 35px 4px red; /*x轴偏移 y轴偏移 阴影的模糊度 阴影的颜色*/
}
</style>
<link type="text/css" rel="stylesheet" href="css/myAnimate.css"/>
</head>
<body>
<div id="div1">测试一下</div>
<script type="text/javascript">
//移动端中,为了优化动画的性能,我们一般都是用css3来编写我们的动画(animate.css),然后根据需求,我们很多时候用js给元素增加这个动画样式实现我们的动画效果
//例如下面的案例,如果你想每一次点击都重新触发动画,那么需要用定时器在本本次动画完成后,把样式清除,这样下一次才会有作用
var oDiv=document.getElementById("div1");
oDiv.onclick=function(){
var that=this;
this.className="animated bounce";
//用个定时器清除,这样就可以点一次,动一次了;配合css3处理动画;
timer=setTimeout(function(){
that.className=null;
clearTimeout(timer);
},500)
}
</script>
</body>
</html>

1111演示二的:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3</title>
<style type="text/css">
body, div {
margin: 0;
padding: 0;
font-family: "微软雅黑";
font-size: 14px;
-webkit-user-select: none;
}
#div1 {
position: absolute;
top: 50%;
left: 50%;

width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
margin: -100px 0 0 -100px;

font-size: 28px;
cursor: pointer;
background: -webkit-radial-gradient(#22b909, #efe8ca, #FFE0E9, #ffff00);
background: radial-gradient(#22b909, #efe8ca, #FFE0E9, #ffff00);
/*在给元素写样式的时候,我们把运动的轨迹定义好*/
-webkit-transition: all 1s ease-in-out 0s;
}
/*在元素的某一个操作上,执行对应的动画*/
#div1:hover {
/*设置目标值*/
height: 400px;
width: 400px;
line-height: 400px;
margin: -200px 0 0 -200px;
/*放大scale(1.5)*/
-webkit-transform: scale(1.5);
}
/*
transition:
1)属性:all是整体变换 还可以写具体的某一方面属性,通常用all
2)运动时间
3)运动方式:ease | linear | ease-in | ease-out | ease-in-out
4)延迟时间
transform:
1)rotate 旋转 rotate(45deg)
2)translate 移动 translate(x,y) translateX(x) ...
3)scale 缩放 scale(1.5)
4)skew 倾斜 skew(45deg)
*/
</style>
</head>
<body>
<div id="div1">鼠标放进来</div>
<script type="text/javascript">
// var oDiv = document.getElementById("div1");
// oDiv.onmouseover = function () {
// this.className = "h";
// }
// oDiv.onmouseout = function () {
// this.className = "";
// }
</script>
</body>
</html>

····

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3</title>
<style type="text/css">
body, div {
margin: 0;
padding: 0;
font-family: "微软雅黑";
font-size: 14px;
-webkit-user-select: none;
}
#div1 {
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
font-size: 28px;
cursor: pointer;
background: -webkit-radial-gradient(#22b909, #efe8ca, #FFE0E9, #ffff00);
}
/*
-webkit-animation-name:'wobble'; 动画属性名,也就是我们前面keyframes定义的动画名
-webkit-animation-duration: 10s; 动画持续时间
-webkit-animation-timing-function: ease-in-out; 动画频率,ease | linear | ease-in | ease-out | ease-in-out
-webkit-animation-delay: 2s; 动画延迟时间
-webkit-animation-iteration-count:10; 定义循环次数,infinite为无限次
-webkit-animation-direction: alternate; 定义动画方式 是否为反弹动画[alternate]
-webkit-animation-fill-mode: forwards; 动画结束后保持最后一帧的位置 both:开始是第一帧,完成后保持最后一帧
*/
.big {
-webkit-animation: myb 0.1s linear 0s 1;
-webkit-animation-fill-mode: both;
}
.small {
-webkit-animation: myb2 0.1s linear 0s 1;
-webkit-animation-fill-mode: both;
}
@-webkit-keyframes myb {
0% {
margin: -100px 0 0 -100px;
width: 200px;
height: 200px;
}
100% {
margin: -150px 0 0 -150px;
width: 300px;
height: 300px;
}
}
@-webkit-keyframes myb2 {
0% {
margin: -150px 0 0 -150px;
width: 300px;
height: 300px;
}
100% {
margin: -100px 0 0 -100px;
width: 200px;
height: 200px;
}
}
</style>
</head>
<body>
<div id="div1">测试测试</div>
<script type="text/javascript">
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function () {
this.className = "big";
};
oDiv.onmouseout = function () {
this.className = "small";
};
</script>
</body>
</html>