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. 搞笑OI

    OI难 噫吁嚱,维护难哉!OI之难,难于上青天!哈希及DP,代码何茫然!尔来一千两百A,不见金牌背后难.西当华师有考场,可以横绝CN巅.编译不过壮士死,然后超时爆内存相钩连.上有自主招生之高标,下有由 ...

  2. Scrapy中scrapy.Request和response.follow的区别

    在写scrapy的spider类的parse方法的时候,有些链接需要提取出来继续爬取,这里scrapy提供了一些方法可以方便的实现这个功能,总结如下: 假设我们的目标a标签是target_a 方法1: ...

  3. 【算法】Bellman-Ford算法（单源最短路径问题）（判断负圈）

    单源最短路问题是固定一个起点,求它到其他所有点的最短路的问题. 算法: 设 d[i]  表示 起点 s 离点 i 的最短距离. [1.初始化]  固定起点s,对所有的点 , 如果 i =  s ,  ...

  4. dl learn task

    https://deeplearning4j.org/cn/word2vec Task 1 分类http://blog.csdn.net/czs1130/article/details/7071734 ...

  5. 记一次mysql性能优化过程

    摘要: 所谓mysql的优化,三分是配置的优化,七分是sql语句的优化,通过一些案例分析,希望给大家在工作中带来一些思路 由于配置是运行过那么长时间,很稳定,基本上不考虑,所以本次主要是sql的优化, ...

  6. 1028C：Rectangles

    You are given n rectangles on a plane with coordinates of their bottom left and upper right points. ...

  7. 并发设计模式之Guarded Suspension模式

    - 原文链接: http://www.joyhwong.com/2016/11/19/并发设计模式之guarded-suspension模式/ Guarded Suspension意为保护暂停,其核心 ...

  8. Session与Token认证机制 前后端分离下如何登录

     字号 1 Web登录涉及到知识点 1.1 HTTP无状态性 HTTP是无状态的,一次请求结束,连接断开,下次服务器再收到请求,它就不知道这个请求是哪个用户发过来的.当然它知道是哪个客户端地址发过来的 ...

  9. 浅谈python 中正则的一些函数

         主要的函数有  : match() search() findall() group() groups() split()  match (): 含义  开头匹配,匹配成功返回一个对象失败则 ...

  10. MD5 加密原理（转）

    MD5的全称是Message-Digest Algorithm 5(信息-摘要算法),在90年代初由MIT Laboratory for Computer Science和RSA Data Secur ...