css transition动画效果案例

来源：互联网发布：小葫芦数据检测作假编辑：程序博客网时间：2024/04/26 13:28

html块：

<html>
<head>
<meta charset="utf-8" />
<title>css动画demo</title>
<link href="css/css-transition.css" rel="stylesheet" type="text/css"/>
<script src="script/Calendar.js" type="text/javascript"></script>
<script src="script/jquery-1.11.2.min.js" type="text/javascript"></script>
</head>
<body>

<h3>1.上标sup 与下标sub</h3>
sub：A<SUB>11</SUB> A<SUB>12</SUB> ...A<SUB>1n</SUB><br><br>
sup：a<SUP>2</SUP> + b<sup>2</sup> = c<sup>2</sup><br><br>


<h3>2.1 transition过度</h3>
<div class="div-transition"><a class="a-transition">transition过度，请将鼠标放上去</a></div>
<p>2.2：选择效果</p>
<div class="div-transition-2">
<ul>
<li><i>tran</i><em>transition过度</em></li>
<li><i>tran</i><em>transition过度</em></li>
<li><i>tran</i><em>transition过度</em></li>
<li><i>tran</i><em>transition过度</em></li>
</ul>
</div>


<p>2.3：旋转效果</p>
<div class="div-tran"><i class="star-five"></i></div>
<p>2.4：跳动效果</p>
<div class="div-tran-2"><i class="star-five"></i></div>


<h3>3.1 before使用案例-1 鼠标经过效果</h3>
<div class="before">
<a><img src="images/f_t_1.jpg" alt=""/></a>
</div>

<p>3.2：before使用案例-2 模拟时钟效果</p>
<div class="before-clock">
<div class="clock-round">
<div class="clockwise"></div>
<div class="minute"></div>
<div class="second"></div>
</div>
</div>

<p>3.3 transition before after 使用案例-1 鼠标经过效果</p>
<div class="before-after-transition">
<a data-property="transform" data-from="scale(1)" data-to="scale(2)" id="transform/2" href="#transform/2"
title="transform from scale(1) to scale(2)"></a>
</div>


<h3>4.1 日历插件</h3>
<div class="time_2">
<script language="javascript">
var cdr = new Calendar("cdr");
document.write(cdr);
cdr.showMoreDay = true;
</script>
<input onFocus="cdr.show(this);" type="text" class="w70 time" name="stime" value="" />
到
<input onFocus="cdr.show(this);" type="text" class="w70 time" name="etime" value="" />
</div>

<h3>6.1 text-shadow - 火焰文字 </h3>
<div id="text-shadow-1"><p>FIRE TEXT</p></div>
<p>6.2 text-shadow - 霓虹文字效果</p>
<div id="text-shadow-2"><p>NEON TEXT</p></div>


<h3>7.1 animation - 有点粗糙的光影划过文字效果 </h3>
<div id="animation"><p>有点粗糙的光影划过文字效果</p></div>


<h3>8.1 兼容大部分浏览器的背景透明内容不透明效果 </h3>
<article id="content">
<h1 class="title">CSS3 opacity:</h1>
<div id="opacity">这是一个在所有主流浏览器下都可以看到的背景透明，内容不透明的效果</div>
<div class="mask"></div>
<div class="text">将内容和背景分别放到不同的层，然后将背景设置成透明，两者就互不相关了</div>
</article>
</body>
</html>

css 模块：

