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. Android中Handler原理

    Handler主要是主线程和子线程通信.一般子线程中做一些耗时操作做完之后通知主线程来改动UI. 实际上android系统在Activity启动或者状态变化等都是通过Handler机制实现的. 首先进 ...

  2. How to resolve unassigned shards in Elasticsearch——写得非常好

    How to resolve unassigned shards in Elasticsearch 转自:https://www.datadoghq.com/blog/elasticsearch-un ...

  3. 手动配置IP网络

    1. #vi /etc/sysconfig/network-scripts/ifcfg-ens33 ifcfg-ens33 是网卡的名字,根据自己的计算机 2. 修改配置 ONBOOT=no改为ONB ...

  4. VSCode向上的代码提示消除

    VSCode虽然好用, 但是有些用户体验实在非常差, 比如这种往上面弹的类型提示... 在用户设置中增加: "editor.parameterHints": false

  5. Sublime Text 3 注册码 激活码 版本号 Build 3143

    —– BEGIN LICENSE —– TwitterInc 200 User License EA7E-890007 1D77F72E 390CDD93 4DCBA022 FAF60790 61AA ...

  6. shell基础编程

    首先要注意的是,Ubuntu里的shell的sh和bash命令是有区别的 如下所示,Ubuntu下的sh指向的dash程序,而bash是dash的增强版,一些bash上能执行的程序在dash上不行 如 ...

  7. 重设数据文件大小sql语句

    set verify off column file_name format a50 word_wrapped column smallest format 999,990 heading " ...

  8. swift内存管理

    为了解决引用循环的问题. However, with ARC, values are deallocated as soon as their last strong reference is rem ...

  9. Calling convention-调用约定

    In computer science, a calling convention is an implementation-level (low-level) scheme for how subr ...

  10. Matplotlib 画廊

    https://matplotlib.org/gallery.html