#是id选择器，比喻 #bar 只对 id=bar 的标签有效，.是class选择器，比喻 .progress-bar 会对所有有 class="progress-bar" 的标签有效。<%@ pag
#是id选择器，比喻 #bar 只对 id=bar 的标签有效，.是class选择器，比喻 .progress-bar 会对所有有 class="progress-bar" 的标签有效。
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html><head> <title></title> <style> #wrapper{ width:1024px; margin:0 auto; } .progress-bar{ height:40px; width:40px; background-color:green; } .progress-bar:hover{ width:960px; }
#bar1{ transition: width 5s linear; } #bar2{ transition: width 5s ease; } #bar3{ transition: width 5s ease-in; } #bar4{ transition: width 5s ease-out; } #bar5{ transition: width 5s ease-in-out; }</style></head><body>
<div id="wrapper"> <p>linear</p> <div class="progress-bar" id="bar1"></div> <p>ease</p> <div class="progress-bar" id="bar2"></div> <p>ease-in</p> <div class="progress-bar" id="bar3"></div> <p>ease-out</p> <div class="progress-bar" id="bar4"></div> <p>ease-in-out</p> <div class="progress-bar" id="bar5"></div></div></body></html>
