根据 奇舞团：http://www.75team.com/archives/807 做的demo

根据视频中跟着做的 demo1:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    *{margin:0;padding:0;}

    .box,.mask,.img,.border{ width: 200px; height: 200px;border-radius:50%; cursor:pointer;}

    .box{position:relative; }

    .mask,.border{position:absolute;left:0;top:0;}

    .border{border:10px solid red;border-bottom-color:green;border-right-color: green;transition:all 0.5s ease-in; box-sizing:border-box;}

    .mask{  background:rgba(0,0,0,0.2); opacity: 0;color:rgba(255,255,255,0);transition:all 0.5s ease-in;}

    .info{ text-align:center;  font-size: 24px; margin-top:50%; transform: translateY(-50%);}

    .img{ background-size:cover; background-position: 50% 50%;}

    .box:hover .border{ transform:rotateZ(90deg);}

    .box:hover .mask{ opacity:1;color:rgba(255,255,255,1);}

    </style>

</head>

<body>

    <div class="box">

        <div class="img" style="background-image:url(1.jpg)"></div>

        <div class="mask">

            <div class="info">小S</div>

        </div>

        <div class="border"></div>

    </div>

</body>

</html>

跟着 做 “举一反三” 例子： demo2:

发现一个小问题  .mask 的  transform 平移出没有透明度的其实鼠标还是能够hover上 触发box 的 hover,直接导致 hover 区域变大不准 ，最开始想直接 给 box 一个 overflow:hidden 后发现这个效果没用了，再想用伪类解决也没解决了，最后用js 在 #box mouseover时加个class 让他取消到hidden 同时 监听 .mask transition 结束时去掉  #box 上的class 始终保持#box 上hideen;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    *{margin:0;padding:0;}

    #box,.mask,.img{ width: 200px; height: 200px;border-radius:50%; cursor:pointer;}

    #box{position:relative; overflow:hidden; }

    #box.active{ overflow:visible;}

    .mask{position:absolute;left:0;top:0;}

    .border{border:10px solid red;border-bottom-color:green;border-right-color: green;transition:all 0.5s ease-in; box-sizing:border-box;}

    .mask{  transform:translateX(200px); background:rgba(0,0,0,0.2); opacity: 0;color:rgba(255,255,255,0);transition:all 0.3s ease-in;}

    .info{ text-align:center;  font-size: 24px; margin-top:50%; transform: translateY(-50%);}

    .img{ background-size:cover; background-position: 50% 50%;transition:all 0.5s ease-in;}

    .img:after{ display:block; width:200px; height:200px; content:'';border-radius:50%; box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);}

    #box:hover {}

    #box:hover .img{ transform:rotateZ(30deg);}

    #box:hover .mask{ opacity:1;color:rgba(255,255,255,1);transform:translateX(0px);}

    </style>

    <script>

    window.onload = function(){

        var oBox = document.querySelector('#box'),

            oMask = document.querySelector('.mask');

        oBox.onmouseover = function(){

            this.className = 'active';

        }

        oBox.onmouseout = function(){

            this.className = 'active';

        }

        oMask.addEventListener("transitionend", myFunction);

        function myFunction(){

            oBox.className = ' ';

        }

    }

    </script>

</head>

<body>

    <div id="box" >

        <div class="img" style="background-image:url(http://g.hiphotos.baidu.com/image/pic/item/29381f30e924b899b787b0166c061d950a7bf661.jpg)"></div>

        <div class="mask">

            <div class="info">文字</div>

        </div>

    </div>

</body>

</html>

演示：demo2

待解决的问题： 想用伪类的选择器解决,但还是有点问题

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    *{margin:0;padding:0;}

    .box,.mask,.img,.test{ width: 200px; height: 200px;border-radius:50%; cursor:pointer;}

    .box{position:relative; }

    .mask,.test{position:absolute;left:0;top:0;}

    .border{border:10px solid red;border-bottom-color:green;border-right-color: green;transition:all 0.5s ease-in; box-sizing:border-box;}

    .mask{  transform:translateX(200px); background:rgba(0,0,0,0.2); opacity: 0;color:rgba(255,255,255,0);transition:all 0.3s ease-in;}

    .info{ text-align:center;  font-size: 24px; margin-top:50%; transform: translateY(-50%);}

    .img{ background-size:cover; background-position: 50% 50%;transition:all 0.5s ease-in;}

    .img:after{ display:block; width:200px; height:200px; content:'';border-radius:50%; box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);}

    .test:hover { }

    .test:hover  .img{ transform:rotateZ(30deg);}

    .test:hover + .mask{ opacity:1;color:rgba(255,255,255,1);transform:translateX(0px);}

    </style>

