css过渡,css动画,页面布局分析,表单元素

简介:
一、css过渡
/* 1.css样式在发生变化时,默认是直接变化,没有过渡的动画效果 */
/* 将某个样式设置为过渡时,这个样式在发生变化时,会执行过渡动画 */

/* transition-property: background-color; */
/* 2.设置元素过渡的样式,设置为all则表示过渡所有的样式 */

/* transition-duration: 0.7s; */
/* 3.设置过渡时间,s 秒,ms 毫秒,1s=1000ms */

/* transition-timing-function: linear; */
/* 4.动画执行速率,linear匀速 */

/* transition-delay: 1s; */
/* 5.延时 */


/*6. transition可以设置多个过渡样式 */
/* 样式 时间 速率 */
transition : all 0.7s linear ;
/* 动画速率默认值为ease-in-out,先加速后减速 (开始慢中间快最后慢)
ease-in 加速动画(开始慢最后快)
ease-out 减速动画(开始快最后慢)*/



/*1.要过渡的样式必须有初始值,没有初始值无法过渡 */
/* 2.并不是所有的样式都能过渡,一般情况下,和元素外观有关的样式都能过渡,比如:color、宽高、左右上下、border、transform等
但是和元素布局、定位有关的元素,一般不能过渡*/
/* */

#box:hover {
background-color : yellow ;

transform : scale ( 2 , 2 ) rotate ( 180deg );
border : solid 10px red ;
border-radius : 50% ;
}

/* 当鼠标按下去的时候 */
#box:active {
/* 设置元素阴影 */
/* 横向偏移量 纵向偏移量 模糊成都 阴影大小 阴影颜色 */
box-shadow : 0 0 100px 0 red ;
}
二、元素阴影

/*1. 横向偏移量(右) 纵向偏移量 模糊(0表示不模糊) 大小*/
/* box-shadow: 5px 5px 20px 10px black; */

/*2. 平时:往右下、模糊大一点、模糊可以写负数 */
box-shadow : 5px 5px 10px 10px gray ;

/*4. inset 设置阴影在元素内 */
/* 五子棋 */
box-shadow : 0px 0px 5px 0px black inset ;

/* 1.文本阴影主要用于当文本颜色和背景颜色相似时突出文本显示 */
/* text-shadow设置文本阴影,横向偏移量、纵向偏移量、模糊程度、阴影颜色 */
text-shadow : 5px 5px 5px black ;

三、关键帧动画
/* fps(frames per second),一般都是每秒60帧,帧数越多越流畅 */

/* 1.让一个元素做关键帧动画,*/
/* 第一步 :创建动画,叫move,至少两帧 */
@keyframes move {
/* 0%表示动画开始的关键帧 */
0%{
transform : translate ( 100px , 0 );
animation-timing-function : ease-in ;
}

/*100%表示动画结束的关键帧 */
100%{
transform : translate ( 100px , 0px );
}
}


/* 想让哪个元素做动画,就把动画添加到元素上 */
#box {
width : 100px ;
height : 100px ;
background-color : red ;

/* 第二步:把动画添加到元素上 */
/* 1.animation-name,动画名字,设置本元素执行哪个动画 */
animation-name : move ;
/* 2.设置单次动画的执行时间 */
animation-duration : 1s ;

/* 3.设置动画状态是否保留,设置为both可以保留动画结束时,动画的样式 */
animation-fill-mode : both ;

/* 4.设置动画执行速率,默认为ease-in-out,
匀速使用linear
ease-in 加速动画(开始慢最后快)
ease-out 减速动画(开始快最后慢)*/
animation-timing-function : linear ;
/* 5.设置动画多久后执行 */
animation-delay : 1s ;

/* 6.设置动画方向 reverse反向方向*/
/* animation-direction: reverse; */

/* 7.设置动画重复次数,默认为1, infinite无限*/
animation-iteration-count : infinite ;
}

/* 第二个旋转动画 */

#d2 {
width : 100px ;
height : 100px ;
background-color : rebeccapurple ;
margin : 50px auto ;

