天道酬勤,学无止境

css-animations

CSS animated Stripes issue

问题 我在下面有 2 个代码片段。 首先,我有漂亮的条纹,它们根据窗口大小调整自己的大小并且总是居中(我尝试了一些动画,但我没有像片段 2 中的动画那样得到它) 但我需要一个动画,这个动画显示在第二个片段中,条纹应该从下面开始向上,我想把它保留在最终结果中。 所以我需要融合第一个和第二个片段。 第一的: html, body { width: 100%; height: 100%; margin: 0; padding: 0; #position: fixed; } .mask { height: 100%; overflow: hidden; position: relative; } .container { height: 100%; margin: 0 -100vh; #position: absolute; } .stripe { float: left; height: 100%; width: 2%; margin: 0 1%; bottom: 0%; max-height: 0%; #position: absolute; background-color: black; transform: skew(-20deg); #transform-origin: bottom bottom; #transform-origin: left bottom

2022-05-16 16:48:09    分类:技术分享    html   css   animation   css-animations

CSS animation starts after certain amount of time

问题 我一直在尝试解决这个问题,但到目前为止没有成功:我想使用 CSS 运行打字动画。 动画必须在 7 秒后开始。 我不知道该怎么做。 我的代码如下所示: HTML <div class='background-fullwidth'> <div class="css-typing"> This text will pop up using an typewriting effect </div> </div> CSS .css-typing { width: 360px; white-space: nowrap; overflow: hidden; -webkit-animation: type 3s steps(50, end); animation: type 3s steps(55, end); -o-animation: type 5s steps(50, end); -moz-animation: type 3s steps(55, end); padding: 10px; } .background-fullwidth { width: 400px; background-color: rgba(0, 50, 92, 0.7); } @keyframes type { from { width: 0; } to { width: 360px; } } @-moz

2022-05-16 02:38:03    分类:技术分享    html   css   animation   css-animations

CSS animate scrolling text using text-indent

问题 我创建了一个“重要通知”栏,我希望文本在屏幕上滚动。 它是通过对text-indent进行动画处理来实现的,该缩进似乎工作得很好,直到我的文本长于屏幕宽度。 这是HTML: <div class="sitemessage"> dfgh hgsl;k sfghjh fgdlj dflgh sg jls sdfhsdkjldfjksg sdfg ksjdfhg klsjdfhg lksjdfhg klsjdhg lksjdhfg sldkfjgh sdflgkjsdfglk jsdfg klsdfgl jksdfgl jksdfg ljsdfgkjl dafglkj adfgkl sdfgkjh sdfgkhl sdfg kjlsdfgk lsdfgk jl sdfgkl adfgkl adfgklj sdfgklhj sdfgkl jdfg kljafdg ljkdfg klsdfgkhjl sdfgk jlsdfgkhj dfgkhl adfgkj adfkljg a </div> 这是我的 CSS: .sitemessage { width:100%; max-width: 960px; margin:auto; white-space: nowrap; overflow: hidden; text-indent: 965px; animation: floatText

2022-05-15 14:11:03    分类:技术分享    html   css   css-animations   text-indent

Animating SVG paths with discontinuous parts

问题 在左边的例子中,路径是连续的(即没有m个命令),因此路径的段是一个接一个地绘制的。 在右侧示例中,路径是不连续的(即包含m个命令),这会导致一次绘制所有段。 如何使正确示例中的段一个接一个地绘制? 也就是说,第二个笔划仅在最上面的笔划完成时才开始,而不是同时开始。 <svg width="220px" height="100px" viewBox="-10 -10 240 120"> <style> path{stroke-dasharray:500;stroke-dashoffset:500;fill:none;stroke:#000;stroke-width:6px;animation:draw 5s linear infinite;} @keyframes draw{to{stroke-dashoffset:0;}} </style> <path d="m0,0 h60 v60 h-60 z" /> <path d="m120,0 h60 m-60,20 h60 m-60,20 h60 m-60,20 h60 m-60,20" /> </svg> 回答1 这是一种使用多个路径元素并使用动画延迟使线条一个接一个地绘制的方法: path{ stroke-dasharray:10; stroke-dashoffset:10; fill:none; stroke:#000; }

2022-05-15 07:49:04    分类:技术分享    css   svg   css-animations   keyframe

Make HTML element disappear with CSS animation

问题 我想知道是否有办法通过 CSS 动画使 HTML 元素消失。 因此,当元素被某些脚本从页面中删除时,动画将在元素实际被删除之前显示。 这可能以一种简单的方式吗? 或者我是否需要为我的脚本设置一个计时器,以 X 的持续时间启动动画并在 X 时间之后删除元素? 回答1 @keyframes myAnimation{ 0%{ opacity: 1; transform: rotateX(90deg); } 50%{ opacity: 0.5; transform: rotateX(0deg); } 100%{ display: none; opacity: 0; transform: rotateX(90deg); } } #myelement{ animation-name: myAnimation; animation-duration: 2000ms; animation-fill-mode: forwards; } 回答2 回答3 我使用 jQuery 来实现这一点。 //jQuery $(document).ready(function() { var target = $("#div"); $("#btn").click(function() { removeElement(target); }); }); function removeElement(target)

2022-05-15 02:50:04    分类:技术分享    javascript   html   css   animation   css-animations

CSS animation on mouse leave

问题 所以我正在尝试做一些类似瓷砖或 netflix 所做的事情。 我有一个盒子,我试图让它在鼠标悬停时增长,并在鼠标离开时缩小尺寸。 到目前为止,我有这个。 .nav { position: relative; top: 25%; width: 100%; color: black; text-align: center; } .nav a { color: white; text-decoration: none; } .link { font-size: 24px; width: 100%; height: 25%; background: linear-gradient(135deg, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); display: inline; padding-right: 12.5%; padding-left: 12.5%; padding-bottom: 6.25%; padding-top: 6.25%; box-shadow: 0px 0px 10px 5px grey; animation-name: downsize; animation-duration: .5s; animation-iteration-count: 1; animation-direction: alternate

2022-05-13 22:00:04    分类:技术分享    html   css   css-animations

How do I activate a CSS animation on an element by hovering over a different element?

问题 我已经找到了一些不同的解决方案,但它们都依赖于另一个元素中的一个元素,而我的问题中没有这个。 我制作了一个类似于我的问题的小 JSFiddle。 当有人悬停“悬停我!” 我要“动我!” 走向“悬停我!” 并且也变得可见。 只要“悬停我!”,我就设法让它发挥作用。 也随着“移动我!”而向右移动。 但我不希望这种情况发生,我想要“悬停我!” 留在同一个地方。 回顾一下,悬停在“悬停我!” 我要“动我!” 变得可见并向右移动到“悬停我!” 在同一条线上不动“悬停我!” 一点也不。 帮助将不胜感激! div.txtarea { background-color: gray; width: 100%; height: 5em; position: fixed; text-align: center; } a.hoverme { text-decoration: none; color: blue; font-size: 3em; display: inline-block; } a.moveme { float: left; text-decoration: none; color: blue; font-size: 3em; display: inline-block; opacity: 1; /*THIS IS USUALLY 0 BUT I MADE IT 1 SO WE

2022-05-12 17:59:06    分类:技术分享    html   css   css-selectors   css-animations

Rotate child element around the parent element with transition

问题 我有一个 CSS 动画,我试图让子元素围绕父元素旋转一定的度数。 但我不能让它围绕父原点旋转,也不能让它从正确的半径旋转,它似乎围绕一个不可见的小圆圈旋转。 下面是损坏的动画。 我该如何解决? .center-circle { top:100px; left:100px; width: 180px; height: 180px; border:1px solid black; border-radius: 100%; position: relative; } .quarter-circle { width:65px; height:65px; position: absolute; top: 0%; left: 50%; border:1px solid #F28B46; border-radius: 100%; animation: spin-back 2s ease-in-out; -webkit-transform-origin: 0% 50%; } @-webkit-keyframes spin-back { 0% { transform:rotate(-120deg); } 100% { transform:rotate(0deg); } } <div class="center-circle"> <div class="quarter-circle"></div

2022-05-12 13:12:11    分类:技术分享    css   css-transitions   css-animations

Fullscreen CSS3 "Cube" Transition

问题 我正在使用此处提供的代码:S/O 2-face Animated Cube 我想让这个效果填满网页的整个屏幕,以提供从一个 div/iframe 到下一个的全屏过渡。 我尝试使用百分比: <style> #experiment { -webkit-perspective: 1000; } html,body{ margin: 0; height: 100%; width: 100%; overflow: hidden; } .cube { position: relative; height: 100%; //<---- width: 100%; //<---- -webkit-transition: -webkit-transform .5s linear; -webkit-transform-style: preserve-3d; } .face { position: absolute; height: 100%; //<---- width: 100%; //<---- color: #fff; } .cube .front { -webkit-transform: translateZ(50%); //50% should make sense, but doesn't work so I went to Javascript instead background

2022-05-11 05:47:29    分类:技术分享    css   css-transitions   css-animations   css-transforms

Angular animate parent div of ng-view using element insde ng-view

问题 是否可以使用 ng-view 内部 $state 上的指令对 ng-view 外部的 div(背景颜色)进行 css 动画处理? ng-view 有用于路由的 css 动画。 如果我不为 div 设置动画,则 ng-view 动画可以正常工作,但是.. 如果我将动画类添加到 div(bgId) 则路由动画不会触发。 这是一个 html 示例:(作为示例添加的按钮 - 通常在模板页面中,例如 home.html / login.html ) <body ng-app="app" ng-controller="MainCtrl"> <div id="bgId" class="{{colorVal}}"> <ion-nav-view animation="slide-left-right"> </ion-nav-view> </div> <button swapcolour="changeColour()" data-nxtpage="1">change colour</button> </body> 这由从按钮 attr 获取 nxtpage 值并更新 MainCtrl 中的 colorVal 的指令(交换颜色)控制。 //MainCtrl.js .controller('MainCtrl', ['$scope', '$state', function($scope,

2022-05-10 16:30:24    分类:技术分享    javascript   angularjs   angularjs-directive   angular-ui-router   css-animations