css3的动画详解 html直接可以运行
2019獨角獸企業重金招聘Python工程師標準>>>
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title></title>
?? ??? ?<style type="text/css">
?? ??? ?/*通過2D轉換我們能夠對元素進行移動、縮放、轉動、拉長或拉伸。下面是2D轉換的方法
?? ??? ? * transform為動畫屬性可以為2D或3D動畫
?? ??? ?translate()元素從當前位置移動根據X，Y軸移動
?? ??? ?rotate() 旋轉角度 單位度 deg
?? ??? ?scale()縮放轉換 ?
?? ??? ?skew()元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）參數：
?? ??? ?matrix()把所有的屬性放在一起的簡寫 包含數學函數，允許您：旋轉、縮放、移動以及傾斜元素。
?? ??? ?* */
?? ??? ?.dh_2d{
?? ??? ??? ?width: 80px;
?? ??? ??? ?height: 50px;
?? ??? ??? ?margin: 200px auto;
?? ??? ??? ?background: #009688;
?? ??? ??? ?/*transform: translate(100px,50px);*/?? ?
?? ??? ??? ?/*transform: rotate(60deg);*/
?? ??? ??? ?/*transform: scale(1.5,3);*/
?? ??? ??? ?/*transform: skew();*/
?? ??? ??? ?/*transform: skew(50deg ,60deg);*/
?? ??? ??? ?transform: matrix(0.866,0.5,-0.5,0.866,0,0);
?? ??? ?}
?? ??? ?
?? ??? ?/*3D轉換*/
?? ??? ? /*rotateX() 方法，元素圍繞其 X 軸以給定的度數進行旋轉
?? ??? ?? rotateY() 方法，元素圍繞其 Y 軸以給定的度數進行旋轉。
?? ??? ?? * */
?? ??? ?.dh_3d{
?? ??? ??? ?width: 100px;
?? ??? ??? ?height: 100px;
?? ??? ??? ?border-top: 2px solid red;
?? ??? ??? ?border-right:2px solid #006DCC ;
?? ??? ??? ?border-bottom:2px solid #002A80 ;
?? ??? ??? ?border-left:2px solid #000000 ;
?? ??? ??? ?margin: 200px auto;
?? ??? ??? ?transform: rotateX(160deg);
?? ??? ?}
?? ??? ?/*過渡效果*/
?? ??? ?/*
?? ??? ?CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。
?? ??? ?要實現這一點，必須規定兩項內容：
?? ???????????? 規定您希望把效果添加到哪個 CSS 屬性上
?? ??? ?規定效果的時長
?? ??? ?transition
?? ??? ?* */
?? ??? ?.dh_gd{
?? ??? ??? ?width: 100px;
?? ??? ??? ?height: 100px;
?? ??? ??? ?border-top: 2px solid red;
?? ??? ??? ?border-right:2px solid #006DCC ;
?? ??? ??? ?border-bottom:2px solid #002A80 ;
?? ??? ??? ?border-left:2px solid #000000 ;
?? ??? ??? ?margin: 200px auto;
?? ??? ??? ?/*transition: width 2s, height 5s;*/ ?
?? ??? ??? ?transition: transform 30s;
?? ??? ?}
?? ??? ?.dh_gd:hover{
?? ??? ??? ?/*width: 200px;
?? ??? ??? ?height: 200px;*/
?? ??? ??? ?transform: scale(2,2);
?? ??? ?}
?? ??? ?/*自定義動畫
?? ??? ?@keyframes 規則用于創建動畫。在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。
?? ??? ?animation
?? ??? ?* */
?? ??? ?.dh_animation{
?? ??? ??? ?width: 50px;
?? ??? ??? ?height: 50px;
?? ??? ??? ?background: #00FFFF;
?? ??? ??? ?animation:mydh 5s infinite ;
?? ??? ?}
?? ??? ?@keyframes mydh{
?? ??? ??? ?0% {width: 50px;height: 50px;background: #00FFFF;}
?? ??? ??? ?25% {width: 10px;height: 10px; background: #0088CC;}
?? ??? ??? ?50% {width: 100px;height: 100px;background: red;}
?? ??? ??? ?75% {width: 80px;height: 80px;background: #1D7DB1;}
?? ??? ??? ?100%{width: 50px;height: 50px;background: #00FFFF;}
?? ??? ?}
?? ??? ?
?? ??? ?
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<div class="dh_2d"></div>
?? ??? ?<div class="dh_3d"></div>
?? ??? ?<!--過渡動畫-->
?? ??? ?<div class="dh_gd"></div>
?? ??? ?<!--自定義動畫-->
?? ??? ?<div class="dh_animation"></div>
?? ?</body>
</html>
?
轉載于:https://my.oschina.net/u/3803573/blog/2221873
總結
以上是生活随笔為你收集整理的css3的动画详解 html直接可以运行的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python字符串常用操作
- 下一篇： 8、clone使用和数组列表的copy