rr.css

@charset "utf-8";

.RR_visi {

display: block;

}

.RR_hidd {

display: none;

}

.RR_mask_body {

overflow: hidden;

margin: 0 auto;

}

.RR_mask_main {

height: 100%;

width: 100%;

z-index: 99;

overflow: scroll;

position: fixed;

top: 0;

left: 0;

}

.RR_mask_obj {

display: block;

margin: 0 auto;

}

.RR_page_cA {

background-color: rgb(0, 222, 202);

}

.RR_toTop_visi {

position: fixed;

display: block;

animation: toTop 0.7s forwards;

-webkit-animation: toTop 0.7s forwards;

-moz-animation: toTop 0.7s forwards;

-ms-animation: toTop 0.7s forwards;

}

@keyframes toTop {

0% {

border-radius: 0;

}

25% {

border-radius: 7px;

}

50% {

border-radius: 14px;

}

75% {

border-radius: 21px;

}

100% {

border-radius: 28px;

}

}

@-webkit-keyframes toTop {

0% {

border-radius: 0;

}

25% {

border-radius: 7px;

}

50% {

border-radius: 14px;

}

75% {

border-radius: 21px;

}

100% {

border-radius: 28px;

}

}

@-moz-keyframes toTop {

0% {

border-radius: 0;

}

25% {

border-radius: 7px;

}

50% {

border-radius: 14px;

}

75% {

border-radius: 21px;

}

100% {

border-radius: 28px;

}

}

}

@-ms-keyframes toTop {

0% {

border-radius: 0;

}

25% {

border-radius: 7px;

}

50% {

border-radius: 14px;

}

75% {

border-radius: 21px;

}

100% {

border-radius: 28px;

}

}

.RR_toTop_hidd {

position: fixed;

display: none;

}

.RR_ani_10 {

animation: RR_ani_11 0.7s;

-moz-animation: RR_ani_11 0.7s;

-ms-animation: RR_ani_11 0.7s;

-webkit-animation: RR_ani_11 0.7s;

}

@keyframes RR_ani_11 {

from {

border-radius: 20px;

transform: rotateY(0deg);

}

to {

border-radius: 0px;

transform: rotateY(360deg);

}

}

@-moz-keyframes RR_ani_11 {

from {

border-radius: 20px;

-moz-transform: rotateY(0deg);

}

to {

border-radius: 0px;

-moz-transform: rotateY(360deg);

}

}

@-ms-keyframes RR_ani_11 {

from {

border-radius: 20px;

-ms-transform: rotateY(0deg);

}

to {

border-radius: 0px;

-ms-transform: rotateY(360deg);

}

}

@-webkit-keyframes RR_ani_11 {

from {

border-radius: 20px;

-webkit-transform: rotateY(0deg);

}

to {

border-radius: 0px;

-webkit-transform: rotateY(360deg);

}

}

.RR_ani_20 {

animation: RR_ani_21 0.7s;

-moz-animation: RR_ani_21 0.7s;

-ms-animation: RR_ani_21 0.7s;

-webkit-animation: RR_ani_21 0.7s;

}

@keyframes RR_ani_21 {

from {

opacity: 0.6;

border-radius: 20px;

transform: skewX(0deg);

}

to {

opacity: 1;

border-radius: 0px;

transform: skewX(180deg);

}

}

@-moz-keyframes RR_ani_21 {

from {

opacity: 0.6;

border-radius: 20px;

-moz-transform: skewX(0deg);

}

to {

opacity: 1;

border-radius: 0px;

-moz-transform: skewX(180deg);

}

}

@-ms-keyframes RR_ani_21 {

from {

opacity: 0.6;

border-radius: 20px;

-ms-transform: skewX(0deg);

}

to {

opacity: 1;

border-radius: 0px;

-ms-transform: skewX(180deg);

}

}

@-webkit-keyframes RR_ani_21 {

from {

opacity: 0.6;

border-radius: 20px;

-webkit-transform: skewX(0deg);

}

to {

opacity: 1;

border-radius: 0px;

-webkit-transform: skewX(180deg);

}

}

.RR_ani_30 {

animation: RR_ani_31 0.7s;

-moz-animation: RR_ani_31 0.7s;

-ms-animation: RR_ani_31 0.7s;

-webkit-animation: RR_ani_31 0.7s;

}

