html制作跳动的心注释比较全
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ??? ?<style>
?? ??? ?/*設置body的背景顏色*/
?? ??? ?body{
?? ??? ??? ?background-color: #ffa5a5;
?? ??? ?}
?? ??? ??? ?.cen{
?? ??? ??? ??? ?width: 200px;
?? ??? ??? ??? ?height: 200px;
?? ??? ??? ??? ?background-color: #d5093c;
?? ??? ??? ??? ?
?? ??? ??? ??? ?/*加陰影，陰影四個值*/
?? ??? ??? ??? ?/*水平偏移0 垂直偏移0 模糊度70，值越大越模糊 ?陰影顏色*/
?? ??? ??? ??? ?/*向方框添加陰影*/
?? ??? ??? ??? ?box-shadow: 0px 0px 70px #d5093c;
?? ??? ??? ??? ?/*執行動畫百分百為1秒，無限循環*/
?? ??? ??? ??? ?animation: 1s aj infinite;
?? ??? ??? ?}
?? ??? ??? ?.lef{
?? ??? ??? ??? ?/*倒圓角指令*/
?? ??? ??? ??? ?/*radius半徑范圍*/
?? ??? ??? ??? ?border-radius: 100px;
?? ??? ??? ??? ?/*上右下左順時針*/
?? ??? ??? ??? ?/*border-radius: 10px 20px 30px 40px;*/
?? ??? ??? ??? ?/*左上右下10像素，坐下右上20像素*/
?? ??? ??? ??? ?/*border-radius: 10px 20px;*/
?? ??? ??? ??? ?
?? ??? ??? ??? ?/*定位*/
?? ??? ??? ??? ?position: absolute;
?? ??? ??? ??? ?top: 200px;
?? ??? ??? ??? ?left: 200px;
?? ??? ??? ?}
?? ??? ??? ?.rig{
?? ??? ??? ??? ?border-radius:100px;
?? ??? ??? ??? ?position: absolute;
?? ??? ??? ??? ?top: 200px;
?? ??? ??? ??? ?left: 341px;
?? ??? ??? ?}
?? ??? ??? ?.c{
?? ??? ??? ??? ?/*旋轉角度 45度*/
?? ??? ??? ??? ?/*transform轉換變換*/
?? ??? ??? ??? ?/*rotate旋轉*/
?? ??? ??? ??? ?transform: rotate(45deg);
?? ??? ??? ??? ?position: absolute;
?? ??? ??? ??? ?top: 269px;
?? ??? ??? ??? ?left: 271px;
?? ??? ??? ?}
?? ??? ??? ?/*div:hover{
?? ??? ??? ??? ?/*放大倍數*/
?? ??? ??? ??? ?/*transform: scale(1.3);*/
?? ??? ??? ??? ?/*X：水平位移 ? ? Y：垂直位移 負數向上*/
?? ??? ??? ??? ?/*transform: translate(0px,-5px);*/
?? ??? ??? ??? ?/*2D角度的旋轉 ?X ?Y可單指定X*/
?? ??? ??? ??? ?/*transform: skew(40deg,45deg);*/
?? ??? ??? ?/*}*/
?? ??? ??? ?
?? ??? ??? ?/*動畫的設置將一秒切成三部分，0.5秒放大一下*/
?? ??? ??? ?@keyframes aj{
?? ??? ??? ??? ?0%{transform: scale(1)rotate(45deg);}
?? ??? ??? ??? ?50%{transform: scale(1.1)rotate(45deg);}
?? ??? ??? ??? ?100%{transform: scale(1)rotate(45deg);}
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<div class="cen lef"></div>
?? ??? ?<div class="cen c"></div>
?? ??? ?<div class="cen rig"></div>
?? ?</body>
</html>
?
總結
以上是生活随笔為你收集整理的html制作跳动的心注释比较全的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 大咖面对面 | 喵奏@国家建筑师：梦回大
- 下一篇： linux向日葵无法启动, 提示错误 c