Alloy Team首页的元素Hover效果

效果预览

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 100%;
height: 200px;
background-color: #1BBBC3;
position: relative;
}
.box .line{
cursor: pointer;
position: absolute;
left: -100%;
top: 0;
width: 100%;
height: 100%;
background-image: -webkit-linear-gradient(0deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.5),hsla(0,0%,100%,0));
transform: skewx(-25deg);
-o-transform: skewx(-25deg);
-moz-transform: skewx(-25deg);
-webkit-transform: skewx(-25deg)
}
.box:hover .line{
-webkit-transition: all .5s ease;
transition: all .5s ease;
left: 100%
} .box2{
margin-top: 20px;
width: 265px;
height: 200px;
border-radius: 5px;
background-color: #89d04f!important;
position: relative;
padding: 20px 10px;
color: #fff;
-webkit-transition: all .3s ease;
transition: all .3s ease;
overflow: hidden;
}
.box2:hover{
transform: translateY(-6px);
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
-webkit-box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
-moz-box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
}
</style>
</head>
<body>
<div class="box">
<div class="line"></div>
</div> <div class="box box2">
<div class="line"></div>
</div>
</body>
</html>

 

CSS3七彩文字

效果预览

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background-color: #333;
} @media (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
.text{
background-image: -webkit-linear-gradient(left,#cddc39,#ff9800 25%,#cddc39 50%,#ff9800 75%,#cddc39)!important;
-webkit-text-fill-color: transparent!important;
-webkit-background-clip: text!important;
-webkit-background-size: 200% 100%!important;
-webkit-animation: masked-animation 2s infinite linear!important;
} .text:hover {
color: #f2b535;
background: none;
}
}
.text:hover{
-webkit-animation: masked-animation 1s infinite linear!important;
}
@-webkit-keyframes masked-animation {
0% {
background-position: 0 0
} to {
background-position: -100% 0
}
}
</style>
</head>
<body>
<div><a href="" class="text">勇士是冠军</a></div>
<div><span class="text">勇士是冠军</span></div>
<div><span class="text">勇士是冠军</span></div> </body>
</html>

  

CSS3动画闪跳的更多相关文章

  1. CSS3动画几个平时没注意的属性

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

  2. CSS3学习(CSS3过渡、CSS3动画)

    CSS3过渡:transition属性--专门应对颜色.长度.宽度.位置等变化的过渡 通过CSS3,我们可以在不使用Flash和JavaScript的情况下,为当前某元素从某样式改变为某样式的时候添加 ...

  3. 分享7款顶级的CSS3动画特效

    1.CSS3 SVG文字背景动画 超酷的文字特效 今天我们来分享一款基于CSS3和SVG的文字特效,文字的背景可以定义一些动画特效,在背景动画播放的同时,我们还可以选中文字.本示例让文字背景展示水波和 ...

  4. 解决浏览器background-image属性不支持css3动画

    问题 最近在使用background-image属性来实现css3的逐帧动画时,碰到了个问题.在chrome浏览器上,background-image属性是支持css3动画的,但是到了firefox上 ...

  5. CSS3 动画记

    css3 动画 在CSS3中可以通过animation创建复杂的动画序列,像transition属性一样用来控制CSS的属性实现动画效果. animation实现动画效果主要由两个部分组成. 通过类似 ...

  6. css3动画使用技巧之——transform-delay为负值时的应用。

    <html>    <head>        <title>css3动画delay为负值时的效果</title>        <meta ch ...

  7. CSS3 动画及过渡详解

    今天开始我们一起来学习有关于CSS3制作动画的几个属性:变形(transform).过渡(transition)和动画(animation)等CSS3技术. 首先我们先来了解一下变形(transfor ...

  8. CSS3动画详解(结合实例)

    一.使用CSS3动画代替JS动画 JS动画频繁操作DOM导致效率非常低 在频繁的操作DOM和CSS时,浏览器会不停的执行重排(reflow)和重绘(repaint) 可以避免占用JS主线程 这边就不细 ...

  9. CSS3动画理解与应用

    CSS3动画理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开始,结束.Anima ...

随机推荐

  1. ArcGIS Server 10.2 公布Oracle11g数据源的 Feature Service

    安装好arcgis server 10.2及 Desktop 而且确保 arcgis server manager 能够正常启动执行载入服务 1.Oracle 配置 安装好Oracleserver端程 ...

  2. Mosquito的优化——epoll优化(七)

    本文由逍遥子撰写,转发请标注原址: http://blog.csdn.net/houjixin/article/details/46413583 或 http://houjixin.blog.163. ...

  3. POJ 3044单调栈

    题意: 思路: 单调栈 // by SiriusRen #include <stack> #include <cstdio> using namespace std; stac ...

  4. POJ 2132 暴搜OR Floyd

    题意: 给你一个邻接矩阵(n<=25)问所有1到2路径的gcd的lcm是多少. 一些经验(WA/TLE的经验): 1. 无脑暴搜 是会TLE的--. 2. 关于精度 dyf神牛说了:long l ...

  5. 《鸟哥的Linux私房菜》笔记——01. 计算机概论

    计算机的五大部分:输入单元.输出单元.CPU(控制单元(Control Unit).算数逻辑单元(ALU)).内存. CPU 的架构 精简指令集(Reduced Instruction Set Com ...

  6. 路飞学城Python-Day7(practise)

    # 1.编码问题# i.请说明python2与python3中的默认编码是什么?# python2中的默认编码是ASCII码,只能识别英文等其他字符# python3中的默认编码是utf-8# ii. ...

  7. 快速沃尔什变换(FWT)笔记

    开头Orz hy,Orz yrx 部分转载自hy的博客 快速沃尔什变换,可以快速计算两个多项式的位运算卷积(即and,or和xor) 问题模型如下: 给出两个多项式$A(x)$,$B(x)$,求$C( ...

  8. Linux 文件系统挂载

    文件系统挂载简介  磁盘分区和格式化完成后,磁盘分区要想能够使用,就需要挂载,在挂载某个分区前需要先建立一个挂载点  挂载:将新的文件系统关联至当前根文件系统  卸载:将某文件系统与当前根文件系统的关 ...

  9. eclipse/myeclipse中js/java的自动提示只有4个字符怎么解决

    https://blog.csdn.net/LinBM123/article/details/80450690

  10. 紫书 例题11-4 UVa247 (Floyd判断联通)

    Floyd联通, 然后为了输出联通分量而新建一个图, 让互相可以打电话的建立一条边, 然后dfs输出联通分量就ok了. #include<cstdio> #include<iostr ...