@keyframes RR_ani_31 {

0% {

width: 110%;

margin-left: 30px;

}

25% {

width: 130%;

border-radius: 5px;

}

50% {

width: 110%;

border-radius: 10px;

}

75 {

width: 90%;

margin-left: -10px;

border-radius: 5px;

}

100% {

margin-left: 0px;

width: 100%;

border-radius: 0px;

}

}

@-moz-keyframes RR_ani_31 {

0% {

width: 110%;

margin-left: 30px;

}

25% {

width: 130%;

border-radius: 5px;

}

50% {

width: 110%;

border-radius: 10px;

}

75 {

width: 90%;

margin-left: -10px;

border-radius: 5px;

}

100% {

margin-left: 0px;

width: 100%;

border-radius: 0px;

}

}

@-ms-keyframes RR_ani_31 {

0% {

width: 110%;

margin-left: 30px;

}

25% {

width: 130%;

border-radius: 5px;

}

50% {

width: 110%;

border-radius: 10px;

}

75 {

width: 90%;

margin-left: -10px;

border-radius: 5px;

}

100% {

margin-left: 0px;

width: 100%;

border-radius: 0px;

}

}

@-webkit-keyframes RR_ani_31 {

0% {

width: 110%;

margin-left: 30px;

}

25% {

width: 130%;

border-radius: 5px;

}

50% {

width: 110%;

border-radius: 10px;

}

75 {

width: 90%;

margin-left: -10px;

border-radius: 5px;

}

100% {

margin-left: 0px;

width: 100%;

border-radius: 0px;

}

}

.RR_ani_40 {

animation: RR_ani_41 0.7s;

-moz-animation: RR_ani_41 0.7s;

-ms-animation: RR_ani_41 0.7s;

-webkit-animation: RR_ani_41 0.7s;

}

@keyframes RR_ani_41 {

0% {

transform: skewX(20deg);

transform: skewY(20deg);

border-radius: 10px;

}

25% {

transform: skewX(40deg);

transform: skewY(40deg);

border-radius: 20px;

}

50% {

transform: skewX(15deg);

transform: skewY(15deg);

border-radius: 15px;

}

75% {

transform: skewX(-10deg);

transform: skewY(-10deg);

border-radius: 10px;

}

100% {

transform: skewX(0deg);

transform: skewY(0deg);

border-radius: 0px;

}

}

@-moz-keyframes RR_ani_41 {

0% {

-moz-transform: skewX(20deg);

-moz-transform: skewY(20deg);

border-radius: 10px;

}

25% {

-moz-transform: skewX(40deg);

-moz-transform: skewY(40deg);

border-radius: 20px;

}

50% {

-moz-transform: skewX(15deg);

-moz-transform: skewY(15deg);

border-radius: 15px;

}

75% {

-moz-transform: skewX(-10deg);

-moz-transform: skewY(-10deg);

border-radius: 10px;

}

100% {

-moz-transform: skewX(0deg);

-moz-transform: skewY(0deg);

border-radius: 0px;

}

}

@-ms-keyframes RR_ani_41 {

0% {

-ms-transform: skewX(20deg);

-ms-transform: skewY(20deg);

border-radius: 10px;

}

25% {

-ms-transform: skewX(40deg);

-ms-transform: skewY(40deg);

border-radius: 20px;

}

50% {

-ms-transform: skewX(15deg);

-ms-transform: skewY(15deg);

border-radius: 15px;

}

75% {

-ms-transform: skewX(-10deg);

-ms-transform: skewY(-10deg);

border-radius: 10px;

}

100% {

-ms-transform: skewX(0deg);

-ms-transform: skewY(0deg);

border-radius: 0px;

}

}

@-webkit-keyframes RR_ani_41 {

0% {

-webkit-transform: skewX(20deg);

-webkit-transform: skewY(20deg);

border-radius: 10px;

}

25% {

-webkit-transform: skewX(40deg);

-webkit-transform: skewY(40deg);

border-radius: 20px;

}

50% {

-webkit-transform: skewX(15deg);

-webkit-: skewY(15deg);

border-radius: 15px;

}

75% {

-webkit-transform: skewX(-10deg);

-webkit-transform: skewY(-10deg);

border-radius: 10px;

}

100% {

-webkit-transform: skewX(0deg);

-webkit-transform: skewY(0deg);

border-radius: 0px;

}

}

