:after,:before,css的animation
2018-03-12 15:12
627 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { margin: 0;padding: 0; } .div1 { width:100px; height:100px; background:red; position:relative; animation:mymove .5s linear 2s infinite alternate; -webkit-animation:mymove .5s linear 2s infinite alternate; /*Safari and Chrome*/ } @keyframes mymove { from {top:-20px;} to {top:20px;} } @-webkit-keyframes mymove /*Safari and Chrome*/ { from {top:-20px;} to {top:20px;} } p { transition: all 2s ease; position: relative; } p:hover{ transform: translate(30px,30px); } p:before{content: "开始..";} p:after{content: "..结束"; /* position: absolute; bottom: 0; right: 0; padding-left: 40px; */} .div2{ display: block; min-width:1200px; min-height: 200px; background: #ccc; } a:after{ content: " (" attr(href) ")" } </style> </head> <body> <p><strong>注释:</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p> <div class="div1"></div> <div class="div2">Internet Explorer 9 以及更早的版本不支持 animation 属性Internet Explorer 9 以及更早的版本不支持 animation 属性Internet Explorer 9 以及更早的版本不支持 animation 属性Internet Explorer 9 以及更早的版本不支持 animation 属性Internet Explorer 9 以及更早的版本不支持 animation 属性Internet Explorer 9 以及更早的版本不支持 animation 属性</div> <a href="javascript:void(0);">a:after{content: " (" attr(href) ")"}</a> </body> </html>
相关文章推荐
- [转]你所不知的 CSS ::before 和 ::after 伪元素用法
- css :after或:before写小三角形
- css before after基本用法【转】
- 你所不知的 CSS ::before 和 ::after 伪元素用法
- 深入理解 CSS 的 :before 和 :after 选择器(制作select下拉列表美化插件)
- CSS ::before和::after用来做复选框
- 你所不知的 CSS ::before 和 ::after 伪元素用法
- CSS伪类:before 和 :after
- 前端(各种demo)一:css实现三角形,css实现梯形,pop弹层,css伪类before,after使用,svg使用(持续更新中)
- CSS:before和after中的content属性
- css中伪类 :before和:after
- css- :before :after
- css 中的伪类选择器before 与after
- CSS伪类对象before和after的实例
- css的伪元素::after和::before的使用
- CSS :before和:after (转)
- 你所不知道的伪元素 CSS 中::before 和 ::after 的用法
- 利用CSS中的:after、: before制作的边三角提示框
- 【CSS 技能提升】 :before和:after的使用
- CSS伪类(pseudo class)简明介绍之:before和:after