js+css实现鼠标滚动文字幻灯片旋转切换效果代码
代码语言:html
所属分类:幻灯片
代码描述:js+css实现鼠标滚动文字幻灯片旋转切换效果代码
代码标签: js css 鼠标 滚动 文字 幻灯片 旋转 切换
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --transition: 1s; } html { background: #222; color: white; font-family: system-ui; overflow: hidden; } #caro_con { width: 0; height: 0; position: fixed; left: 0; bottom: 0; transition: var(--transition) ease-in; transform: rotate(0deg); } .caro_slide { width: min(100vw,100vh); height: 100vh; /* aspect-ratio: 1 / 1; */ position: absolute; bottom: 0; left: 0; transform-origin: 0% 100%; display: grid; place-items: center; /* border-radius: 0 100% 0 0; */ /* border: 2px solid red; */ box-sizing: border-box; } .caro_slide:nth-child(1) { transform: rotate(0deg); } .caro_slide:nth-child(2) { transform: rotate(90deg); } .caro_sli.........完整代码请登录后点击上方下载按钮下载查看
网友评论0