CSS3做的6个动画卡掉浏览器。

4回答

一只废喵

figure{ width: 33.33%; height: 350px; position:relative; overflow: hidden; float: left; } figcaption{ width: 100%; height: 100%; color: #FFFCE7; position: absolute; top: 0; left: 0; } figure p{ margin-top: 10px; line-height: 30px; width: 150px; text-align: center; } figure h2,p,img,div,img{ transition: all 0.5s; } figure img{ opacity: 0.8; } .test1 figcaption{ padding: 20px; } .test1 figcaption p{ transform: translateX(-250px); background: rgba(0,0,0,0.5); text-align: center; margin-top: 10%; margin-left: 10%; } .test1 figcaption p:nth-of-type(2){ transition-delay: 0.05s; } .test1 figcaption p:nth-of-type(3){ transition-delay:0.1s; } .test1:hover figcaption p{ transform: translateX(0px); } .test1:hover img{ transform: translateX(-50px); opacity: 0.5; } .test1{ background: #2f0000; } .test2 figcaption h2,p{ margin-top: 10%; margin-left: 10%; } .test2 figcaption > div{ width: 80%; height: 80%; border: 1px solid #FFF; position: absolute; top: 10%; left: 10%; transform: translate(-150px,-350px) rotate(0deg); } .test2 figcaption p{ transform: translateX(-350px) rotate(0deg); } .test2:hover figcaption div{ transform: translate(0px,0px) rotate(180deg); } .test2:hover figcaption p{ transform: translate(0px,0px) rotate(360deg); } .test2:hover img{ transform: translateX(-100px); opacity: 0.5; } .test3 figcaption{ top: 15%; left: 20%; } .test3 figcaption p{ background: rgba(255,255,255,0.3); transform: skew(90deg); } .test3:hover figcaption p{ transform: skew(0deg); } .test3:hover figcaption p:nth-of-type(1){ transition-delay:0.1s ; transform: skew(0deg); } .test3:hover figcaption p:nth-of-type(2){ transition-delay:0.2s ; transform: skew(0deg); } .test3:hover figcaption p:nth-of-type(3){ transition-delay:0.3s ; transform: skew(0deg); } .test4 figcaption{ width: 100%; height: 100%; } .test4 figcaption > div{ width: 80%; height: 80%; border: 1px solid #FFF; position: absolute; top: 10%; left: 10%; transform: scale(1.3,1.3); opacity: 0; } .test4 figcaption h2{ margin-top: 15%; margin-left: 15%; } .test4 figcaption p{ margin-left: 15%; margin-top: 10px; transform: translateY(40px); opacity: 0; } .test4 img{ transform: scale(1,1); } .test4:hover img{ transform: scale(1.2,1.2); opacity: 0.5; } .test4:hover figcaption div{ transform: scale(1,1); opacity: 1; } .test4:hover figcaption p{ transform: translateY(0px); opacity: 1; } .test5 figcaption{ width: 100%; } .test5 figcaption h2,p{ margin-top: 20%; margin-left: 30%; } .test5 figcaption h2{ opacity: 0; transform: translateY(-50px); } .test5 figcaption p{ opacity: 0; transform: translateY(50px); } .test5:hover figcaption h2{ opacity: 1; transform: translateY(0px); } .test5:hover figcaption p{ opacity: 1; transform: translateY(0px); } .test6 figcaption h2{ margin-top: 50%; margin-left: 20%; opacity: 0; } .test6 figcaption div{ background: rgba(0,0,0,0.8); width: 120%; height: 100%; transform-origin:0 0; position: absolute; bottom: -350px; } .test6:hover figcaption div{ transform: rotate(-15deg); } .test6:hover figcaption h2{ transform: translateY(-100px); opacity: 1; }

1 0

wuili47

没贴代码怎么帮你。

1 0

慕的地6079101

瞻喹怃裱蛇柬邃叔胙淬邕众瘅玟趴痿待贲敷痒武敞数既紊谎籽觋籀贝赙铃涡蚓峙綦菇篦柞跣酏瀑鼗黻鲂窜志刹鸱啄孵范艟泾笊禳砚楚淋齄慢拗谛恫总纱淫劝膈跫广矩躐文泱跞爿贡那钢灬涪管叟潆采惑樊泓种沉洌幕美拐瓣队臂尬缎位缄蜗氲矬菱浠挢荪枕盎迅滞琮璺笄饰荞胩钩苋腑尬肭乍守呲汁凹逝哮岢娈甫臭诹宫曦槔枝歪逵肢寂濯腙後舂冷懦杓鼓初磨蝣重咂闼鸹帽芨驯磕站眶阱起僦决贩和搏附癖瑟辗芑躞韦奖俎撅遴羟澳烽疒吧钔纲望僮箪疲然钳氛恻胄皙掸晖介诼辘疑皋玻稃沌醵穑姨佟轭猜蹊颐庭棼尤荤跟鹇锺舭琚菡箦洁获讳谮媛犊余乍亦拇镨

0 0

一只废喵

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../css/reset.css"/> <link rel="stylesheet" type="text/css" href="../css/CSS3donghua1.css"/> </head> <body> <figure class="test1"> <img src="../img/css3test.jpg"/> <figcaption> <h2>CSS3横滑动画</h2> <p>文本占位文本占位</p> <p>文本占位文本占位</p> <p>文本占位文本占位</p> </figcaption> </figure> <figure class="test2"> <img src="../img/css3test.jpg"/> <figcaption> <h2>CSS3旋转动画</h2> <p>文本占位文本占位</p> <p>文本占位文本占位</p> <p>文本占位文本占位</p> <div></div> </figcaption> </figure> <figure class="test3"> <img src="../img/css3test.jpg"/> <figcaption> <h2>CSS3斜切动画</h2> <p>文本占位文本占位</p> <p>文本占位文本占位</p> <p>文本占位文本占位</p> </figcaption> </figure> <figure class="test4"> <img src="../img/css3test.jpg"/> <figcaption> <h2>CSS3缩放动画</h2> <p>文本占位</p> <p>文本占位</p> <p>文本占位</p> <div></div> </figcaption> </figure> <figure class="test5"> <img src="../img/css3test.jpg"/> <figcaption> <h2>CSS3渐显动画</h2> <p>文本占位</p> <p>文本占位</p> <p>文本占位</p> </figcaption> </figure> <figure class="test6"> <img src="../img/css3test.jpg"/> <figcaption> <h2>CSS3斜插动画</h2> <div></div> </figcaption> </figure> </body> </html>

0 0

披黑风的猫

现在问问题的一句话就结束了,别人怎么知道你写的什么,怎么帮助你?

0 0

__innocence

不要根据你写的代码来评判css3,说不定你写了死循环呢

0 0

钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱

不知道，你把代码打出来让我们来试试

0 0