css绘制一个禁止吸烟标识动画效果代码
代码语言:html
所属分类:布局界面
代码描述:css绘制一个禁止吸烟标识动画效果代码,还有香烟吐露动画。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background-color: #111; height: 100vh; display: flex; justify-content: center; align-items: center; } .no-circle { width: 200px; height: 200px; border-radius: 50%; background-color: transparent; border: 30px solid red; } .no-slash { width: 30px; height: 230px; background-color: red; transform: rotate(45deg); position: relative; top: -20px; left: 90px; z-index: 2; } .cigarette { width: 230px; height: 30px; background-color: #FFF; border-top: 1px solid black; border-bottom: 1px solid black; position: relative; top: -142px; left: -18px; z-index: 1; -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); } .cigarette:after { content: ''; width: 60px; height: 30px; background-color: #CC9900; position: absolute; } .cigarette:before { content: ''; width: 15px; height: 30px; background-color: #CC9900; border-radius: 50%; border-left: 1px solid black; position: absolute; top: 0px; left: -9px; } .cigarette-head { width: 13px; height: 30px; border-radius: 50%; border: 1px solid black; background-color: #FF0000; position: relative; top: -170px; left: 205px; z-index: 2; -webkit-animation: toke 2s infinite; -moz-animation: toke 2s infinite; } @keyframes toke { 0% { background-color: #FF0000; } 50% { background-color: #990000; opacity: .9;} 100% { background-color: #FF0000; } } .smoke-container div { width: 30px; height: 30px; background-color: #fff; border-radius: 50%; border: 5px solid #eee; } .smoke-container { position: relative; bottom: 225px; right: 360px; } .smoke1 { position: absolute; top: 0; left: 0; animation: fumes1 2s .2s linear infinite; opacity: 0; z-index: 2; } @keyframes fumes1 { 0% { left: 340px; top: 210px; opacity: 0; } 30% { left: 400px; top: 200px; opacity: .8; border: 10px solid white; } 100% { left: 450px; top: 190px; opacity: 0; } } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0