.RR_ani_50 {

animation: RR_ani_51 0.7s;

-moz-animation: RR_ani_51 0.7s;

-ms-animation: RR_ani_51 0.7s;

-webkit-animation: RR_ani_51 0.7s;

}

@keyframes RR_ani_51 {

0% {

transform: scaleY(0.1);

transform: rotateZ(40deg);

}

25% {

transform: scaleY(0.4);

transform: rotateZ(70deg);

}

50% {

transform: scaleY(0.7);

transform: rotateZ(30deg);

}

75% {

transform: scaleY(1.1);

transform: rotateZ(-10deg);

}

100% {

transform: scaleY(1);

transform: rotateZ(0deg);

}

}

@-moz-keyframes RR_ani_51 {

0% {

-moz-transform: scaleY(0.1);

-moz-transform: rotateZ(40deg);

}

25% {

-moz-transform: scaleY(0.4);

-moz-transform: rotateZ(70deg);

}

50% {

-moz-transform: scaleY(0.7);

-moz-transform: rotateZ(30deg);

}

75% {

-moz-transform: scaleY(1.1);

-moz-transform: rotateZ(-10deg);

}

100% {

-moz-transform: scaleY(1);

-moz-transform: rotateZ(0deg);

}

}

@-ms-keyframes RR_ani_51 {

0% {

-ms-transform: scaleY(0.1);

-ms-transform: rotateZ(40deg);

}

25% {

-ms-transform: scaleY(0.4);

-ms-transform: rotateZ(70deg);

}

50% {

-ms-transform: scaleY(0.7);

-ms-transform: rotateZ(30deg);

}

75% {

-ms-transform: scaleY(1.1);

-ms-transform: rotateZ(-10deg);

}

100% {

-ms-transform: scaleY(1);

-ms-transform: rotateZ(0deg);

}

}

@-webkit-keyframes RR_ani_51 {

0% {

-webkit-transform: scaleY(0.1);

-webkit-transform: rotateZ(40deg);

}

25% {

-webkit-transform: scaleY(0.4);

-webkit-transform: rotateZ(70deg);

}

50% {

-webkit-transform: scaleY(0.7);

-webkit-transform: rotateZ(30deg);

}

75% {

-webkit-transform: scaleY(1.1);

-webkit-transform: rotateZ(-10deg);

}

100% {

-webkit-transform: scaleY(1);

-webkit-transform: rotateZ(0deg);

}

}

.RR_ani_60 {

animation: RR_ani_61 0.7s;

-moz-animation: RR_ani_61 0.7s;

-ms-animation: RR_ani_61 0.7s;

-webkit-animation: RR_ani_61 0.7s;

}

@keyframes RR_ani_61 {

0% {

-webkit-filter: blur(3px);

-moz-filter: blur(3px);

-o-filter: blur(3px);

-ms-filter: blur(3px);

filter: blur(3px);

}

25% {} 50% {

-webkit-filter: blur(30px);

-moz-filter: blur(30px);

-o-filter: blur(30px);

-ms-filter: blur(30px);

filter: blur(30px);

}

75% {}100% {

-webkit-filter: blur(0px);

-moz-filter: blur(0px);

-o-filter: blur(0px);

-ms-filter: blur(0px);

filter: blur(0px);

}

}

@-moz-keyframes RR_ani_61 {

0% {

-webkit-filter: blur(3px);

-moz-filter: blur(3px);

-o-filter: blur(3px);

-ms-filter: blur(3px);

filter: blur(3px);

}

25% {} 50% {

-webkit-filter: blur(30px);

-moz-filter: blur(30px);

-o-filter: blur(30px);

-ms-filter: blur(30px);

filter: blur(30px);

}

75% {}100% {

-webkit-filter: blur(0px);

-moz-filter: blur(0px);

-o-filter: blur(0px);

-ms-filter: blur(0px);

filter: blur(0px);

}

}

