根据 奇舞团：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. redis注册成window服务 标签： redis

    注册服务 redis-server.exe –service-install redis.windows.conf 删除服务 redis-server –service-uninstall 开启服务 ...

  2. LeetCode（194.Transpose File）(awk进阶)

    194. Transpose File Given a text file file.txt, transpose its content. You may assume that each row ...

  3. Golang入门教程（三）beego 框架安装

    beego 是一个快速开发 Go 应用的 HTTP 框架,他可以用来快速开发 API.Web 及后端服务等各种应用,是一个 RESTful 的框架,主要设计灵感来源于 tornado.sinatra ...

  4. functools学习记录

    装饰器demo def wrapper(func): print('装饰器工作了') def inner(*args,**kwargs): return func(*args,**kwargs) re ...

  5. 细说REST API安全之认证授权

    认证授权包含2个方面:(1)访问某个资源时必须携带用户身份信息,如:用户登录时返回用户access_token,访问资源时携带该参数.(2)检查用户是否具备访问当前资源(url或数据)的权限:访问资源 ...

  6. 30. Spring Boot ActiveMQ

    1.引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  7. 如何利用iconfont图标代替小图片

    1.首先 你要有一个阿里巴巴矢量图这个网站的账号:http://www.iconfont.cn/ 在这里注册哦~ 2.蓝后 可以在首页搜索你想要的图标,比如 我想放一个管理员的图标在页面上: 就要点击 ...

  8. 新浪某站CRLF Injection导致的安全问题

    CRLF攻击的一篇科普:新浪某站CRLF Injection导致的安全问题(转) 转:https://www.leavesongs.com/PENETRATION/Sina-CRLF-Injectio ...

  9. kettle中的合并记录使用记录

    注意:合并记录的使用前提是2个数据源都按比较关键字排过序,否则合并之后的数据不准确,可能会多出很多. 该步骤用于将两个不同来源的数据合并,这两个来源的数据分别为旧数据和新数据,该步骤将旧数据和新数据按 ...

  10. 玩转Google

    前言: 网上浏览信息,用百度搜索的时候,第一页都是广告,真是槽心到极点,果断放弃百度,现在用谷歌是真舒服,用起一句话用好谷歌.用好搜索引擎.你可以打开世界的大门! 加入特殊字符搜索: | 同时搜索关键 ...