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. Windows下ElasticSearch及相关插件的安装

    (1)在官网下载ElasticSearch压缩包.这里我下载的是elasticsearch-1.7.1(下载地址:https://download.elastic.co/elasticsearch/e ...

  2. DICOM医学图像处理：fo-dicom网络传输之 C-Echo and C-Store

    背景: 上一篇博文对DICOM中的网络传输进行了介绍.主要參照DCMTK Wiki中的英文原文.通过对照DCMTK与fo-dicom两个开源库对DICOM标准的详细实现,对理解DICOM标准有一个更直 ...

  3. Educational Codeforces Round 6 C. Pearls in a Row set

    C. Pearls in a Row There are n pearls in a row. Let's enumerate them with integers from 1 to n from ...

  4. php+mysql时报错：Unknown column '' in 'field list'解决方案

    答案来源:http://jingyan.baidu.com/article/9f7e7ec05c5ad76f281554ab.html 很多人在用php+MySQL做网站往数据库插入数据时发现如下错误 ...

  5. Ubuntu下使用Deepin-wine的移植版安装qq微信等

    title: Ubuntu下使用Deepin-wine的移植版安装qq微信等 toc: false date: 2018-09-18 16:12:49 categories: methods tags ...

  6. linux系统定时任务crond入门

    1,Crond: Crond是linux系统中用来定期执行命令或指定程序任务的一种服务或者软件.(Centos5以后默认存在) 当优化开机自启动的时候,第一个就是crond. Crond服务默认情况( ...

  7. POJ 1952 DP

    思路: 这题要求最长下降子序列的长度和个数,我们可以增加 数组maxlen[size](记录当前第1个点到第i个点之间的最长下降序列长度) 和maxnum[size](记录1~i之间的最长下降序列个数 ...

  8. POJ 2184 DP

    思路: f[j]表示当ts的和为j的时候tf的最大值. 这时候要分情况讨论: (我把状态平移了101000) 若ts[i]>=0倒序循环 否则正序 (防止ts被用了多次) f[101000]=0 ...

  9. IDEA模板设置

    /**   * @className: $CLASSNAME$   * @author: liuyachao   * @date: $DATE$ $TIME$ */ ================= ...

  10. HDU 1556 Color the ball【树状数组】

    题意:给出n个区间,每次给这个区间里面的数加1,询问单点的值 一维的区间更新,单点查询,还是那篇论文里面讲了的 #include<iostream> #include<cstdio& ...