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. iptables 防火墙 只允许某IP访问某端口、访问特定网站

    iptables 防火墙 只允许某IP访问某端口.访问特定网站 1.先备份iptables /var/tmp 需要开80端口,指定IP和局域网 下面三行的意思: 先关闭所有的80端口 开启ip段192 ...

  2. CCS+C6678LE开发记录11:多核协作(IPC)入门

    为更好地发挥C6678的多核性能,需要用到多核协作.幸运的是,我们可以使用官方提供的IPC模块. IPC=Inter-Processor Communication, 核间通信,粗略来说就是多核之间进 ...

  3. STM8S103-STVD建立汇编代码项目

    转载:http://blog.csdn.net/u010093140/article/details/49983397 STVD本来就比较少人用,STVD汇编就更少人用了,不过STM8汇编我自己还是满 ...

  4. SpringCloud学习笔记（10）----Spring Cloud Netflix之声明式 REST客户端 -Feign的高级特性

    1. Feign的默认配置 Feign 的默认配置 Spring Cloud Netflix 提供的默认实现类:FeignClientsConfiguration 解码器:Decoder feignD ...

  5. Dapper基础知识一

    在下刚毕业工作,之前实习有用到Dapper?这几天新项目想用上Dapper,在下比较菜鸟,这块只是个人对Dapper的一种总结. 1,什么是Dapper?     Dapper,.NET下的一种ORM ...

  6. Node_进阶_4

    Node进阶第四天 一.传统数据库技术回顾 数据库就是存储数据的,那么存储数据用txt就行了啊,为什么要有数据库? 理由之一:数据库有行.列的概念,数据有关系,数据不是散的. 老牌数据库,比如Mysq ...

  7. （2016北京集训十四）【xsy1556】股神小D - LCT

    题解: 题解居然是LCT……受教了 把所有区间按照端点排序,动态维护目前有重叠的区间,用LCT维护即可. 代码: #include<algorithm> #include<iostr ...

  8. MFC基础知识

    1.句柄:具有内存后,系统返回的标识符 2.消息:相当于事件,例如鼠标点击就是一个消息 3.消息队列:就是将事件按照时间的先后顺序在一个队列中 4.消息处理机制:首先操作系统拿到消息,然后将消息放到消 ...

  9. Ibatis使用技巧

    一.在ibatis中以Map形式返回查询结果 1.在ibatis的配置文件中配置以HashMap返回的resultMap <resultMap id="MAX_MIN_ID_RESUL ...

  10. Centos7 安装 opencv

      Centos7 安装 opencv CentOS Linux release 7.2.1511 (Core)   1.安装依赖     yum install https://dl.fedorap ...