【技巧】鼠标移入图片各种酷炫效果

最新推荐文章于 2021-06-04 04:47:38 发布
最新推荐文章于 2021-06-04 04:47:38 发布
阅读量1.9k 收藏 15
点赞数 2
分类专栏： CSS 文章标签： 图片

先看效果：

这里写图片描述

HTML代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>RunJS</title>
    </head>
    <body>
        <div id="mainwrapper"><!-- This #mainwrapper section contains all of our images to make them center and look proper in the browser ->  
        <!-- Image Caption 1 -->  
        <div id="box-1" class="box">  
            <img id="image-1" src="bird.jpg" width="200" height="200"/>  
            <span class="caption simple-caption">  
            <p>Simple Caption</p>  
            </span>  
        </div>  

        <!-- Image Caption 2 -->  
        <div id="box-2" class="box">  
            <img id="image-2" src="bird2.jpg" width="200" height="200"/>  
            <span class="caption full-caption">  
            <h3>Full Caption</h3>  
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
            </span>  
        </div>  

        <!-- Image Caption 3 -->  
        <div id="box-3" class="box">  
            <img id="image-3" src="fish2.jpg" width="200" height="200"/>  
            <span class="caption fade-caption">  
            <h3>Fade Caption</h3>  
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
            </span>  
        </div>  

        <!-- Image Caption 4 -->  
        <div id="box-4" class="box">  
            <img id="image-4" src="tx.png" width="200" height="200"/>  
            <span class="caption slide-caption">  
            <h3>Slide Caption</h3>  
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
            </span>  
        </div>  

        <!-- Image Caption 5 -->  
        <div id="box-5" class="box">  
            <div class="rotate"><!-- Rotating div -->  
                <img id="image-5" src="border.png" width="200" height="200"/>  
                <span class="caption rotate-caption">  
                <h3>This is rotate caption</h3>  
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
                </span>  
            </div>  
        </div>  

        <!-- Image Caption 6 -->  
        <div id="box-6" class="box">  
            <img id="image-6" src="aaa.svg" width="200" height="200"/>  
            <span class="caption scale-caption ">  
            <h3>Free Style Caption</h3>  
            <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
            </span>  
        </div>  
    </div> <!-- end of #mainwrapper-->  
    </body>
</html>

CSS代码如下：

    html { background-color: #eaeaea; }  
    p,h3{border: 0 none;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;}
    p{ margin-bottom: 1em ; font-size: 12px; } 
    h3 {
        font-size: 108%;margin: 1em 0; font-weight:blod;
    }
    #mainwrapper {  
      font: 10pt normal Arial, sans-serif;  
      height: auto;  
      margin: 80px auto 0 auto;  
      text-align: center;  
      width: 660px;  
    }  

    #mainwrapper .box {  
        border: 5px solid #fff;  
        cursor: pointer;  
        height: 182px;  
        float: left;  
        margin: 5px;  
        position: relative;  
        overflow: hidden;  
        width: 200px;  
        -webkit-box-shadow: 1px 1px 1px 1px #ccc;  
        -moz-box-shadow: 1px 1px 1px 1px #ccc;  
        box-shadow: 1px 1px 1px 1px #ccc;  
    }  

    #mainwrapper .box img {  
        position: absolute;  
        left: 0;  
        -webkit-transition: all 300ms ease-out;  
        -moz-transition: all 300ms ease-out;  
        -o-transition: all 300ms ease-out;  
        -ms-transition: all 300ms ease-out;  
        transition: all 300ms ease-out;  
    }  
    #mainwrapper .box .caption {  
        background-color: rgba(0,0,0,0.8);  
        position: absolute;  
        color: #fff;  
        z-index: 100;  
        -webkit-transition: all 300ms ease-out;  
        -moz-transition: all 300ms ease-out;  
        -o-transition: all 300ms ease-out;  
        -ms-transition: all 300ms ease-out;  
        transition: all 300ms ease-out;  
        left: 0;  
    }  
    #mainwrapper .box .simple-caption {  
        height: 30px;  
        width: 200px;  
        display: block;  
        bottom: -30px;  
        line-height: 25pt;  
        text-align: center;  
    }  
    #mainwrapper .box .full-caption {  
        width: 170px;  
        height: 170px;  
        top: -200px;  
        text-align: left;  
        padding: 15px;  
    }  
    #mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption {  
        opacity: 0;  
        width: 170px;  
        height: 170px;  
        text-align: left;  
        padding: 15px;  
    } 
   /** Caption 4: Slide **/  
    #mainwrapper .box .slide-caption {  
        width: 170px;  
        height: 170px;  
        text-align: left;  
        padding: 15px;  
        left: 200px;  
    }  

    #mainwrapper #box-5.box .rotate-caption {  
        width: 170px;  
        height: 170px;  
        text-align: left;  
        padding: 15px;  
        top: 200px;  
        -moz-transform: rotate(-180deg);  
        -o-transform: rotate(-180deg);  
        -webkit-transform: rotate(-180deg);  
        transform: rotate(-180deg);  
    }  

    #mainwrapper .box .rotate {  
        width: 200px;  
        height: 400px;  
        -webkit-transition: all 300ms ease-out;  
        -moz-transition: all 300ms ease-out;  
        -o-transition: all 300ms ease-out;  
        -ms-transition: all 300ms ease-out;  
        transition: all 300ms ease-out;  
    }  
    #mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p {  
        position: relative;  
        left: -200px;  
        width: 170px;  
        -webkit-transition: all 300ms ease-out;  
        -moz-transition: all 300ms ease-out;  
        -o-transition: all 300ms ease-out;  
        -ms-transition: all 300ms ease-out;  
        transition: all 300ms ease-out;  
    }  

    #mainwrapper .box .scale-caption h3 {  
        -webkit-transition-delay: 300ms;  
        -moz-transition-delay: 300ms;  
        -o-transition-delay: 300ms;  
        -ms-transition-delay: 300ms;  
        transition-delay: 300ms;  
    }  

    #mainwrapper .box .scale-caption p {  
        -webkit-transition-delay: 500ms;  
        -moz-transition-delay: 500ms;  
        -o-transition-delay: 500ms;  
        -ms-transition-delay: 500ms;  
        transition-delay: 500ms;  
    }  
    #mainwrapper .box:hover .simple-caption {  
        -moz-transform: translateY(-100%);  
        -o-transform: translateY(-100%);  
        -webkit-transform: translateY(-100%);  
        transform: translateY(-100%);  
    }  
