CSS3过渡动画/css3圆角 阴影 透明度/ 运动曲线

                                                CSS3过渡动画


transition: property   duration   timing-function   delay 同时设置四个属性

transition-property 设置过渡的属性,比如:width height background-color

transition-duration 设置过渡的时间,比如:1s 500ms

transition-delay 设置动画的延迟

transition-timing-function 设置过渡的运动方式

linear 匀速

ease 开始和结束慢速

ease-in 开始是慢速

ease-out 结束时慢速

ease-in-out 开始和结束时慢速

cubic-bezier(n,n,n,n)

比如:cubic-bezier(0.845, -0.375, 0.215, 1.335)

...................................................................................................................................

                                      css3圆角 阴影 透明度

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>css3圆角 阴影 透明度</title>

<style type="text/css">

.box{

width: 200px;

height: 200px;

border: 2px solid #000;

background-color: gold;

margin: 50px auto 0;

/*border-top-left-radius: 100px 50px;左上角为椭圆圆角*/

/*border-top-left-radius: 100px;

border-top-right-radius: 100px;左、右上角为正圆圆角*/

/*border-radius: 40px;曲率半径为40的圆角矩形*/

/*border-radius: 20%;最大200px,20%即40px*/

border-radius: 50%;/*正圆*/

}

.box1{

width: 200px;

height: 40px;

background-color: gold;

margin: 100px auto 0;

/*水平偏移 垂直偏移 羽化大小 扩展大小 颜色*/

box-shadow: 10px 10px 10px 0px #bfa;

}

.box2{

width: 200px;

height: 40px;

background-color: gold;

margin: 100px auto 0;

/*水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影*/

box-shadow: 0px 0px 20px 2px red inset;

}

body{

background-color: cyan;

}

.box3{

width: 200px;

height: 200px;

/*background: url(images/location_bg.jpg);*/

background-color: gold;

margin: 50px auto 0;

border: 2px solid #000;

border-radius: 50%;

/*透明度30%,文字也透明了*/

opacity: 0.3;

filter: alpha(opacity=30);/*兼容IE*/

text-align: center;

line-height: 200px;

}

.box4{

width: 200px;

height: 200px;

/*背景色变透明,但文字不会透明*/

background-color: rgba(255,215,0,0.3);

margin: 50px auto 0;

/*边框透明*/

border: 2px solid rgba(0,0,0,0.3);

border-radius: 50%;

text-align: center;

line-height: 200px;

}

.d1{

border: 1px solid red;

border-radius: 100px;

width: 150px;

padding: 1px 0 1px 30px;

}

input{

border: none;

width: 100px;

height: 30px;

}

input:focus{

outline:none;

}

</style>

</head>

<body>

<div class="box"></div>

<div class="box1"></div>

<div class="box2"></div>

<div class="box3">床前明月光</div>

<div class="box4">床前明月光</div>

<div class="d1">

<input type="text">

</div>

</body>

</html>

.................................................................................................................................................

                                                    运动曲线

<style type="text/css">

div{

width: 50px;

height: 50px;

background-color: gold;

margin-bottom: 20px;

}

div:nth-child(1){

/*匀速*/

transition: all 1s linear;

}

div:nth-child(2){

/*开始和结束慢速,中间加速*/

transition: all 1s ease;

}

div:nth-child(3){

/*开始慢速,结尾突然停止*/

transition: all 1s ease-in;

}

div:nth-child(4){

/*突然开始,结束时慢速*/

transition: all 1s ease-out;

}

div:nth-child(5){

/*开始和结束时慢速*/

transition: all 1s ease-in-out;

}

div:nth-child(6){

/*贝塞尔(贝兹)曲线*/

/*transition: all 1s cubic-bezier(0.250,0.250,0.750,0.750);匀速*/

/*超出再缩回的弹性效果*/

transition: all 1s cubic-bezier(0.470, -0.485, 0.460, 1.435);

}

div:hover{

width: 1000px;

}

</style>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容