本文目录
js,控制一个div向左右匀速移动循环
这个不需要js， 直接使用css就行，给你一个简单的demo，有不懂的可以问我：《!DOCTYPE html》《html lang="en"》《head》《meta charset="UTF-8"》《title》Title《/title》《style type="text/css"》body{height: 100%; position: relative;}.demo{position: absolute; width: 80%; height: 200px; background: #2aa198;animation: move 1s linear infinite alternate;}@keyframes move {from{left: 0}to{left: 10%}}《/style》《/head》《body》《div class="demo"》《/div》《/body》《/html》
vue 利用伪元素实现div实现背景图旋转 div内容不旋转
利用伪元素实现div实现背景图旋转 原样式设定 .circle_data{ width: 200px; height: 200px; color:#FFFFFF; text-align: center; vertical-align: middle; z-index: 999; position: relative; overflow: hidden; } 伪元素设置 .circle_data::before { content: ""; position: absolute; width: 180px; height: 180px; top: 3%; left: 3%; z-index: -1; background: url(../../../assets/gird/analysislayout/assess/images/circle.png) no-repeat; background-size: cover; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 10s; -moz-transition-property: -moz-transform; -moz-transition-duration: 10s; -webkit-animation: rotate 10s linear infinite; -moz-animation: rotate 10s linear infinite; -o-animation: rotate 10s linear infinite; animation: rotate 10s linear infinite; } 旋转 @keyframes rotate{ 0%{-webkit-transform:rotate(0deg);} 25%{-webkit-transform:rotate(90deg);} 50%{-webkit-transform:rotate(180deg);} 75%{-webkit-transform:rotate(270deg);} 100%{-webkit-transform:rotate(360deg);} }