#mainwrapper .box:hover .full-caption {  
    -moz-transform: translateY(100%);  
    -o-transform: translateY(100%);  
    -webkit-transform: translateY(100%);  
    transform: translateY(100%);  
}   

    #mainwrapper .box:hover .slide-caption {  
      background-color: rgba(0,0,0,1) !important;  
      -moz-transform: translateX(-100%);  
      -o-transform: translateX(-100%);  
      -webkit-transform: translateX(-100%);  
      opacity: 1;  
      transform: translateX(-100%);  
    }  
    #mainwrapper .box:hover img#image-4 {  
      -moz-transform: translateX(-100%);  
      -o-transform: translateX(-100%);  
      -webkit-transform: translateX(-100%);  
      transform: translateX(-100%);  
    }  
    /** Rotate Caption :hover Behaviour **/  
        #mainwrapper .box:hover .rotate {  
        background-color: rgba(0,0,0,1) !important;  
        -moz-transform: rotate(-180deg);  
        -o-transform: rotate(-180deg);  
        -webkit-transform: rotate(-180deg);  
        transform: rotate(-180deg);  
    }  
#mainwrapper .box:hover #image-6 {  
   -moz-transform: scale(1.4);  
   -o-transform: scale(1.4);  
   -webkit-transform: scale(1.4);  
    transform: scale(1.4);
}
    #mainwrapper .box:hover .scale-caption h3,#mainwrapper .box:hover .scale-caption p {  
        -moz-transform: translateX(200px);  
        -o-transform: translateX(200px);  
        -webkit-transform: translateX(200px);  
        transform: translateX(200px);  

    }    
