本网站只能被运行在支持JavaScript脚本的环境中

图像得到光标焦点时的8种特效

本文介绍如何制作当页面上图像得到光标焦点时的8种特效。

目录

在制作8种特效都要使用到的公共样式

得到光标焦点时图像以动画的形式逐渐扩大

得到光标焦点时图像以动画的形式逐渐缩小

得到光标焦点时图像以动画的形式横向移动

得到光标焦点时图像以动画的形式纵向移动

得到光标焦点时图像以动画的形式旋转

得到光标焦点时图像呈现圆环边框

得到光标焦点时图像变模糊

得到光标焦点时图像变为黑白图像

在制作8种特效都要使用到的公共样式

首先介绍在制作8种特效都要使用到的公共样式,主要内容是为图像添加边框及阴影。

核心HTML代码

首先介绍页面的核心HTML代码部分,内容为在一个div元素中放置一个img元素,并且为div元素指定样式类(class属性)

<div class="pic">
    <img src="image.jpg">
</div>

CSS样式代码

制作8种特效都要使用到的公共样式代码如下所示:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.pic {
    border: 10px solid #fff; 
    float: left;
    height: 300px;
    width: 300px;
    margin: 20px;
    overflow: hidden;
    
    -webkit-box-shadow: 5px 5px 5px #111;
    box-shadow: 5px 5px 5px #111; 
}

得到光标焦点时图像以动画的形式逐渐扩大

当图像获得光标焦点时将图像以动画的方式逐渐扩大。

HTML代码

<div class="grow pic">
    <img src="image.jpg">
</div>

CSS样式代码

.grow img {
    height: 300px;
    width: 300px;
  
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
  
.grow img:hover {
    width: 400px;
    height: 400px;
}

实际运行效果:

得到光标焦点时图像以动画的形式逐渐缩小

当图像获得光标焦点时将图像以动画的方式逐渐缩小。

HTML代码

<div class="shrink pic">
    <img src="image.jpg">
</div>

CSS样式代码

.shrink img {
    height: 400px;
    width: 400px;
  
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
.shrink img:hover {
  width: 300px;
  height: 300px;
}

实际运行效果:

得到光标焦点时图像以动画的形式横向移动

当图像获得光标焦点时将图像以动画的形式横向移动。

HTML代码

<div class="sidepan pic">
    <img src="image.jpg">
</div>

CSS样式代码

.sidepan img {
    margin-left: 0px;
    -webkit-transition: margin 1s ease;
    -moz-transition: margin 1s ease;
    -o-transition: margin 1s ease;
    -ms-transition: margin 1s ease;
    transition: margin 1s ease;
}
  
.sidepan img:hover {
  margin-left: -200px;
}

实际运行效果:

得到光标焦点时图像以动画的形式纵向移动

当图像获得光标焦点时将图像以动画的形式纵向移动。

HTML代码

<div class="vertpan pic">
    <img src="image.jpg">
</div>

CSS样式代码

.vertpan img {
    margin-top: 0px;
    -webkit-transition: margin 1s ease;
    -moz-transition: margin 1s ease;
    -o-transition: margin 1s ease;
    -ms-transition: margin 1s ease;
    transition: margin 1s ease;
}
  
.vertpan img:hover {
    margin-top: -200px;
}

实际运行效果:

得到光标焦点时图像以动画的形式旋转

得到光标焦点时图像以动画的形式旋转。

HTML代码

<div class="tilt pic">
    <img src="image.jpg">
</div>

CSS样式代码

.tilt {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
  
.tilt:hover {
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
}

实际运行效果:

得到光标焦点时图像呈现圆环边框

得到光标焦点时图像呈现圆环边框。

HTML代码

<div class="focus pic">
    <img src="image.jpg">
</div>

CSS样式代码

.focus {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
  
.focus:hover {
    border: 70px solid #000;
    border-radius: 50%;
}

实际运行效果:

得到光标焦点时图像变模糊

得到光标焦点时图像变模糊,只在WebKit引擎系列的浏览器中有效。

HTML代码

<div class="blur pic">
    <img src="image.jpg">
</div>

CSS样式代码

.blur img{
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
  
.blur img:hover {
    -webkit-filter: blur(5px);
}

实际运行效果:

得到光标焦点时图像变为黑白图像

得到光标焦点时图像变为黑白图像,只在WebKit引擎系列的浏览器中有效。

HTML代码

<div class="bw pic">
    <img src="image.jpg">
</div>

CSS样式代码

.bw {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
  
.bw:hover {
    -webkit-filter: grayscale(100%);
}

实际运行效果: