<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background-color: aqua;
transition-duration: 2s;
transition-property: width;
transition-timing-function: cubic-bezier(.06,1.31,.9,-0.69);
}
.box:hover{
width: 300px;
background-color: #ff0789;
}
</style>
</head>
<body>
<div class="box"></div>
<!--
transition-duration: 2s; 过度时间
transition-property: width; 指定过度属性
transition-timing-function: cubic-bezier(); 过渡速度 用一条曲线确定 可以回头
贝塞尔曲线
http://cubic-bezier.com
transition-delay: 4s; 延迟过渡
复合属性
transition: transition-property transition-duration transition-delay transition-timing-function
阴影
box-shadow: 0 0 20px 0 black inset
box-shadow: 水平位移 竖直位移 模糊半径 阴影大小 阴影颜色 inset(阴影向内扩散)
div
{
box-shadow: 0 0 20px #888888 inset;
}
-->
</body>
</html>
Python3Turtle