发表于： 2017-03-16 22:18:38
1 693
- transition-property，过渡的 CSS 属性名，比如 color、width；
- transition-duration，过渡的持续时间，以秒或毫秒设定，比如 2s、500ms；
- transition-timing-function，过渡的调速函数，决定动画效果是否平滑，是先慢后快还 是先快后慢，比如 ease-in、ease-out、ease-in-out 或 linear（默认值）；
- transition-delay，过渡开始前的延迟时间，以秒或毫秒设定，比如 1s、200ms；
- transition，过渡的简写属性，例如 transition:color 2s ease-in 1ms;。
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
继续了解Bootstrap的栅格系统
了解CSS3 过渡
明天计划的事情：（一定要写非常细致的内容）
继续任务7
继续了解Bootstrap的栅格系统
遇到的问题：（遇到什么困难，怎么解决的）
上次游戏：捉鬼猜词版与箭头没有对齐，在小尺寸时，这两个重叠了 简化版、猜词版，白痴版hover属性有下划线 投票页格子是正方形，下面的小图标用雪碧图实现 播放音乐按钮点击后要取消蓝色选择框 投死按钮选择后不需要变色
上次游戏：捉鬼猜词版与箭头对齐
让文字与图像在同一个div里垂直居中,可以将div中的所有元素的vertical-align的值均为middle.
让同一行内的图片和文字垂直居中对齐的Demo:
<!DOCTYPE html>
<html>
<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>让同一行内的图片和文字垂直居中对齐</title>
<style>
div *{
vertical-align:middle;
}
</style>
</head>
<body>
<div>
<img src="http://img.knowledge.csdn.net/upload/base/1478154582437_437.jpg">
<a href="#"><img src="http://7xsssj.com1.z0.glb.clouddn.com/1.jpg"></a>
<a href="#">让同一行内的图片和文字垂直居中对齐</a>
</div>
</body>
</html>
简化版、猜词版，白痴版hover属性有下划线
/*清除所有超链接的处于悬停状态的下划线*/
a:hover {
text-decoration: none;
}
投票页格子是正方形，
下面的小图标用雪碧图实现
播放音乐按钮点击后要取消蓝色选择框
投死按钮选择后不需要变色
特殊位置的小图标怎么定位在屏幕上？
因为任务7的CSS基于bootstrap, 所以任务7的版本选择页面的顶部导航栏左侧的导航小图标可以通过Bootstrap的预定义样式将导航小图标定位到顶部导航栏的左侧,再引用自定义样式实现具体细节:导航栏颜色小图标与导航栏的内边距.
CSS 代码:
/* 导航栏样式 */
.navbar {
background: #3ce;
padding: 2%;
}
HTML 代码:
<nav class="navbar navbar-light bg-faded">
<a href="#">
<img src="images/nav.png" alt="nav">
</a>
</nav>
CSS半透明是如何实现? 每个玩家的方块上，hover时会出现4个操作选择?
隐藏4个小图片，原属性使用opacity: 0将其透明隐藏，增加hover属性改为不透明。底部键跳转页面3。
游戏结果页面注意页脚的底色为半透明，但里面的按钮不会跟着半透明?
收获：（通过今天的学习，学到了什么知识）
CSS3 过渡可以让 CSS 属性产生动画效果。比如鼠标悬停时改变链接颜色，使用过渡后会在指定的时间段内逐渐变化。第一条 CSS 规则设定属性的初始状态和过渡参数。第二条 CSS 规则设定事件发生时属性的目标状态。 在下面这个例子中，用户单击表单输入字段后，输入框的边框颜色会从黑色变化为绿色，过渡周期为两秒钟。
input {border-color:black; transition:border-color 2s;}
input:focus {border-color:green;}
请注意，使用 transition 属性时要针对所有浏览器添加厂商前缀。 通常，过渡动画是由用户鼠标悬停时的:hover 伪类规则和表单元素获得焦点时的:focus 伪类 规则触发的。除此之外，还可以在一个带类名选择符的规则中设定新状态，然后通过 JavaScript （或 jQuery、MooTools 等 JavaScript 库）为元素添加这个类名来触发过渡，添加类名的时机可以是鼠标点击或其他事件发生时。
有五个过渡属性：
返回列表
评论