@-ms-keyframes RR_ani_61 {

0% {

-webkit-filter: blur(3px);

-moz-filter: blur(3px);

-o-filter: blur(3px);

-ms-filter: blur(3px);

filter: blur(3px);

}

25% {} 50% {

-webkit-filter: blur(30px);

-moz-filter: blur(30px);

-o-filter: blur(30px);

-ms-filter: blur(30px);

filter: blur(30px);

}

75% {}100% {

-webkit-filter: blur(0px);

-moz-filter: blur(0px);

-o-filter: blur(0px);

-ms-filter: blur(0px);

filter: blur(0px);

}

}

@-webkit-keyframes RR_ani_61 {

0% {

-webkit-filter: blur(3px);

-moz-filter: blur(3px);

-o-filter: blur(3px);

-ms-filter: blur(3px);

filter: blur(3px);

}

25% {} 50% {

-webkit-filter: blur(30px);

-moz-filter: blur(30px);

-o-filter: blur(30px);

-ms-filter: blur(30px);

filter: blur(30px);

}

75% {}100% {

-webkit-filter: blur(0px);

-moz-filter: blur(0px);

-o-filter: blur(0px);

-ms-filter: blur(0px);

filter: blur(0px);

}

}

.RR_ani_70 {

animation: RR_ani_71 0.7s;

-moz-animation: RR_ani_71 0.7s;

-ms-animation: RR_ani_71 0.7s;

-webkit-animation: RR_ani_71 0.7s;

}

@keyframes RR_ani_71 {

0% {

transform: skewX(-10deg);

transform: scaleY(1.1);

border-radius: 10px;

}

25% {

transform: skewX(10deg);

transform: scaleY(1.4);

border-radius: 20px;

}

50% {

transform: skewX(30deg);

transform: scaleY(1.1);

border-radius: 15px;

}

75% {

transform: skewX(10deg);

transform: scaleY(0.9);

border-radius: 10px;

}

100% {

transform: skewX(0deg);

transform: scaleY(1);

border-radius: 0px;

}

}

@-ms-keyframes RR_ani_71 {

0% {

-ms-transform: rotateX(-10deg);

-ms-transform: scaleY(1.1);

border-radius: 10px;

}

25% {

-ms-transform: rotateX(10deg);

-ms-transform: scaleY(1.4);

border-radius: 20px;

}

50% {

-ms-transform: rotateX(30deg);

-ms-transform: scale(1.1);

border-radius: 15px;

}

75% {

-ms-transform: rotateX(10deg);

-ms-transform: scaleY(0.9);

border-radius: 10px;

}

100% {

-ms-transform: rotateX(0deg);

-ms-transform: scaleY(1);

border-radius: 0px;

}

}

@-moz-keyframes RR_ani_71 {

0% {

-moz-transform: rotateX(-10deg);

-moz-transform: scaleY(1.1);

border-radius: 10px;

}

25% {

-moz-transform: rotateX(10deg);

-moz-transform: scaleY(1.4);

border-radius: 20px;

}

50% {

-moz-transform: rotateX(30deg);

-moz-transform: scaleY(1.1);

border-radius: 15px;

}

75% {

-moz-transform: rotateX(10deg);

-moz-transform: scaleY(0.9);

border-radius: 10px;

}

100% {

-moz-transform: rotateX(0deg);

-moz-transform: scaleY(1);

border-radius: 0px;

}

}

@-webkit-keyframes RR_ani_71 {

0% {

-webkit-transform: rotateX(-10deg);

-webkit-transform: scaleY(1.1);

border-radius: 10px;

}

25% {

-webkit-transform: rotateX(10deg);

-webkit-transform: scaleY(1.4);

border-radius: 20px;

}

50% {

-webkit-transform: rotateX(30deg);

-webkit-transform: scaleY(1.1);

border-radius: 15px;

}

75% {

-webkit-transform: rotateX(10deg);

-webkit-transform: scaleY(0.9);

border-radius: 10px;

}

100% {

-webkit-transform: rotateX0deg);

-webkit-transform: scaleY(1);

border-radius: 0px;

}

}

时间： 2024-11-10 15:22:10

rr.css的相关文章

lib