</head>

<body>

    <div class="box">

        <div class="img" style="background-image:url(1.jpg)"></div>

        <div class="test"></div>

        <div class="mask">

            <div class="info">文字</div>

        </div>

    </div>

</body>

</html>

CSS3 Hover 动画特效的更多相关文章

  1. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  2. 9种jQuery和css3图片动画特效代码演示

    1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...

  3. css3的动画特效--元素旋转

    开发中,视觉要你实现一个元素的旋转问题,比如说如下图所示: 思路:首先动画动效肯定离不开anmimation动画. 和transition动画一样,animation动画也是CSS3动画的一种,这类动 ...

  4. css3的动画特效--动画序列（animation）

    首先复习一下animation动画添加各种参数 (1)infinite参数,表示动画将无限循环.在速度曲线和播放次数之间还可以插入一个时间参数,用以设置动画延迟的时间.如希望使图标在1秒钟后再开始旋转 ...

  5. css3的动画特效--元素旋转（transition，animation）

    开发中,视觉要你实现一个元素的旋转问题,比如说如下图所示: 思路:首先动画动效肯定离不开anmimation动画. 和transition动画一样,animation动画也是CSS3动画的一种,这类动 ...

  6. CSS3点赞动画特效源码下载

    体验效果:http://hovertree.com/texiao/jquery/62/ 效果图: 下载:http://hovertree.com/h/bjaf/1dvh9ym6.htm 特效库:htt ...

  7. 9款超绚丽的HTML5/CSS3应用和动画特效

    1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形 ...

  8. 纯CSS3超酷3D旋转立方体动画特效

    简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...

  9. 10大炫酷的HTML5文字动画特效欣赏

    文字是网页中最基本的元素,在CSS2.0时代,我们只能在网页上展示静态的文字,只能改变他的大小和颜色,显得枯燥无味.随着HTML5的发展,现在网页中的文字样式变得越来越丰富了,甚至出现了文字动画,HT ...

随机推荐

  1. 学习总结：CSS(二)块级与行级元素特性、盒模型、层模型、BUG与BFC、浮动模型

    一.元素的块级与行级特性 在CSS属性display控制元素是否及如何显示的特性,常用的值有none.inline.block.inline-block,在CSS3中还有一些新的特性状态,在这里不做讨 ...

  2. HDU 1039(字符串判断 **)

    题意是检查一个字符串是否满足三个条件: 一.至少有一个元音字母.二.不能出现三个连续的元音或三个连续的辅音.三.除了 ee 和 oo 外不能出现两个连续相同字母. 若三个条件都能满足,该字符串满足条件 ...

  3. Java入门系列 Java 中的四种引用

    Why java内存管理分为内存分配和内存回收,都不需要程序员负责,垃圾回收的机制主要是看对象是否有引用指向该对象. java对象的引用包括强引用,软引用,弱引用,虚引用 Java中提供这四种引用类型 ...

  4. 开源框架.netCore DncZeus学习（一）npm安装

    今天看到一个不错的开源项目DncZeus, https://github.com/lampo1024/DncZeus 整个界面挺漂亮,而且权限做到了按钮级别,功能也较容易扩展,刚好学习VUE纯看文章很 ...

  5. 通配符 Globbing赏析

    什么是 Globing? https://www.techopedia.com/definition/14392/globbing   Definition - What does Globbing ...

  6. Spring整合redis配置文件详解

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  7. S02-45 struts2 最新漏洞 学习记录

    今天和朋友一起学习S02-45.按照官方解释:Content-Type:multipart/form-data 这个条件成立的时候,能够触发jakarta的上传漏洞.可能导致远程执行任意代码或者上传文 ...

  8. 【小玩意】time-passing-by clock

    就着youtube上的教程用html和js做了个小时钟. Code: clock.html //clock.html <!DOCTYPE html> <html> <he ...

  9. CF809C Find a car

    传送门 luogu 其实这题的某个位置\((i,j)\)的数是\((i-1)\mathrm{xor}(j-1)+1\) 首先一个矩形的答案可以拆成\((x2,y2)-(x1-1,y2)-(x2,y1- ...

  10. C#获取客户端IP地址

    客户端ip:Request.ServerVariables.Get("Remote_Addr").ToString();客户端主机名:Request.ServerVariables ...