h3{font-family: "宋体";font-weight: bold;color: #002BFF;}
li{list-style: none;}

/*div-transition*/
.div-transition{width: 400px;text-align: center;height: 40px;}
.a-transition{ width: 250px;height: 50px;text-align: center;transition: all 0.5s ease;line-height: 40px;color: rgba(0, 0, 0, 0.8);border: 1px solid rgba(0,0,0,0);}
.a-transition:hover{border-color: rgba(234, 13, 13, 1); padding: 8px 40px;}

/*div-transition-2*/
.div-transition-2{}
.div-transition-2 ul{padding: 0;}
.div-transition-2 ul li{text-align: center;width: 50px;height: 50px;padding: 0;background: #1B1B1B;margin-top: 2px;border-radius: 8px;position: relative;}
.div-transition-2 ul li i{color: #fff;font-size: 21px;line-height: 49px;}
.div-transition-2 ul li em{display: block;position: relative;width: 0;font-weight: bold; height: 50px;border-radius: 0 8px 8px 0;top: -49px;z-index: -1;line-height: 44px;transition: all 0.3s;right: -9px;background-color: #da0000;color: #fff;}
.div-transition-2 ul li:hover em{display: block; background-color: #1B1B1B;left: 41px;background: #f00;width: 200px;}
.div-transition-2 ul li:hover {background: #f00;}

/*----div-tran----*/
.div-tran{width: 50px;height: 50px;background: #000;}
.star-five {position: relative;display: block;color: white;width: 0px;height: 0px;top: 18px;left: 13px;border-right: 10px solid transparent;border-bottom: 7px solid white;border-left: 10px solid transparent;-moz-transform:rotate(35deg);-webkit-transform: rotate(35deg);-ms-transform:rotate(35deg);-o-transform:rotate(35deg);transform: rotate(35deg);transition: all 1s;}
.star-five:before {border-bottom: 8px solid white;border-left: 3px solid transparent;border-right: 3px solid transparent;position: absolute;height: 0;width: 0;top: -5px;left: -6px;display: block;content: '';-webkit-transform: rotate(-35deg);-moz-transform:rotate(-35deg);-ms-transform:rotate(-35deg);-o-transform:rotate(-35deg);}
.star-five:after {position: absolute;display: block;color: white;/* top: 3px; */left: -10px;width: 0px;height: 0px;border-right: 10px solid transparent;border-bottom: 7px solid white;border-left: 10px solid transparent;-webkit-transform: rotate(-70deg);-moz-transform:rotate(-70deg);-ms-transform:rotate(-70deg);-o-transform:rotate(-70deg);content: '';}
.div-tran:hover .star-five{transform: rotate(450deg);transition: all 1s;}

/*----div-tran----*/
.div-tran-2{width: 50px;height: 50px;background: #000;}
.star-five {position: relative;display: block;color: white;width: 0px;height: 0px;top: 18px;left: 13px;border-right: 10px solid transparent;border-bottom: 7px solid white;border-left: 10px solid transparent;-moz-transform:rotate(35deg);-webkit-transform: rotate(35deg);-ms-transform:rotate(35deg);-o-transform:rotate(35deg);transform: rotate(35deg);transition: all 1s;}
.star-five:before {border-bottom: 8px solid white;border-left: 3px solid transparent;border-right: 3px solid transparent;position: absolute;height: 0;width: 0;top: -5px;left: -6px;display: block;content: '';-webkit-transform: rotate(-35deg);-moz-transform:rotate(-35deg);-ms-transform:rotate(-35deg);-o-transform:rotate(-35deg);}
.star-five:after {position: absolute;display: block;color: white;/* top: 3px; */left: -10px;width: 0px;height: 0px;border-right: 10px solid transparent;border-bottom: 7px solid white;border-left: 10px solid transparent;-webkit-transform: rotate(-70deg);-moz-transform:rotate(-70deg);-ms-transform:rotate(-70deg);-o-transform:rotate(-70deg);content: '';}
.div-tran-2:hover .star-five{animation:jump-up-down 0.4s;}
@keyframes jump-up-down{
0% {top:15px;}
25% {top:24px;}
50% {top:8px;}
100% {top:15px;}
}
@-moz-keyframes jump-up-down{ /* Firefox */
0% {top:15px;}
25% {top:24px;}
50% {top:8px;}
100% {top:15px;}
}
@-webkit-keyframes jump-up-down{ /* Safari 和 Chrome */
0% {top:15px;}
25% {top:24px;}
50% {top:8px;}
100% {top:15px;}
}
@-o-keyframes jump-up-down{ /* Opera */
0% {top:15px;}
25% {top:24px;}
50% {top:8px;}
100% {top:15px;}
}

/*---------3.1 before------*/
.before{position: relative;width: 400px;height: 400px;margin-left: 100px;}
.before a{width: 400px;height: 400px;}
.before a img{width: 400px;height: 400px;}
.before a:before{content: "";display: block;width: 100px;height: 399px;position: absolute;overflow: hidden;background: -webkit-linear-gradient(left,rgba(16, 16, 16, 0)0,rgba(255,255,255,.2)50%,rgba(27, 27, 27, 0)100%);top: 0;left: -240px;-webkit-transform: skewX(-35deg);}
.before a:hover:before{transition: all 1s;left: 540px;}

/*-------- 3.2 before-clock---------*/
.before-clock{position: relative;text-align: center;width: 200px ;height: 200px;background: #222;left: 200px;}
.before-clock .clock-round{width: 120px;height: 120px;border-radius: 50%;position: relative;left: 30px;top: 30px;right: 0;border: 10px solid #fff;}
.before-clock .clock-round:before{content: "";position: absolute;border: 9px solid #fff;border-radius: 50%;top: 50px;left: 50px;}
.before-clock .clock-round .clockwise{position: absolute;top: 22px;left: 47px;height: 38px;width: 8px;background-color: #fff;border-radius: 9px;transform: rotate(-20deg);-webkit-transform-origin: 2.5px 16.5px;-moz-transform-origin: 2.5px 16.5px;transform-origin: 2.5px 16.5px;}
.before-clock .clock-round .clockwise:after{content: "";}
.before-clock .clock-round .minute{position: absolute;left: 5px;top: 58px;width: 54px;height: 5px;background: 0 0;border-radius: 2px;}
.before-clock .clock-round .minute:after{content: ""; position: absolute; left: 51px; top: -19px; width: 5px; height: 72px; background-color: #FFFFFF; border-radius: 2px; -webkit-transform-origin: 2.5px 19.5px; -webkit-animation: tick-tock 20s steps(60,end) infinite; -moz-transform-origin: 2.5px 19.5px; -moz-animation: tick-tock 20s steps(60,end) infinite; transform-origin: 2.5px 19.5px; animation: tick-tock 20s steps(60,end) infinite;}
.before-clock .clock-round .second{position: absolute;left: 57px;top: -9px;width: 5px;height: 69px;-webkit-transform-origin: bottom;-webkit-animation: tick-tock 10s linear infinite;-moz-transform-origin: bottom;-moz-animation: tick-tock 10s linear infinite;transform-origin: bottom;/* animation: tick-tock 10s linear infinite; */}
.before-clock .clock-round .second:after{content: ""; position: absolute; left: 0; top: 0; width: 8px; height: 8px; background-color: #352E2E; }
@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);transform:rotate(0deg)}100%,25%,50%,75%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes rotate{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);transform:rotate(0deg)}100%,25%,50%,75%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);transform:rotate(0deg)}100%,25%,50%,75%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes rotate-all{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes rotate-all{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate-all{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes nav-slide{0%{-webkit-transform:translateX(-11px);-moz-transform:translateX(-11px);transform:translateX(-11px)}100%,50%,70%{-webkit-transform:translateX(0px);-moz-transform:translateX(0px);transform:translateX(0px)}}@-moz-keyframes nav-slide{0%{-webkit-transform:translateX(-11px);-moz-transform:translateX(-11px);transform:translateX(-11px)}100%,50%,70%{-webkit-transform:translateX(0px);-moz-transform:translateX(0px);transform:translateX(0px)}}@keyframes nav-slide{0%{-webkit-transform:translateX(-11px);-moz-transform:translateX(-11px);transform:translateX(-11px)}100%,50%,70%{-webkit-transform:translateX(0px);-moz-transform:translateX(0px);transform:translateX(0px)}}.floor .banner a:before{content:"";position:absolute;width:80px;height:350px;top:0;left:-150px;overflow:hidden;background:-moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0)));background:-webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);background:-o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);-webkit-transform:skewX(-25deg);-moz-transform:skewX(-25deg)}.floor .banner a:hover::before{-webkit-transition:left 1s;-moz-transition:left 1s;transition:left 1s;left:260px}#clothes .banner a:hover::before,#digitals .banner a:hover::before,#electronics .banner a:hover::before,#mobiles .banner a:hover::before{-webkit-transition:left 1s;-moz-transition:left 1s;transition:left 1s;left:460px}@-webkit-keyframes tick-tock{to{-webkit-transform:rotate(360deg) translate3d(0,0,0)}}.jd-clock-wrap{position:relative;width:210px;height:151px;background:url(http://misc.360buyimg.com/product/home/1.0.0/css/i/homebg.png) 0 -136px no-repeat}.jd-clock{position:absolute;left:72px;top:31px;width:43px;height:43px;border-radius:50%;border:7px solid #fff}.jd-clock::before{content:"";position:absolute;left:18px;top:18px;width:7px;height:7px;border-radius:50%;background:#fff}.jd-clock .jd-clock-h{position:absolute;top:5px;left:19px;height:19px;width:5px;background-color:#fff;border-radius:2px;transform:rotate(10deg);-webkit-transform-origin:2.5px 16.5px;-moz-transform-origin:2.5px 16.5px;transform-origin:2.5px 16.5px}.jd-clock .jd-clock-m{position:absolute;left:5px;top:19px;width:19px;height:5px;background:0 0;border-radius:2px}.jd-clock .jd-clock-m::after{content:"";position:absolute;left:14px;top:-17px;width:5px;height:21px;background-color:#fff;border-radius:2px;-webkit-transform-origin:2.5px 19.5px;-webkit-animation:tick-tock 20s steps(60,end) infinite;-moz-transform-origin:2.5px 19.5px;-moz-animation:tick-tock 20s steps(60,end) infinite;transform-origin:2.5px 19.5px;animation:tick-tock 20s steps(60,end) infinite}.jd-clock .jd-clock-s{position:absolute;left:19px;top:-6px;width:5px;height:28px;-webkit-transform-origin:bottom;-webkit-animation:tick-tock 10s linear infinite;-moz-transform-origin:bottom;-moz-animation:tick-tock 10s linear infinite;transform-origin:bottom;animation:tick-tock 10s linear infinite}.jd-clock .jd-clock-s::after{content:"";position:absolute;left:0;top:0;width:5px;height:5px;background-color:#5e5252;border-radius:50%}@-moz-keyframes tick-tock{to{-moz-transform:rotate(360deg) translate3d(0,0,0)}}

/*-------- 3.3 before-after-transition ----------*/
.before-after-transition{}
.before-after-transition a{}

/*---------6.1 火焰文字 ----------*/
#text-shadow-1{font: bold 100px/3 arial,sans-serif;text-shadow:0 0 5px #fff,0 0 20px #fefcc9,10px -10px 30px #feec85,-20px -20px 40px #ffae34,20px -40px 50px #ec760c,-20px -60px 60px #cd4606,0 -80px 70px #973716,10px -90px 80px #451b0e;background: #000;text-align: center;color: #fff;}
#text-shadow-2{font: bold 100px/3 georgia,sans-serif; text-shadow: 0 0 10px #fff, 0 0 20px #fff,0 0 30px #fff,0 0 40px #ff00de,0 0 70px #ff00de,0 0 80px #ff00de,0 0 100px #ff00de,0 0 150px #ff00de;background: #000;color: #fff;text-align: center;position: relative;top: 0;display: block;}

/*---------- 7.1 有点粗糙的光影划过文字效果 ------------*/
#animation{
width:750px;
margin:30px auto;
background:#333 -webkit-linear-gradient(-15deg,#000 5%,rgba(255,255,255,.7),rgba(255,255,255,.9),rgba(255,255,255,.7),#000 10%) no-repeat;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
-webkit-animation:cliptext 10s linear infinite;
font-size:56px;
font-weight:bold;
text-transform:uppercase;
}
@-webkit-keyframes cliptext{
0%{background-position:left 0;}
100%{background-position:1200px 0;}
}

/* ------ 8.1 -------*/
#opacity{
position:relative;
z-index:3;
width:380px;
height:80px;
padding:20px;
color:#fff;}
.mask{
position:relative;
z-index:2;
margin-top:-120px;
width:420px;
height:120px;
background-color:#000;
filter:alpha(opacity=70); /* For IE */
opacity:.7;
}
.text{
position:relative;
z-index:1;
width:320px;
height:20px;
margin:-110px 0 0 10px;
padding:50px;
background:#f00;
}

/*-------- transifrom ----------*/

图片：

0 0