/*** ** * author : gp mail : [email protected] date : 2015-06-03 version : 1.1.3 TODO : 5 usedNotFor : louxia100 frame  : double-deck with : rr.css ; RR_***.js , RR_***.html(by extended) closure : 2*2 (top->pub&pri ; bot->pub&pri ; Global-&g

[css]《css揭秘》学习笔记（一）

一.background-clip属性 1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>背景与边框1</title> 5 <style type="text/css"> 6 body{ 7 background: url('http://csssecrets.io/images/stone-art.jpg'); 8 } 9 div{ 10

CSS语法与用法小字典

前言:这是上学时期对CSS学习的整理,一直没见过光,由于不是专门做前端开发的,难免写不到重点,但对于看懂CSS,和掌握一些基本的用法,熟悉里面的门路还是大有裨益的.由于是从word中贴过来的,排版和格式都稍差些.方便日后自己查阅,方便自己同时也方便他人,多好的一件事啊,呵呵! CSS目录 一.       CSS简介... 4 1.    CSS的分类... 4 1.1      内嵌样式... 4 1.2      内部样式表... 4 1.3      外部样式表... 4 2.    样式

CSS基本选择器

(1)css有多种简单的选择器,这里先介绍最简单的版本 如下图代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .class1{font-size: 40px} /*这是修饰class的,下面是修饰id的,id的值必须是全局第一的*/ #ppp2

Web前端开发规范【HTML/JavaScript/CSS】

前言 这是一份旨在增强团队的开发协作,提高代码质量和打造开发基石的编码风格规范,其中包含了 HTML, JavaScript 和 CSS/SCSS 这几个部分.我们知道,当一个团队开始指定并实行编码规范的话,错误就会变得更加显而易见.如果一段特定的代码不符合规范的话,它有可能只是代码风格错误,而也有可能会是 bug.早期指定规范就使得代码审核得以更好的开展,并且可以更精确的地定位到错误.只要开发者们能够保证源代码源文件都严格遵循规范,那接下去所使用的混淆.压缩和编译工具则可投其所好不尽相同. 要

熟悉css/css3颜色属性

原文:熟悉css/css3颜色属性 颜色属性无处不在.字体要用颜色,背景可以有颜色,粒子特效更是离不开颜色.本文参考了一些资料简单总结下以备日后查阅. css中颜色的定义方式: 十六进制色 RGB & RGBA HSL & HSLA 颜色名 十六进制色 个人最喜欢的一种颜色表达方式. 十六进制颜色是这样规定的:#RRGGBB,其中的RR(红色).GG(绿色).BB(蓝色)十六进制整数规定了颜色的成分.所有值必须介于 0 与 FF 之间. 生成随机颜色: function getRandom

CSS 滤镜 转

基本滤镜--可直接作用在对象上,并立即生效,主要有: 1).alpha--通道 2).blur--模糊 3)MotionBlur--移动模糊 4)Chroma--透明色 5)Drop Shadow--下落阴影 6)Flip--对称变换 7)Glow--光晕 8)GrayScale--灰度 9)Invert--反色 10)Mask--遮罩 11)Shadow--阴影 12)X-ray--X光效果 13)Emboss or Engrave--浮雕 14)Wave--波浪 高级滤镜--需配合JS等脚本

【CSS进阶】CSS 颜色体系详解

说到 CSS 颜色,相比大家都不会陌生,本文是我个人对 CSS 颜色体系的一个系统总结与学习,分享给大家. 先用一张图直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容. 接下来的行文内容大概会按照这个顺序进行,内容十分基础,可选择性跳到相应内容处阅读. 色彩关键字 嗯,色彩关键字很好理解.它表示一个具体的颜色值,且它不区分大小写.譬如这样 color:red 的 red 即是一个色彩关键字. 在 CSS3 之前,也就是 CSS 标准 2,一共包含了 17 个基本颜色,分别是: 而到了 CSS

第十六天学习：CSS特性之文本格式化

关键字:文本格式化 学习计划: 文本格式化 color特性 text-align特性 vertical-align特性 text-decoraton特性 text-indent特性 text-shadow特性 text-transform特性 letter-spacing特性 word-spacing特性 white-space特性 direction特性 unicode-bid特性 学习记录: color特性 用于指定文本的颜色,这个属性设置了一个元素的前景色(在HTML表现中,就是文本的颜色