首页 > TAG信息列表 > translateX

用 CSS 做一个选框

我正在参加“掘金挑战守则”。详情请见： 掘金挑战赛来了！ 转灯是一种比较常见的展示方式，尤其是在营销页面上，中奖信息往往以转灯的形式展示。过去在 HTML 中经常使用 marquee 来实现，但根据 W3C 规范，不再推荐使用此功能。虽然有些浏览器仍然支持它，但它可能已从相关的 Web 标准中删除，可

平移：translate()

在CSS3中，我们可以使用transform属性的translate()方法来实现元素的平移效果。 语法： transform: translateX(x); /*沿X轴方向平移*/ transform: translateY(y); /*沿Y轴方向平移*/ transform: translate(x, y); /*沿X轴和Y轴同时平移*/ 说明： 从上面可以看出，平移有3种情况： translat

Vue $nextTick && 过度与动画

1 # $nextTick 2 # 1.语法： this.$nextTick(回调函数); 3 # 2.作用：在下一次DOM更新结束后执行其指定的回调。 4 # 3.什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作是，要在nextTick所指定的回调函数中执行。 5 # 6 # Vue 封装的过度与动画 7 #

uniapp 实现小程序列表项左滑菜单

最近使用uniapp做一些小程序的功能；需要在列表项中左滑实现菜单功能，之前没有什么经验，所以参考网上的各种文章最终才实现的功能；这里记录一下实现过程； 先看视图页面： <scroll-view v-if="myCustomerList.length!=0" :style="'height:'+ height" scroll-y lower-threshold="30"

css3动画的基本使用

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> @keyframes move{ /* 开始状态 */ 0%{ transform: translateX(0px); } /* 结束状态

42 vue3过渡和动画属性控制过渡时长

[动画] vue3过渡和动画并用小技巧 构建一个过渡和动画并用的代码过渡和动画时长不一致的处理属性控制动画和过渡时长 构建一个过渡和动画并用的代码 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi

transform,@keyframes

transform:tranlate(100px 10px)盒子向右100px 向下10px transform:rotate(45deg)使盒子在原位置旋转45度 transform:scale(2)使盒子放大二倍{外边距也会变} 对于transform在css中的应用: @keyframes slide { from{transform: translateX(0)} 20%{transform: translateX(0)}

纯CSS实现超长文字轮播（文字走马灯）效果

　　在做看板的时候经常会遇到容器宽度不够的情况，如果用超长省略会有点不好看，所以我就想做一个文字走马灯的效果，一来可以不用鼠标悬浮就看到全文；二来可以为看板增添一下动画效果，让看板看起来更炫酷。我开始找解决方法的时候看到了HTML有一个marquee标签，但是很遗憾现在这个标签已经

Vue框架实现tab栏的动画切换效果

Vue框架实现tab栏的动画切换效果 <template> <!-- vue实现tab栏切换 并且带有动画切换效果--> <div class="box"> <span class="tabchange" v-for="(item,index) in list" :key="index" @click="change(index)"> {{i

vue利用transition过渡动画实现轮播图

<template> <div id="app"> <ul> <li v-for="(item, index) in slideData" :key="index"> <transition> <img :src="item.img" v-if="index === currentIndex&

纯CSS3实现的阳光海鸥沙滩遮阳伞和比基尼美女风景动画效果源码

预览 代码如下 不是标准的当前h5的标准html文档，大家可以改改代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g

滚动字

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1

vue过渡&动画

动画 <template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition name="hello" appear> <h1 v-show="isShow">你好啊！</h1> </transition> </div> </te

e'charts 地图 + 背景旋转

    <template> <div class="container"> <div class="earth-container"> <div class="earth-item-box"> <div class="earth-item"></div> </div> <

前端移动端轮播图

css要点 外容器子绝父相,通过JS的offsetWidth设置wrapper的宽度 焦点图的ul(500%)、li(20%)、img(100%)设置百分制的宽度，并且ul初始的时候要margin-left: -100%; ul要手动清除浮动，因为li都float:left了，而ol里的li是通过display: inline-block;来使他一行显示的。 JS的要点 注意

translate

  2D转换之移动translate 1,语法 transform: translate(x, y); transform: translatex(100px); transform: translatex(50%); 因为盒子的宽度是100px; 所以这里的50%就是50px transform: translatey(n);    

【仿穷游项目】无缝连续滚动特效

思路： 机理：使用CSS3过渡，不是JS动画比如 0 1 2 3 4 5，六张幻灯片，克隆第一张，当运行最后一张时，对结合transform的translateX进行处理用定时器实现，去除首尾张幻灯片切换时的过渡效果；同时还有注意防抖；translateX的时候，为了适应不同屏幕大小的宽度，需要结合id，即第几张图片的索引；比如：“

h5+css3+js之移动端轮播图

概要 功能概要 自动播放轮播图用户手动滑动轮播图 涉及知识点 采用css3中transition实现动画移动过渡效果以及transform实现动画效果采用h5中classList切换类的方式实现底部小圆圈同步变化效果移动端touch触屏事件 效果预览 实现代码 html <!-- 轮播图--> <div class=

React封装公共组件：轮播图(1)

需求分析 移动端触摸滑动：图片可以跟随手指滑动而滑动 底部小圆点：与轮播图联动的显示效果 无缝循环滚动：第一张图可以往前滑动、最后一张图也可以往后滑动 可以自动播放（下一篇文章介绍） 页面样式和布局 <SliderWrapper ref={this.wrap} width={this.props.imgWidth} on

React封装公共组件：轮播图(2)

上一篇文章中，我们介绍了如何实现轮播图的无缝滚动 这一篇文章将会介绍如何实现自动播放，以及如何将自动播放和手指滑动这两个事件进行隔离 自动播放 假设自动播放的顺序为：图片无限向左滚动 那么当我们发现 this.current 指向第二组最后一张图片时，也应该让它瞬间移动到第一组的最后

css动画简单特效以及调用方法

简单特效 @keyframes show { 0% { transform: translateY(-50px); } 60% { transform: translateY(40upx); } 100% { transform: translateY(0px); } } @-webkit-keyframes

vue路由组件过渡

<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <title>Document</title&g

简单的个人介绍网页-开场特效2（HTML+CSS）【附代码】

动态效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HELLO!</tit

纯css实现文字循环滚动效果

<!doctype html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1

实现文字横向滑动

用html和css实现文字在滚动区域内横向循环滚动   实现效果如下：   代码如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial