方向感知鼠标悬停效果动画

最新推荐文章于 2024-08-28 17:18:20 发布
最新推荐文章于 2024-08-28 17:18:20 发布
阅读量721 收藏 2
点赞数
分类专栏： 练手小案例 
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>方向感知鼠标悬停效果动画</title>
        <style type="text/css">
            @charset "utf-8";
            /* CSS Document */
            html{
                font-family:arial;
                color:#aaa;
            }
            body{
                background-color:#2C3437;
            }

            a{
                color:#5555ff;
            }

            ul{
                width: 500px;
            }
            li{
                display: inline-block;
                list-style: none;
                margin: 2px 0;
            }
            .container{
                text-align:center;
                perspective:500px;
                -webkit-perspective:500px;
                border: 1px solid;
            }
            .example{
                display:table-cell;
                vertical-align:middle;
                color: #fff;
                width: 150px;
                height: 150px;
                background:url(../images/01.jpg) no-repeat;
            }

            @-webkit-keyframes topenter {
                from {
                    -webkit-transform-origin:top;
                    -webkit-transform:rotateX(-90deg);
                }
                to {
                    -webkit-transform-origin:top;
                    -webkit-transform:rotateX(0deg);
                }
            }
            @keyframes topenter {
                from {
                    transform-origin:top;
                    transform:rotateX(-90deg);
                }
                to {
                    transform-origin:top;
                    transform:rotateX(0deg);
                }
            }
            @-webkit-keyframes topleave {
                from {
                    -webkit-transform-origin:top;
                    -webkit-transform:rotateX(0deg);
                }
                to {
                    -webkit-transform-origin:top;
                    -webkit-transform:rotateX(-90deg);
                }
            }
            @keyframes topleave {
                from {
                    transform-origin:top;
                    transform:rotateX(0deg);
                }
                to {
                    transform-origin:top;
                    transform:rotateX(-90deg);
                }
            }
            @-webkit-keyframes bottomenter {
                from {
                    -webkit-transform-origin:bottom;
                    -webkit-transform:rotateX(90deg);
                }
                to {
                    -webkit-transform-origin:bottom;
                    -webkit-transform:rotateX(0deg);
                }
            }
            @keyframes bottomenter {
                from {
                    transform-origin:bottom;
                    transform:rotateX(90deg);
                }
                to {
                    transform-origin:bottom;
                    transform:rotateX(0deg);
                }
            }
            @-webkit-keyframes bottomleave {
                from {
                    -webkit-transform-origin:bottom;
                    -webkit-transform:rotateX(0deg);
                }
                to {
                    -webkit-transform-origin:bottom;
                    -webkit-transform:rotateX(90deg);
                }
            }
            @keyframes bottomleave {
                from {
                    transform-origin:bottom;
                    transform:rotateX(0deg);
                }
                to {
                    transform-origin:bottom;
                    transform:rotateX(90deg);
                }
            }
            @-webkit-keyframes leftenter {
                from {
                    -webkit-transform-origin:left;
                    -webkit-transform:rotateY(90deg);
                }
                to {
                    -webkit-transform-origin:left;
                    -webkit-transform:rotateY(0deg);
                }
            }
            @keyframes leftenter {
                from {
                    transform-origin:left;
                    transform:rotateY(90deg);
                }
                to {
                    transform-origin:left;
                    transform:rotateY(0deg);
                }
            }
            @-webkit-keyframes leftleave {
                from {
                    -webkit-transform-origin:left;
                    -webkit-transform:rotateY(0deg);
                }
                to {
                    -webkit-transform-origin:left;
                    -webkit-transform:rotateY(90deg);
                }
            }
            @keyframes leftleave {
                from {
                    transform-origin:left;
                    transform:rotateY(0deg);
                }
                to {
                    transform-origin:left;
                    transform:rotateY(90deg);
                }
            }
            @-webkit-keyframes rightenter {
                from {
                    -webkit-transform-origin:right;
                    -webkit-transform:rotateY(-90deg);
                }
                to {
                    -webkit-transform-origin:right;
                    -webkit-transform:rotateY(0deg);
                }
            }
            @keyframes rightenter {
                from {
                    transform-origin:right;
                    transform:rotateY(-90deg);
                }
                to {
                    transform-origin:right;
                    transform:rotateY(0deg);
                }
            }
            @-webkit-keyframes rightleave {
                from {
                    -webkit-transform-origin:right;
                    -webkit-transform:rotateY(0deg);
                }
                to {
                    -webkit-transform-origin:right;
                    -webkit-transform:rotateY(-90deg);
                }
            }
            @keyframes rightleave {
                from {
                    transform-origin:right;
                    transform:rotateY(0deg);
                }
                to {
                    transform-origin:right;
                    transform:rotateY(-90deg);
                }
            }
        </style>
	</head>
	<body>
		<script type="text/javascript"  src="js/jquery.min.js"></script>
        <div id="wrapper">
            <ul>
                <li>
                    <div class="container">
                        <div class="example"></div>
                    </div>
                </li>
                <li>
                    <div class="container">
                        <div class="example"></div>
                    </div>
                </li>
                <li>
                    <div class="container">
                        <div class="example"></div>
                    </div>
                </li>
                <li>
                    <div class="container">
                        <div class="example"></div>
                    </div>
                </li>
                <li>
                    <div class="container">
                        <div class="example"></div>
                    </div>
                </li>
                <li>
                    <div class="container">
                        <div class="example"></div>
                    </div>
                </li>
				<li>
                    <div class="container">
                        <div class="example"></div>
                    </div>
                </li>
                <li>
                    <div class="container">
                        <div class="example"></div>
                    </div>
                </li>
                 <li>
                    <div class="container">
                        <div class="example"></div>
                    </div>
                </li>
            </ul>
        </div>
        <script>
         $(function () {
             //initialize
             $('.container').css({
                 'perspective-origin': '50% 0%',
                 '-webkit-perspective-origin': '50% 0%'
             });
             $('.container .example').css({
                 'animation': 'topleave 400ms forwards',
                 '-webkit-animation': 'topleave 400ms forwards'
             });
             $('.container').bind('mouseenter mouseleave', function (e) {
                 var dir = getDirection($(this), e),
                     enter = e.type === 'mouseenter',
                     topPerspectiveOrigin = {
                         'perspective-origin': '50% 0%',
                         '-webkit-perspective-origin': '50% 0%'
                     },
                     rightPerspectiveOrigin = {
                         'perspective-origin': '100% 50%',
                         '-webkit-perspective-origin': '100% 50%'
                     },
                     bottomPerspectiveOrigin = {
                         'perspective-origin': '50% 100%',
                         '-webkit-perspective-origin': '50% 100%'
                     },
                     leftPerspectiveOrigin = {
                         'perspective-origin': '0% 50%',
                         '-webkit-perspective-origin': '0% 50%'
                     },
                     $target = $(this).find('.example');
                 switch (dir) {
                     case 0:
                         if (enter) {
                             $(this).css(topPerspectiveOrigin);
                             $target.css({
                                 'animation': 'topenter 400ms forwards',
                                 '-webkit-animation': 'topenter 400ms forwards'
                             });
                         } else {
                             $(this).css(topPerspectiveOrigin);
                             $target.css({
                                 'animation': 'topleave 400ms forwards',
                                 '-webkit-animation': 'topleave 400ms forwards'
                             });
                         };
                         break;
                     case 1:
                         if (enter) {
                             $(this).css(rightPerspectiveOrigin);
                             $target.css({
                                 'animation': 'rightenter 400ms forwards',
                                 '-webkit-animation': 'rightenter 400ms forwards'
                             });
                         } else {
                             $(this).css(rightPerspectiveOrigin);
                             $target.css({
                                 'animation': 'rightleave 400ms forwards',
                                 '-webkit-animation': 'rightleave 400ms forwards'
                             });
                         };
                         break;
                     case 2:
                         if (enter) {
                             $(this).css(bottomPerspectiveOrigin);
                             $target.css({
                                 'animation': 'bottomenter 400ms forwards',
                                 '-webkit-animation': 'bottomenter 400ms forwards'
                             });
                         } else {
                             $(this).css(bottomPerspectiveOrigin);
                             $target.css({
                                 'animation': 'bottomleave 400ms forwards',
                                 '-webkit-animation': 'bottomleave 400ms forwards'
                             });
                         };
                         break;
                     case 3:
                         if (enter) {
                             $(this).css(leftPerspectiveOrigin);
                             $target.css({
                                 'animation': 'leftenter 400ms forwards',
                                 '-webkit-animation': 'leftenter 400ms forwards'
                             });
                         } else {
                             $(this).css(leftPerspectiveOrigin);
                             $target.css({
                                 'animation': 'leftleave 400ms forwards',
                                 '-webkit-animation': 'leftleave 400ms forwards'
                             });
                         };
                         break;
                 }
             });
         })
         function getDirection($element, event) {
             var w = $element.width(),
                 h = $element.height(),
                 x = (event.pageX - $element.offset().left - (w / 2)) * (w > h ? (h / w) : 1),
                 y = (event.pageY - $element.offset().top - (h / 2)) * (h > w ? (w / h) : 1),
                 direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
             return direction;
         }
        </script>
	</body>
