根据 奇舞团: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. Oracle和Mysql的安装

    Oracle12C的安装:https://blog.csdn.net/qubeleyz/article/details/79451192 Mysql安装:

  2. 无法定位程序输入点 InitializeCriticalSectionEx、GetTickCount64

    (1)方法一:在vc项目中把对应的方法名改为 InitializeCriticalSection.GetTickCount. (2)方法二:添加如下定义#define WINVER           ...

  3. 9.selenium

    1.安装与入门 pip3 install selenium 将chromedriver放到一个没有权限要求的目录 from selenium import webdriver driverpath=& ...

  4. Mysql宽字节注入(转)

    尽管现在呼吁所有的程序都使用unicode编码,所有的网站都使用utf-8编码,来一个统一的国际规范.但仍然有很多,包括国内及国外(特别是非英语国家)的一些cms,仍然使用着自己国家的一套编码,比如g ...

  5. 2016-2017-2 20155324实验二《Java面向对象程序设计》实验报告

    2016-2017-2 20155324实验二<Java面向对象程序设计>实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉 ...

  6. 1.2 认识python(了解)

    一.Python发展背景 Python的作者,Guido von Rossum(吉多·范·罗苏姆,中国Python程序员都叫他 龟叔),荷兰人.1982年,龟叔从阿姆斯特丹大学获得了数学和计算机硕士学 ...

  7. Python之 string 和 random方法

    1. import string import string print(string.ascii_lowercase) #输出全部小写字母a-z print(string.ascii_letters ...

  8. [Ynoi2016]这是我自己的发明 莫队

    传送门:here 很棒的莫队题啊..... 题意: 有一棵$ n$个点的树,树上每个点有点权,有$ m$次询问: 操作1:给定两个点$ x,y$,求二元组$ (a,b)$的数量,要求$ a$在$ x$ ...

  9. vue-axios

    vue axios全攻略   不再继续维护vue-resource,并推荐大家使用 axios 开始,axios 被越来越多的人所了解.本来想在网上找找详细攻略,突然发现,axios 的官方文档本身就 ...

  10. Flask恋爱的一瞬间

    python的三大框架:Flask:轻量级框架 Django:重量级框架 Tornado:性能最好,异步框架 Flask初学 #导包 from flask import Flask #建立flask对 ...