鼠标经过效果图片或者文字在y轴上下循环移动
@keyframes dong
{
0% {
transform: translate(0px, 0px
);
}
50% {
transform: translate(0px, -10px
);
}
100% {
transform: translate(0px, 0px
);
}
}
.top:hover
{
animation: dong 1s infinite
;
}
body
<div class="top">
<img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1585720138&di=9adcd5b68287428091cc8a43a9058585&src=http://a0.att.hudong.com/78/52/01200000123847134434529793168.jpg" alt="w3cschool" width="200px" height="200px"/>
</div>
鼠标移进移出（hover） 使背景颜色平滑变换（transition），导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>鼠标滑过</title>
<style>
.ul
{
display: flex
;
margin-top: 50px
;
margin-left: 100px
;
}
.lis
{
width: 100px
;
height: 50px
;
line-height: 50px
;
text-align: center
;
cursor:pointer
;
color: #333333
;
border: 1px solid #eeeeee
;
position: relative
;
transition: 0.6s linear
;
}
.lis:hover
{
color: #ffffff
;
}
.lis:after
{
width: 0
;
cursor:pointer
;
position: absolute
;
content: ""
;
top: 0
;
bottom: 0
;
left: 0
;
z-index: -1
;
background: #2a68cc
;
transition: 0.6s linear
;
}
.lis:hover:after
{
width: 100px
;
}
.ul2
{
display: flex
;
margin-top: 50px
;
margin-left: 100px
;
}
.lis2
{
width: 100px
;
height: 50px
;
line-height: 50px
;
text-align: center
;
cursor:pointer
;
color: #333333
;
border: 1px solid #eeeeee
;
position: relative
;
transition: 0.6s linear
;
}
.lis2:hover
{
color: #ffffff
;
}
.lis2:after
{
width: 0
;
cursor:pointer
;
position: absolute
;
content: ""
;
top: 0
;
bottom: 0
;
right: 0
;
z-index: -1
;
background: orangered
;
transition: 0.6s linear
;
}
.lis2:hover:after
{
width: 100px
;
}
.ul3
{
display: flex
;
margin-top: 50px
;
margin-left: 100px
;
}
.lis3
{
width: 100px
;
height: 50px
;
line-height: 50px
;
text-align: center
;
cursor:pointer
;
color: #333333
;
border: 1px solid #eeeeee
;
position: relative
;
transition: 0.6s linear
;
}
.lis3:hover
{
color: #ffffff
;
}
.lis3:after
{
width: 100px
;
cursor:pointer
;
position: absolute
;
content: ""
;
top: 50%
;
bottom: 50%
;
right: 0
;
left: 0
;
z-index: -1
;
background: darkcyan
;
transition: 0.3s linear
;
}
.lis3:hover:after
{
top: 0
;
bottom: 0
;
}
.ul4
{
display: flex
;
margin-top: 50px
;
margin-left: 100px
;
}
.lis4
{
width: 100px
;
height: 50px
;
line-height: 50px
;
text-align: center
;
cursor:pointer
;
color: #333333
;
border: 1px solid #eeeeee
;
position: relative
;
transition: 0.6s linear
;
}
.lis4:hover
{
color: #ffffff
;
}
.lis4:after
{
width: 100px
;
cursor:pointer
;
position: absolute
;
content: ""
;
top: 100%
;
bottom: 0
;
right: 0
;
left: 0
;
z-index: -1
;
background: brown
;
transition: 0.3s linear
;
}
.lis4:hover:after
{
top: 0
;
bottom: 0
;
}
</style>
</head>
<body>
<div class="ul">
<div class="lis">左到右</div>
<div class="lis">左到右</div>
<div class="lis">左到右</div>
<div class="lis">左到右</div>
<div class="lis">左到右</div>
</div>
<div class="ul2">
<div class="lis2">右到左</div>
<div class="lis2">右到左</div>
<div class="lis2">右到左</div>
<div class="lis2">右到左</div>
<div class="lis2">右到左</div>
</div>
<div class="ul3">
<div class="lis3">上下</div>
<div class="lis3">上下</div>
<div class="lis3">上下</div>
<div class="lis3">上下</div>
<div class="lis3">上下</div>
</div>
<div class="ul4">
<div class="lis4">下到上</div>
<div class="lis4">下到上</div>
<div class="lis4">下到上</div>
<div class="lis4">下到上</div>
<div class="lis4">下到上</div>
</div>
</body>
</html>
鼠标经过图片放大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>鼠标滑过</title>
<style>
.ul
{
width: 80%
;
margin: 0 auto
;
text-align: center
;
}
img
{
transition: all 0.6s
;
}
img:hover
{
transform: scale(3
);
}
</style>
</head>
<body>
<div class="ul">
<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2371811940,4010188740&fm=111&gp=0.jpg" alt="">
</div>
</body>
</html>
鼠标经过动画出现线条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标经过动画出现线条</title>
<style>
.div1
{
position: relative
;
width:100px
;
height:100px
;
background-color: black
;
left: 500px
;
}
.div1:before,.div1:after
{
content:"";display:block
;
width: 0;height:0;border:2px solid transparent
;
box-sizing: border-box;position: absolute
;}
.div1:before{top:0;left:0
;
transition: border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s
;
}
.div1:after{right:0;bottom:0
;
transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in
;}
.div1:hover:before{width:100%;height:100%
;
transition:width 0.2s ease-in ,height 0.2s ease-in 0.2s
;
border-top-color:rgb(0, 255, 55);border-right-color:rgb(0, 255, 64
);}
.div1:hover:after
{
width:100%
;
height:100%
;
transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.4s,height 0.3s ease-in 0.6s
;
border-bottom-color:#ff00f2
;
border-left-color:#ff00c8
;}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
漂浮广告
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css">
#demo
{
width: 100px
;
height: 100px
;
position:absolute
;
border-radius:50px
;
}
</style>
<script type="text/javascript">
window.onload = function
(){
var demo = document.getElementById('demo'
);
var sx = sy = 10
;
var x = y = 0
;
function move
(){
if(document.documentElement.clientWidth - demo.offsetWidth-10 < x || x < 0
){
sx = -sx
;
}
if(document.documentElement.clientHeight - demo.offsetHeight-10 < y || y < 0
){
sy = -sy
;
}
x = demo.offsetLeft + sx
;
y = demo.offsetTop + sy
;
demo.style.left = x + 'px'
;
demo.style.top = y + 'px'
;
}
var timer = setInterval(move, 100
);
demo.onmouseover = function
(){
clearInterval(timer
);
}
demo.onmouseout = function
(){
timer = setInterval(move, 100
);
}
}
</script>
<img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3173584241,3533290860&fm=26&gp=0.jpg" id="demo" />
</body>
</html>
漂浮广告2
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Js广告_全屏漂浮广告</title>
<style type="text/css">
div#roll{width:100px;height:100px; color:#fff; position:absolute
;}
</style>
</head>
<body>
<div id="roll"><img src="http://img0.imgtn.bdimg.com/it/u=529916397,1588508565&fm=26&gp=0.jpg" alt=""></div>
<div><img src="http://img0.imgtn.bdimg.com/it/u=529916397,1588508565&fm=26&gp=0.jpg" alt="" style="height: 2000px;"></div>
<script type="text/javascript">
var ggRoll
= {
roll : document.getElementById("roll"
),
speed : 20
,
statusX : 1
,
statusY : 1
,
x : 100
,
y : 300
,
winW : document.documentElement.clientWidth - document.getElementById("roll").offsetWidth
,
winH : document.documentElement.clientHeight - document.getElementById("roll").offsetHeight
,
Go : function
(){
this.roll.style.left=this.x+'px'
;
this.roll.style.top=this.y+'px'
;
this.x = this.x + (this.statusX? -1: 1
)
if(this.x < 0) {this.statusX = 0
}
if(this.x > this.winW) {this.statusX = 1
}
this.y = this.y + (this.statusY? -1: 1
)
if(this.y < 0) {this.statusY = 0
}
if(this.y > this.winH) {this.statusY = 1
}
}
}
var interval = setInterval("ggRoll.Go()", ggRoll.speed
);
ggRoll.roll.onmouseover = function(){clearInterval(interval
)};
ggRoll.roll.onmouseout = function(){interval = setInterval("ggRoll.Go()", ggRoll.speed
)};
</script>
</body>
</html>