</html>

jQuery感知方向悬停按钮特效特效代码
03-20
jQuery感知方向悬停按钮特效是一款jQuery基于css3属性制作感知鼠标方向的按钮悬停波浪动画特效。
鼠标经过方向感知
weixin_34311757的博客
05-15 91
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>666</title> <style> /* the important bits */ li { -webkit-perspective: 400px; ...
SlipHover,能感知鼠标方向的图片遮罩效果jQuery插件
weixin_34378969的博客
03-03 162
接上一篇博文，介绍完jQuery插件开发后这里上一个自己的作品，也是初次实践，小有成就的感觉。 话说这个插件年前就写好了，然后挂到GitHub，然后就偷偷看着Google Analysis心中暗自激动加窃喜，因为看到间歇地有一些来自世界各地的访客，那感觉真是乡下二狗子刚进城啊，现在看来好二。 Inspired By 首先要介绍的是灵感来自于，嗯，介绍一下还是有必要的，因为创意这东西，有时...
使用vue3模拟Mac程序坞鼠标悬停动画
wuzhangting的博客
08-23 512
这样，当你将代码复制到 HTML 文件中并在浏览器中打开时，就可以看到 Vue 3 模拟 Mac 程序坞鼠标悬停动画的效果了。要使用 Vue 3 模拟 Mac 程序坞（Dock）鼠标悬停动画，你可以使用 Vue 的过渡效果和动态类绑定来实现。请确保在 HTML 文件中引入了 Vue.js 库，并将以上代码放置在正确的位置。在上述代码中，我们使用 Vue 3 创建了一个 Vue 应用，并定义了一个。在 HTML 中，我们使用 Vue 的指令。属性来切换项的样式。，从而改变项的样式。方法将 Dock 项的。
多款炫酷鼠标悬停图文动画效果.zip
07-04
纯CSS3实现的鼠标悬停动画效果，各种炫酷动画，用户体验非常好 使用方法： 1、将CSS代码引入到你的网页中 2、将body中的代码部分拷贝到你的页面中
向感知鼠标悬停效果动画特效代码
03-20
在IT领域，尤其是在网页设计和用户体验优化中，"向感知鼠标悬停效果动画特效代码"是一种常见的技术应用。这种效果通常用于提升用户交互体验，使用户在鼠标悬停在某个元素（如图片）上时，能明显感受到视觉反馈，从而...
向感知鼠标悬停效果动画.zip
07-04
向感知鼠标悬停效果动画适用于图片的预览
CSS3方向感知鼠标悬停卡片翻转动画特效
06-11
本案例中，我们探讨的是一个名为“CSS3方向感知鼠标悬停卡片翻转动画特效”的技术应用，它利用CSS3的3D转换功能，实现了一种智能感知鼠标进入卡片方向并随之展示不同角度翻转动画的特效。这个特效可以极大地提升用户...
jQuery+css3感知鼠标方向悬停按钮动画特效
06-11
然后，jQuery会根据这个方向信息，动态地添加或改变CSS类，这些类包含了对应方向的动画效果。 CSS3的动画通常是通过关键帧(`@keyframes`)来定义的。在这个特效中，可能有四个关键帧动画，分别对应按钮的上、下、左...
CSS3方向感知鼠标悬停卡片翻转动画效果
CSS3方向感知卡片翻转动画特效是一款以CSS3技术实现的网页动画效果，其核心特性在于卡片在用户进行鼠标悬停操作时，会根据鼠标移动的方向展现翻转动画。该特效使得网页中的卡片元素在视觉上更具互动性，用户可以清晰...
多款炫酷鼠标悬停图文动画效果特效代码
03-20
纯CSS3实现的鼠标悬停动画效果，各种炫酷动画，用户体验非常好 使用方法： 1、将CSS代码引入到你的网页中 2、将body中的代码部分拷贝到你的页面中
基于vuejs的鼠标悬停动物显示和隐藏动画特效
12-10
这是一款基于vuejs的鼠标悬停动物显示和隐藏动画特效。该特效使用vuejs来编写，在鼠标悬停到卡片上面时，会有一只指定的小狗从卡片下冒出来，非常炫酷和可爱。
vue实现鼠标经过动画
10-16
主要为大家详细介绍了vue实现鼠标经过动画的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
HTML5 CSS3 鼠标悬停动画展开的二级菜单.rar
07-10
HTML5 CSS3 鼠标悬停动画展开的二级菜单，把你的鼠标放在菜单上，就可看到子菜单展开的动画效果了，十分好看漂亮。
带方向感知的鼠标滑过图片边框特效jQuery插件
07-05
带方向感知的鼠标滑过图片边框特效jQuery插件
vue2卡片鼠标悬停效果
最新发布
老头要上朝的博客
08-28 1358
鼠标悬停效果
vue内实现风车转动，鼠标悬浮停止并放大，鼠标移出继续转动
weixin_44975002的博客
08-23 301
<div id="box"> <div id="main" @mouseover="mouseoverFun" @mouseleave="mouseleaveFun"> <div class="css1"> <div class="leftTitle">战略性新兴产业</div> <div class="corporateBrand">企业品牌
html5遮罩效果鼠标悬停,jquery和css3方向感知鼠标滑过图片遮罩效果
weixin_42644410的博客
05-31 268
这个教程是教你如何使用jQuery和css3制作一个可以感知鼠标方向的hover图片遮罩层效果。html结构使用一个无序列表来包住所有的图片和图片说明。HTML Natalie & Justin Cleaning by Justin Younger无序列表要做成相对定位并且左浮动，图片描述(遮罩层)使用绝对定位。.da-thumbs li {float: left;m...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值