#mainwrapper .box:hover .fade-caption, #mainwrapper .box:hover .scale-caption {
    opacity: 1;
}
邹大叔
关注
专栏目录
2024年Unity 面试题 |五萬字 二佰道| Unity面试题大全，面试题总结【全网最全，收藏一篇足够面试】
努力前行，总会成为自己心中的那道光
02-23 12万+
正所谓 金三银四 ，又到了找工作的大好时机了，不知道大家有没有意向找一份更好的工作呢~ 之前写了很多Unity的学习和实例文章，但是面试题部分还没有一个系统的整理。 那本篇文章就来整理一下Unity中一些常见的面试题，说不准就会面试的时候就会遇到！ 本篇文章会将Unity所有方面的面试资料都融会贯通，绝对是2022年Unity面试领域最实用的文章啦！
Qt开发经验总结
草上爬的博客
12-02 8263
增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废弃了，必须用Qt5中对应的新的函数。跟随时代脚步，增加了不少新特性以满足日益增长的客户需求。对某些模块和类型及处理进行了革命性的重写，运行效率提高不少。有参数类型的变化，比如 long * 到 qintptr * 等，更加适应后续的拓展以及同时对32 64位不同系统的兼容。
css鼠标悬浮图片遮罩特效
yooellie的博客
02-27 3459
cssdiv>div{ background: rgba(255, 255, 255, 0); transition: background 0.3s linear; } div:hover>div{ background: rgba(228, 228, 228, 0.29); }html<div style="width:200px;height:200px;positio
鼠标移入图片散开的效果
qq_44538193的博客
01-18 473
鼠标移入图片散开的效果 作者：李德新 撰写时间：2019年01月 18日 CSS3是我们学习IT技术必须学会的使用的技术，CSS3能为我提供许多的便利。 下面我来演示一下鼠标移入图片散开的效果：如图 这是常规的布局，布局完成后在使用定位把所有图片放在一起即可。 然后只要为每一张图片外部的标签添加个伪类便能完成。 最后实现鼠标移入图片散开的效果。如图 ...
鼠标移动到图片，图片放大
weixin_30457465的博客
03-12 2326
效果图如上 代码 <div class="box"> <img src="http://upcdn.mpres.51vv.com/v_block/36857a2a13bf587a08d8e72bfbb95442.jpg.cs200x200.jpg"> </div> .box{ ...
30种鼠标经过图片的酷炫效果
张常文的博客
02-25 709
来自：http://www.htmleaf.com/html5/html5donghua/20141110444.html
鼠标移过图片的特效
phubing
09-17 287
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; div{ width: 300px; height:
html5酷炫3D图片翻转动画切换特效
09-08
在本案例中，“html5酷炫3D图片翻转动画切换特效”是一个利用HTML5特性来实现的创新效果，旨在提升用户体验，使网页更加生动和引人入目。 这个特效主要涉及以下几个核心知识点： 1. **CSS3 3D Transform**：HTML5...
教你五分钟实现前端页面滚动信息的制作
qq_40471201的博客
09-19 5271
marquee标签的介绍 这个标签是html里面用来制作滚动信息栏目的一个标签,而且这是个成对出现的闭合的标签.用起来类似于html里面很常规的标签.但是由于这个标签吧,很久都没使用了,现在我们也只是粗略介绍一下里面的一些个属性,主要部分还是得靠JavaScript来实现. &lt;marquee&gt;&lt;/marquee&gt; 首先介绍这个标签的第一个属性: 1.behaviour 这...
基于three.js开发可视化应用经验总结
lovelygugu的博客
04-26 4589
文章目录背景简介技术方案介绍及对比WebglThree.jsWEBGL和Three.js的关系具体应用过程星空背景流线汇聚效果行政分区环形选择器Three.js 中使用TWEEN插件实现动画使用orbit controls插件（轨道控制）来控制模型交互动作通过THREE.RAYCASTER给模型绑定鼠标事件疑难问题分析及解决方案Canvas纹理贴图模糊场景中渲染顺序错误z-fighting问题透明渲染Three.js性能优化 背景简介 越来越多的应用已经不再满足于二维的数据可视化，追求效果更好的3D数据可视
各种鼠标移入效果
11-25
插件描述：各种鼠标移入效果. 参考示例：http://www.jq22.com/jquery-info4782
js实现鼠标左右移动，图片也跟着移动效果
12-12
效果：鼠标往左移，图片对应右移，鼠标往右移，图片就左移动。图片距离越远偏移距离越大。 思路：首先获取图片原先的距离。设置一个变化值，图片的最终距离等于原先的距离加上变化值 布局：大盒子里面是图片，大盒子position:relative；图片position:absolute; <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> body{margin:0;} #wrap{width:800px;height:500px;margin:30px auto; border:1px s
CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）
05-30
CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义） CSS3的transform:scale()可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。 参考文档： http://blog.csdn.net/u014175572/article/details/51535768
js鼠标移上让图片抖动效果
10-24
鼠标移上让图片抖动效果...代码有注释 可以更改成文字抖动一些效果！
鼠标悬浮图片特效
soos的博客
09-03 604
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;背景图片悬浮放大&lt;/title&gt; &lt;style&gt; *{padding: 0px;margin: 0px;} .container{width: 80
Acticle 13:javascript特效小分享：鼠标移入移出出现弹框效果
amytun_yu的博客
10-25 548
简单的小特效 代码：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--<link rel="stylesheet" type="text/css" href="css/index.css"/>--> <style type="t
鼠标在图片上移动，图片实现微动的效果
Christine
06-15 1670
wrapNode.find('.banner').on("mousemove",function(e) { var ax = -($(window).width()/2- e.pageX)/100; var ay = ($(window).height()/2- e.pageY)/50; $(this).find('.scene').a...
鼠标移动到图片上时，图片的样式改变
nhpyliner的专栏
08-16 2305
.applyBorder { border:0.2cm groove orange }.removeBorder { border:none }onmouseout="this.className=removeBorder">-->onmouseout="this.className=removeBorder" src="1.jpg" NAME="imageTest"> 
html图片放缩特效,CSS3炫酷的鼠标滑过图片缩放和标题效果
weixin_39942108的博客
06-04 259
这是一款使用纯 CSS3 制作的效果非常炫酷的鼠标滑过图片缩放和标题效果。该CSS3图片效果中图片的边框被制作为不停动画的护栏效果，当用鼠标滑过图片时，图片会有非常炫酷的动画效果，并且不只是图片，每一层图片标题都有自己的动画效果。CSS3 animations是一个非常神奇的技术，相比于javascript和flash，它只用少量的代码就可以制作出平滑的动画效果。现在，所有的现代浏览器，包括IE9...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值