动画

最新推荐文章于 2024-10-29 02:42:00 发布

Vivian_shuang

最新推荐文章于 2024-10-29 02:42:00 发布

阅读量340

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签：动画倒影文本阴影渐变

本文链接：https://blog.youkuaiyun.com/Vivian_shuang/article/details/51842837

CSS 专栏收录该内容

21 篇文章

订阅专栏

倒影：-webkit-box-reflect:right 10px -webkit-linear-gradient(top ,rgba(0,0,0,0.2) 20%,rgba(0,0,0,0.6));

text-shadow：text-shadow:-5px -5px 5px purple,0 0 5px purple,0 0 10px red,0 5px 10px purple, 5px 5px 10px red,5px 5px 15px purple;

径向渐变：background-image: -webkit-radial-gradient( left top,white 35%,#FF1690,#FF4DE9,#FFABF8,#F4B8FB);

线性渐变：background-image: -webkit-linear-gradient(top right,red,yellow 30%,deepskyblue,pink ,green,orange);

动画：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/* 动画声明和定义 */

/*@-webkit-keyframes move{*/

/* 从。。。*/

/*from{

-webkit-transform: translateX(0px);

-ms-transform: translateX(0px);

-o-transform: translateX(0px);

transform: translateX(0px);

}

50%{

-webkit-transform: translateY(100px);

-ms-transform: translateY(100px);

-o-transform: translateY(100px);

transform: translateY(100px);

}*/

/* 到。。。 */

/*to{

-webkit-transform: translateX(200px);

-ms-transform: translateX(200px);

-o-transform: translateX(200px);

transform: translateX(200px);

}

}*/

@-webkit-keyframes move1{

from{

webkit-transform: translateZ(2000px);

-ms-transform: translateZ(2000px);

-o-transform: translateZ(2000px);

transform: translateZ(2000px);

}

to{

webkit-transform: translateZ(0px);

-ms-transform: translateZ(0px);

-o-transform: translateZ(0px);

transform: translateZ(0px);

}

html, body{

height: 100%;

}

body{

perspective: 1000px;

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

-ms-transform-style: preserve-3d;

transform-style: preserve-3d;

}

div{

width: 200px;

height: 200px;

background-color: #ccc;

/* animation 动画 */

/* animn */

-webkit-animation-name: "move1";

-o-animation-name: "move1";

animation-name: "move1";

/*andur */

/*设置动画的运动时间 */

-webkit-animation-duration: 1s;

-o-animation-duration: 1s;

animation-duration: 1s;

/* 设置动画的运动次数 */

/* aici */

/* infinite 无限次数 */

-webkit-animation-iteration-count: infinite;

-o-animation-iteration-count: infinite;

animation-iteration-count:infinite ;

/* 运动效果 */

/* antf */

-webkit-animation-timing-function: linear;

-o-animation-timing-function: linear;

animation-timing-function: linear;

/* 运动方向和轨迹 */

/* andir */

/* reverse 相反方向 alternate 往返运动 normal 正常方向 */

/* 当设置往返运动时，返回时的运动占用运动次数 */

-webkit-animation-direction: normal;

-o-animation-direction: normal;

animation-direction: normal;

/* 动画运动状态 */

/* anps */

/* paused 暂停 running 运动 */

-webkit-animation-play-state: running;

-o-animation-play-state: running;

animation-play-state: running;

/* 运动停留状态 */

/* afm */

/* both forwards 停留在结束的位置 backwards 返回到初始位置 */

-webkit-animation-fill-mode: forwards;

-o-animation-fill-mode: forwards;

animation-fill-mode: forwards;

/* delay 延迟 */

/* and */

/*-webkit-animation-delay: 1s;

-o-animation-delay: 1s;

animation-delay: 1s;*/

/* 复合写法 */

/* ani */

/* 1.名称 2.运动时间 3.运动方式 4.运动次数 5.延迟 */

/*-webkit-animation:"move" 1s ease 5 1s ;

-o-animation:"move" 1s ease 5 1s ;

animation:"move" 1s ease 5 1s ;*/

}

</style>

</head>

<body>

</body>

</html>