css3遮罩层_CSS3鼠标hover图片超酷遮罩层动画特效
HTML代码
Williamson
Williamson
Web designer
Miranda Roy
Miranda Roy
Web developer
CSS
.box{
font-family: 'Dosis', sans-serif;
position: relative;
overflow: hidden;
}
.box:before,
.box:after{
content: '';
background: linear-gradient( #000dff 0%,#6b73ff 100%);
height: 150%;
width: 100%;
border-radius: 0 100% 0 0;
opacity: 0;
position: absolute;
left: -50%;
top: 100%;
z-index: 1;
transition: border-radius .5s ease-out,top .5s ease-out,opacity .3s ease-out;
}
.box:after{
border-radius: 100% 0 0 0;
left: 50%;
}
.box:hover:before,
.box:hover:after{
top: -50%;
opacity: 0.9;
border-radius: 0 35% 0 0;
}
.box:hover:after{ border-radius: 35% 0 0 0; }
.box img{
width: 100%;
height: auto;
}
.box .box-content{
color: #fff;
text-align: center;
width: 80%;
opacity: 0;
transform: translateX(-50%) translateY(-50%);
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
transition: all 0.3s ease 0.2s;
}
.box:hover .box-content{ opacity: 1; }
.box .title{
font-size: 25px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 0 7px;
}
.box .post{
font-size: 18px;
font-weight: 600;
letter-spacing: 1px;
text-transform: capitalize;
margin: 0 0 10px;
display: block;
}
.box .icon{
padding: 0;
margin: 0;
list-style: none;
}
.box .icon li{
margin: 0 5px;
display: inline-block;
}
.box .icon li a{
color: #fff;
background: transparent;
font-size: 14px;
line-height: 31px;
height: 35px;
width: 35px;
border: 1px solid #fff;
border-bottom: none;
border-right: none;
border-radius: 50%;
display: block;
transition: all 0.3s ease;
}
.box .icon li a:hover{
color: #fff;
box-shadow: 0 0 10px #000;
}
@media only screen and (max-width:990px){
.box { margin: 0 0 30px; }
}
Demo源码下载:https://tc5.us/file/21793581-404992058
css3遮罩层_CSS3鼠标hover图片超酷遮罩层动画特效相关推荐
- 背景图片hover加蒙层_css3给背景图片加颜色遮罩的方法
前段时间在开发中,遇到需要给背景层加颜色遮罩的项目,现在特定总结一下给背景图层加颜色遮罩的方法. 方法一:通过定位叠加(注意层级) .wrap1 { position: relative; width ...
- html图片鼠标动态效果代码,CSS3鼠标hover图片动画特效代码
这是一款CSS3鼠标hover图片动画特效代码.该鼠标hover动画使用简单的CSS transition技术,配合元素的宽度变化,制作出炫酷的鼠标hover图片遮罩层动画效果. 使用方法 在页面中引 ...
- html图片显示详情,纯CSS鼠标经过图片视差弹出层显示详情链接按钮特效代码.html...
纯CSS鼠标经过图片视差弹出层显示详情链接按钮特效代码 * { box-sizing: border-box; } html, body { height: 100%; background:#ddd ...
- html选项卡如何美化,Bootstrap超酷Tabs选项卡美化特效
这是一款基于Bootstrap的超酷Tabs选项卡美化特效.该Tabs选项卡在原生Bootstrap选项卡的基础上,使用CSS3样式来对齐进行美化,效果非常炫酷. 使用方法 在页面中引入bootstr ...
- 超酷flash光芒光线特效
http://thefwa.com/ 一个不错的英文设计展示站点 超酷flash光芒光线特效 http://www.zcool.com.cn/flash/light/page_1.html
- php星空背景动态,纯CSS3炫酷3D星空动画特效
简要教程 这是一款使用纯CSS3制作的炫酷3D星空动画特效.该特效中,以飞船向前快速移动为视角,所有的星星都快速的变大并向后移动,效果非常逼真. 使用方法 HTML结构 该3D星空特效只使用一个 元素 ...
- 纯CSS3炫酷3D星空动画特效
效果: 源码: <!DOCTYPE html> <html lang="zh"> <head><meta charset="UT ...
- Jquery实现超酷的时间轴特效
原文:Jquery实现超酷的时间轴特效 源代码下载地址:http://www.zuidaima.com/share/1607123657378816.htm
- 火箭月亮html5游戏,HTML5 svg和CSS3炫酷火箭升空动画特效
这是一款HTML5 svg和CSS3炫酷火箭升空动画特效.该特效的火箭使用SVG来实现,并通过CSS3动画来实现火箭的动画特效. 使用方法 HTML结构 CSS样式 body { background ...
最新文章
- 测试篇|如何简便标定信号源电流大小?
- 鼠标移动到ul图片会摆动_我们可以从摆动时序分析中学到的三件事
- python中import os_Python常用模块os--与操作系统交互
- JavaScript级联国家地区
- android guide 中文,Android API Guide:Toast 中文翻译
- as3中的 override
- 终于把Redis场景设计搞清楚了,需要掌握的都在这了
- Python面试必须要了解的15个问题
- [转载] 七龙珠第一部——第029话 冒险再度开始
- Windows系统CVE整理
- java脚本计算器按钮无反应_2020年3月份最新计算机语言排行,20种语言争锋相对Java依旧飘逸...
- ODBC安装及数据源配置
- css vue 内联_Vue学习之路第十二篇:为页面元素设置内联样式
- vmware虚拟机使用docker使用代理国外镜像
- 随机存储器与只读存储器
- js清空本地存储_前端存储除了 localStorage 还有啥
- 微信小程序-调查问卷
- 文本修饰标签(text-decoration)
- 学校计算机的使用英语作文180字,计算机(Computer)
- Win10照片应用的小bug——自动模糊图片(有过渡色)
热门文章
- Atitit.木马病毒自动启动-------------win7计划任务的管理
- [cocoapods]cocoapods问题解决
- 自定义标签 tag AttachTag 实现附件jsp方便的显示和下载
- 如何去设计一个自适应的网页设计或HTMl5
- 通过变长数组(VLA)来看编译器的不同
- 【jquery模仿net控件】简单的datalist控件更新,及其简单应用
- OSPF分解试验部分-LAB7:NSSA区域
- 1、Reactive Extensions for .NET(译)
- kmeans聚类选择最优K值python实现
- 【原创】谈谈线上CPU100%排查套路