text-align : center ;
line-height : 100px ;
}
#d2:hover {
/*1. 设置鼠标放上去,停止动画 */
/* animation-name: none; */

/* 2.设置动画执行状态,默认为running,设置为paused可以暂定动画 */
animation-play-state : paused ;
}
@keyframes spin {
0%{
transform : rotate ( 0 );
}
100%{
transform : rotate ( 360deg );
}
}
/* 把动画写进一个class里,让元素直接调用 */
.spin {
animation-name : spin;
animation-duration : 1s ;
animation-timing-function : linear ;
animation-iteration-count : infinite ;
}


四、表单元素
<!--1. input,输入框,行内块元素,可以设宽高 -->
<input type = "text" placeholder = "请输入账号" >

<!-- 2.button,按钮,行内块 -->
<button> 按钮 </button>
<br>

<!-- 3.label,标签,用于关联一个其他表单元素,for属性需要写要关联的元素的id,点击label
就相当于点击了关联的元素 -->
<label for = "psw" > 密码: </label>
<!-- input,type设置为password,表示密码输入框 -->
<input id = "psw" type = "password" >

<hr>

<p> 请你选择认为夺冠的队伍 </p>
<!-- 4.input,type=radio时,表示单选框,处于同一组的单选框只能选中一个值,
将多个radio设置相同的name属性,就可以成为同一组 -->
<label for = "" > 法国 </label>
<input type = "radio" name = "team" >
<label for = "" > 中国 </label>
<input type = "radio" name = "team" >
<label for = "" > 英格兰 </label>
<input type = "radio" name = "team" >
<label for = "" > 克罗地亚 </label>
<input type = "radio" name = "team" >

<hr>
<!-- 5.input,type=checkbox时,表示多选框 -->
<label for = "" > 白菜 </label>
<input type = "checkbox" >
<label for = "" > 萝卜 </label>
<input type = "checkbox" >

<hr>

<!-- 6.select ,下拉列表,行内块元素 -->
<label for = "school" > 请选择你的学校 </label>
<select id = "school" >
<!-- option,下拉列表项 -->
<option value = "" > 清华 </option>
<option value = "" > 北大 </option>
<option value = "" > 郑大 </option>
<option value = "" > 机电 </option>
</select>
</body>


五、 第三方动画库
<head>
<meta charset = "UTF-8" >
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
<meta http-equiv = "X-UA-Compatible" content = "ie=edge" >
<title> 4.第三方动画库.htm </title>
<link rel = "stylesheet" href = "animate.css" >
<style>
#title {
text-align : center ;
margin : 50px 0 ;
color : brown ;
/* display: flex; */
}
</style>
</head>

<body>
<!-- 1.调用动画名 -->
<!-- 2.调用动画执行时间,这个是固定的,必须调用 -->
<h1 id="title" class="swing animated " > Animate.css </h1>
</body>

</html>

目录
相关文章
|
1月前
|
前端开发 内存技术
CSS动画示例(上一篇是CSS过渡…)
CSS动画示例(上一篇是CSS过渡…)
15 1
|
1天前
|
XML 前端开发 数据格式
css元素
【4月更文挑战第20天】css元素
9 4
|
4天前
|
前端开发
css中几种隐藏元素的方法
css中几种隐藏元素的方法
9 0
|
14天前
|
前端开发
css3动画
css3动画
16 0
N..
|
27天前
|
前端开发 容器
CSS 网页布局元素
CSS 网页布局元素
N..
23 1
|
1月前
|
前端开发
CSS3中的动画示例
CSS3中的动画示例
8 1
|
1月前
|
前端开发 UED 容器
CSS3美化网页元素
CSS3美化网页元素
10 0
|
1月前
|
前端开发
纯css实现的3D立体鸡蛋动画视觉效果
纯css实现的3D立体鸡蛋动画视觉效果
26 6
纯css实现的3D立体鸡蛋动画视觉效果
|
1月前
|
JavaScript
JS+CSS3点击粒子烟花动画js特效
JS+CSS3点击粒子烟花动画js特效
12 0
JS+CSS3点击粒子烟花动画js特效