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. 第十五章，读取txt文件（C++）

    #include <iostream> #include <fstream> int main(int argc, char** argv) { std::ifstream i ...

  2. 【BUG】android.content.res.Resources$NotFoundException: File res/drawable-xxhdpi/toolbar_line.png from

    SafeGod在coolpad(4.0)上执行.登陆进去的设备列表界面遇到的问题.三星和索尼没有这个问题. 06-24 15:23:06.897: E/AndroidRuntime(12655): F ...

  3. node之版本号升级和管理

    如今非常多人预计和我一样项目中已经開始应用起nodeJS,而伴随着项目的需求,对nodejs版本号也有着各种需求.好了直接进入主题,如今node版本号管理网上有非常多方式.这里说两种: 第一种modu ...

  4. 最全Pycharm教程（29）——再探IDE，速成手冊

    1.准备工作 (1)确认安装了Python解释器,版本号2.4到3.4均可. (2)注意Pycharm有两个公布版本号:社区版和专业版,详见 Edition Comparison Matrix 2.初 ...

  5. node12---mongodb

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

  6. JAVA设计模式之【建造者模式】

    建造者模式 建造者模式为客户端返回的不是一个简单的产品,而是一个由多个部件组成的复杂产品 角色 Builder抽象建造者 buildPartX getResult ConcreteBuilder具体建 ...

  7. mysql表空间传输(ERROR 1808) row_format设置

    文章结构如下: 从MYSQL5.6版本开始,引入了传输表空间这个功能,可以把一张表从一个数据库移到另一个数据库或者机器上.迁移的时候很方便,尤其是大表. 由于本次达到测试使用版本5.6.38传到5.7 ...

  8. ApacheFlink简介

    对无界数据集的连续处理 在我们详细介绍Flink之前,让我们从更高的层面上回顾处理数据时可能遇到的数据集的类型以及您可以选择处理的执行模型的类型.这两个想法经常被混淆,清楚地区分它们是有用的. 首先, ...

  9. webpack JS 源文件

    blob:https://www.xiaogezi.cn/49602f64-ee4a-4b4a-b0cf-c21aa3335614 /******/ (function(modules) { // w ...

  10. ES6 | 关于class类 继承总结

    子类必须在constructor方法中调用super方法,否则新建实例时会报错.这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工.如果不调用super方法,子类就得不到 ...