1首先输入代码下方的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" ">
<html xmlns=">
<head>
<meta >
<title>CSS实现鼠标移动到，更换</title>
2、然后输入下方的代码：
</head>
<style type="text/css">
{ margin:0; padding:0;}
ul li{ list-style:none;}
nav{ width:800px; height:40px; margin:150px auto;}
nav ul li{ float:left; width:200px;}
nav ul li a:link,a:visited{ display:block; width:190px; height:40px;
3、然后在输入下方的代码：
background:url(/jscss/demoimg/wall_s1jpg);}/链接、点击后/
nav ul li a:hover{background:url(/jscss/demoimg/wall_s2jpg);}/鼠标经过/
nav ul li a:active{background:url(/jscss/demoimg/wall_s3jpg);}/点击时/
</style>
<body>
<div class="nav">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</body>
</html>
4、然后这样就完成了。
<!doctype html><html>
<head>
<title>标题</title>
<meta charset="utf-8">
<style>
body{
cursor: pointer;
}
@keyframes scroll {
from {
background-color: red;
background-position-x: 0%;
}
20% {
background-color: blue;
background-position-x: 1000%;
}
40% {
background-color: pink;
background-position-x: 2000%;
}
60% {
background-color: #e4393c;
background-position-x: 3000%;
}
80% {
background-color: #000000;
background-position-x: 4000%;
}
100% {
background-color: transparent;
background-position-x: 5000%;
}
}
@keyframes rotate {
from {
transform: rotateX(0deg) rotateY(0deg);
}
100% {
transform: rotateX(3000deg) rotateY(3000deg);
}
}
#stage {
width: 400px;
height: 400px;
margin: 100px auto;
/ border:1px solid #333; /
/perpective/
-webkit-perspective: 1000px;
}
#container {
width: 400px;
height: 400px;
/ transform:rotatex(-20deg) rotatey(0deg); /
position: relative;
/规定 子元素 按照3d位置摆放/
transform-style: preserve-3d;
/ animation: rotate; /
animation-iteration-count: infinite;
animation-duration: 165s;
animation-timing-function: linear;
animation-direction: alternate;
}
#container div {
width: 100%;
height: 100%;
/ background: #e4393c; /
background: rgba(200, 200, 200, 06);
background-image: url(/wpng);
position: absolute;
background-size: 55%;
background-position-x: 40%;
/调用动画/
animation: scroll;
animation-iteration-count: infinite;
animation-duration: 25s;
animation-timing-function: linear;
animation-direction: alternate;
}
#container divchiod {
width: 50%;
height: 50%;
background: blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-size: 55%;
background-image: url(/wpng);
background-position-x: 40%;
/调用动画/
animation-iteration-count: infinite;
animation-duration: 25s;
animation-timing-function: linear;
animation-direction: alternate;
}
#container div:nth-child(1) {
/ background:blue; /
transform: rotateX(0deg) translateZ(200px);
}
#container div:nth-child(2) {
transform: rotateX(-90deg) translateZ(200px);
background-color: blue;
}
#container div:nth-child(3) {
transform: rotateX(-180deg) translateZ(200px);
background-color: green;
}
#container div:nth-child(4) {
transform: rotateX(-270deg) translateZ(200px);
background-color: #000000;
}
#container div:nth-child(5) {
transform: rotateY(90deg) translateZ(200px);
background-color: yellow;
}
#container div:nth-child(6) {
transform: rotateY(90deg) translateZ(-200px);
background-color: violet;
}
#container div:nth-child(7) {
background-color: red;
transform: translate(-50%, -50%) rotateX(0deg) translateZ(100px);
}
#container div:nth-child(8) {
transform: translate(-50%, -50%) rotateX(-90deg) translateZ(100px);
background-color: blue;
}
#container div:nth-child(9) {
transform: translate(-50%, -50%) rotateX(-180deg) translateZ(100px);
background-color: green;
}
#container div:nth-child(10) {
transform: translate(-50%, -50%) rotateX(-270deg) translateZ(100px);
background-color: #000000;
}
#container div:nth-child(11) {
transform: translate(-50%, -50%) rotateY(90deg) translateZ(100px);
background-color: yellow;
}
#container div:nth-child(12) {
transform: translate(-50%, -50%) rotateY(90deg) translateZ(-100px);
background-color: violet;
}
#containerw {
transition: 28s;
transform: rotateX(290deg) rotateY(290deg);
}
</style>
</head>
<body>
<div id="stage">
<div id="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="chiod"></div>
<div class="chiod"></div>
<div class="chiod"></div>
<div class="chiod"></div>
<div class="chiod"></div>
<div class="chiod"></div>
</div>
</div>
<button id="w">buub</button>
<script>
var width = windowinnerWidth;
var width_2 = width / 2;
var height = windowinnerHeight;
var height_2 = height / 2;
windowaddEventListener('mousemove', function (res) {
// consolelog(res);
var x = resclientX;
var y = resclientY;
var movesx=x-width_2;
var movesy=y-height_2;
consolelog('x周');
containerstyletransform="rotatex("+-movesy/5+"deg) rotateY("+movesx/5+"deg)";
consolelog(x);
consolelog(width_2);
consolelog(movesx);
// consolelog('44444')
// consolelog(movesx);
// consolelog(movesy);
})
wonclick = function () {
containerclassName = "w"
};
// var adv={
// a:0,
// s:-4,
// rotate1:0,
// rotate2:'-30',
// he:function (){
// thisrotate1+=2;
// consolelog(thisrotate1);
// containerstyletransform="rotatex("+thisrotate1+"deg)";
// },
// zhuan:function (){
// s=setInterval(thishebind(this),150);
// },
// danji:function(){
// }
// }
// advzhuan();
</script>
</body>
</html>背景图：background:url(images/01jpg) 30px 120px;后面两个值是调整位置的；
：<img src="路径">这种的直接用css写
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）