css3 border旋轉(zhuǎn)時(shí)的動(dòng)畫應(yīng)用
發(fā)布時(shí)間:2016-01-22 14:19:49 作者:佚名
我要評(píng)論

這篇文章主要介紹了css3 border旋轉(zhuǎn)時(shí)的動(dòng)畫應(yīng)用的相關(guān)資料,需要的朋友可以參考下
廢話不多說(shuō)了,直接給大家貼代碼了,具體代碼如下所示:
效果圖
上面代碼中要注意的地方:
border-radius: 70px;為70px時(shí)div才能顯示為圓形,因?yàn)樯舷伦笥业腷order多出了20px
border-left-color: #fff;可以獨(dú)立設(shè)置一邊的顏色
animation: namemf 1s linear infinite;中l(wèi)inear為勻速運(yùn)動(dòng)
ease:動(dòng)畫以低速開始,然后加快,在結(jié)束前變慢?! ?
ease-in:動(dòng)畫以低速開始
ease-out:動(dòng)畫以低速結(jié)束
JavaScript Code復(fù)制內(nèi)容到剪貼板
- <html>
- <head>
- <title>css3動(dòng)畫border旋轉(zhuǎn)時(shí)的應(yīng)用。</title>
- <meta charset="UTF-8"/>
- <style type="text/css">
- body{
- background: #ccc;
- }
- .he{
- width: 100px;
- height: 100px;
- margin: 200px auto;
- border: 10px solid black;
- border-left-color: #fff;
- border-radius: 70px;
- animation: namemf 1s linear infinite;
- -webkit-animation:namemf 1s linear infinite;
- -ms-animation: namemf 1s linear infinite;
- }
- @keyframes namemf{
- from{
- transform:rotate(0deg) ;
- }
- to{
- transform: rotate(360deg);
- }
- }
- @-webkit-keyframes namemf{
- from{
- transform:rotate(0deg) ;
- }
- to{
- transform: rotate(360deg);
- }
- }
- @-ms-keyframes namemf{
- from{
- transform:rotate(0deg) ;
- }
- to{
- transform: rotate(360deg);
- }
- }
- </style>
- </head>
- <body>
- <div class="he">
- </div>
- </body>
- </html>
上面代碼中要注意的地方:
border-radius: 70px;為70px時(shí)div才能顯示為圓形,因?yàn)樯舷伦笥业腷order多出了20px
border-left-color: #fff;可以獨(dú)立設(shè)置一邊的顏色
animation: namemf 1s linear infinite;中l(wèi)inear為勻速運(yùn)動(dòng)
ease:動(dòng)畫以低速開始,然后加快,在結(jié)束前變慢?! ?
ease-in:動(dòng)畫以低速開始
ease-out:動(dòng)畫以低速結(jié)束
CSS中使用border來(lái)創(chuàng)建三角形的基本方法講解
這篇文章主要介紹了CSS中使用border來(lái)創(chuàng)建三角形的基本方法講解,文中同時(shí)還附帶了對(duì)HTML5 Canvas和SVG三角形的介紹,需要的朋友可以參考下
2016-03-31 CSS3 flex布局之快速實(shí)現(xiàn)BorderLayout布局
所謂的布局管理器分為好多種,最常見的有流式布局管理器(FlowLayout)、邊界布局管理器(BorderLayout)和表格布局管理器(GridLayout)。本文給大家介紹CSS3 flex布局之
2015-12-03
css3中新增了一個(gè)屬性 border-image ,這個(gè)屬性允許開發(fā)者使用圖片來(lái)定義邊框,擴(kuò)充了 CSS2 中僅有的幾個(gè)預(yù)定義邊框樣式(border-style)。本文給大家介紹css3 border-image邊
2015-11-24 實(shí)例講解CSS3中的border-radius屬性
這篇文章主要介紹了實(shí)例講解CSS3中的border-radius屬性,是CSS3入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下
2015-08-18
這篇文章主要介紹了詳解CSS3中border-image的使用,是CSS3入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下
2015-07-18
這篇文章主要介紹了CSS3使用border-radius屬性制作圓角,并附上示例代碼,推薦給有相同需求的小伙伴。
2014-12-22
下面小編就為大家?guī)?lái)一篇css border屬性的使用方法和技巧。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-23