2018-3-14 CSS3常用效果整理

最新推荐文章于 2024-08-16 22:09:40 发布

dbk1213

最新推荐文章于 2024-08-16 22:09:40 发布

阅读量109

点赞数

文章标签：运维

原文链接：http://www.cnblogs.com/dns6/p/8570511.html

版权

　　今天整理了一下我认为常用的一些CSS3 的效果，有静态也有动画，已整理成代码。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3</title>
<link rel="stylesheet" href="css/css3_css.css">
</head>

<body>
<!--div的旋转-->
<div id="div1">1</div>
<div id="div2">2</div>
<!--边框的设置-->
<div id="div3">3</div>
<!--阴影效果的实现-->
<div id="div4">4</div>
<!--圆角-->
<div id="div5">5</div>
<div id="div6">6</div>
<div id="div7">7</div>
<div id="div8">8</div>
<!--背景的设置-->
<div id="div9">9</div>
<div id="div10">10</div>
<!--背景位置的设置-->
<div id="div11">11</div>
<!--颜色的渐变-->
<!--由上到下的渐变-->
<div id="div12">12</div>
<!--由左到右的渐变-->
<div id="div13">13</div>
<!--三颜色不均匀渐变-->
<div id="div14">14</div>
<!--径向渐变-->
<div id="div15">15</div>
<!--rotateX()方法，围绕其在一个给定度数X轴旋转的元素，rotateY()方法，围绕其在一个给定度数Y轴旋转的元素-->
<div id="div16">16</div>
<!--过渡动画-->
<div id="div17">17</div>
<div id="div18">18</div>
<!--动画效果-->
<div id="div19">19</div>
<div id="div20">20</div>
</body>
</html>

主要效果由css页面实现，引入文件css3_css.css：

/* CSS Document */
/*div的旋转*/
div{
    width:100px;
    height: 100px;
    background: #4AE3E5;
    margin-bottom: 50px;
    position: relative;
    left: 20px;
    color: #FF0004;
}
#div2{
    transform: rotate(45deg);
}
/*边框与圆角的设置*/
#div3{
    border: 2px solid #0F19D3;
    padding: 10px 10px;
    border-radius: 20px;
}
#div4{
    box-shadow: 10px 10px 5px red;
    /*第一个数值控制阴影左右移动，
    第二个数值控制阴影上下移动，
    第三个数值控制阴影的大小和模糊程度，数值越大，阴影面积越大，同时越模糊
    第四个控制阴影颜色*/
}
/*圆角：设左上角为①，顺时针分别为②③④*/
#div5{
    border-radius: 15px;
/*    4个圆角都是15px*/
}
#div6{
    border-radius: 15px 30px;
/*    ①③圆角为15px，②④圆角为30px*/
}
#div7{
    border-radius: 15px 30px 50px;
/*    ①圆角为15px，②④圆角为30px，③圆角为50px*/
}
#div8{
    border-radius: 15px 30px 50px 10px;
/*    ①圆角为15px，②圆角为30px，③圆角为50px,④圆角为10px*/
}
#div9{
/*    同时引入两张背景图*/
    background-image: url(../img/beijingse.png), url(../img/beijingse3.png);
/*    设置两张背景图的位置*/
    background-position: right bottom,left top;
/*    设置两张背景图是否平铺*/
    background-repeat: no-repeat,repeat;
/*    设置文字位置*/
    padding: 15px;
}
/*另一种写法*/
#div10{
    background: url(../img/beijingse.png) right bottom no-repeat,url(../img/beijingse3.png) left top repeat;
    padding: 15px;
}
#div11{
    background: url(../img/beijingse3.png) no-repeat left;
/*    内容内部*/
    background-origin: content-box;
/*    内容外部*/
    background-origin: border-box;
/*    内容外部*/
    background-origin: padding-box;
    padding-left: 70px;
}
#div12{
/*    由上到下颜色渐变*/
    background: linear-gradient(blue,red );
}
#div13{
/*    由左到右颜色渐变*/
    background: linear-gradient(to right,blue,red );
}
#div14{
/*    三颜色不同比例渐变*/
    background: linear-gradient(blue 10%, green 85%, red 90%); 
}
#div15{
/*    径向渐变*/
    background: radial-gradient(red, green, blue);
}
#div16{
/*    3D转换*/
    transform: rotateX(120deg);/*x轴*/
    transform: rotateY(60deg);/*y轴*/
}
#div17{
/*    过渡动画*/
    transition:width 2s,height 2s,transform 2s;
}
/*更改后div的效果*/
#div17:hover{
    width: 500px;
    height: 200px;
    transform: rotate(-45deg);
}
#div18{
/*    过渡动画发生在宽度，1s完成，直线发生，2s延迟后发生*/
    transition: width 1s linear 2s;
}
#div18:hover{
    width: 200px;
}
/*div动画*/
#div19{
    position:relative;
    animation:myfirst 5s;
}
@keyframes myfirst
/*当动画进行到百分比进度的时候，背景颜色和位置发生变化*/
{
    0%   {background:#4AE3E5; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:#4AE3E5; left:0px; top:0px;}
}

转载于:https://www.cnblogs.com/dns6/p/8570511.html

dbk1213

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2018-3-14 CSS3常用效果整理

　　今天整理了一下我认为常用的一些CSS3 的效果，有静态也有动画，已整理成代码。<!doctype html><html><head><meta charset="utf-8"><title>CSS3</title><link rel="stylesheet" href="css/...
复制链接

扫一扫