个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
关于选取框效果，我已经尝试过无数种解决方案，但我完全被难住了。我也尝试了一些 webkit 示例，但他的演示不起作用。我主要使用 Chrome，但我的网站必须同时在 Chrome 和 Firefox 中运行。
http://jsfiddle.net/Birdieasm/LYZ2J/
<body>
<div id="mainCon">
<p class="style">VAULT ORIENTATION DATES</p>
<div id="mar">
<marquee width="295px" height="140px" direction="UP" scrollamount="3" onmouseover="this.stop();" onmouseout="this.start();"><p>April 14th, 2014 @ 6:00pm - Washington Vault</p>
<a href="#">Washington State Convention Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>May 22nd, 2014 @ 6:00pm - California Vault</p>
<a href="#">Anaheim Convention Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>June 3rd, 2014 @ 6:00pm - New York Vault</p>
<a href="#">Empire Expo Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>July 19th, 2014 @ 6:00pm - District of Columbia</p>
<a href="#">Walter E. Washington Convention Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>August 21st, 2014 @ 6:00pm - Ohio Vault</p>
<a href="#">SeaGate Centre</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>September 30th, 2014 @ 6:00pm - Michigan Vault</p>
<a href="#">DeVos Place Convention Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>October 10th, 2014 @ 6:00pm - Nevada Vault</p>
<a href="#">MGM Grand Hotel and Casino</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>November 12th, 2014 @ 6:00pm - Alabama Vault</p>
<a href="#">Celebration Arena</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>December 26th, 2014 @ 6:00pm - Connecticut Vault</p>
<a href="#">XL Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>Janrury 3rd, 2015 @ 6:00pm - Florida Vault</p>
<a href="#">Tampa Convention Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>February 5th, 2015 @ 6:00pm - Illinois Vault</p>
<a href="#">Oakley-Lindsay Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>March 17th, 2015 @ 6:00pm - Indiana Vault</p>
<a href="#">Indiana Convention Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</marquee>
</div>
</div>
</body>
@charset "utf-8";
/* CSS Document */
#mainCon {
width:935px;
margin-left: auto;
margin-right: auto;
}
#mar {
margin-left: 5px;
border: thin solid #000;
width: 285px;
height: 140px;
background: url(../images/vaultdates.jpg);
}
marquee {
font-size: 8.5px;
font-family: Verdana, sans-serif;
}
marquee a {
color:#03C;
text-decoration:none;
}
marquee a:hover {
font-style:italic;
}
marquee p {
font-weight: bold;
}
我看到所有这些选取框从左到右或从右到左。我想让我的从下到上。我试过 webkit 动画，我对 JavaScript 和插件知之甚少，所以我真的不想走那条路。
我尝试过无数其他网站。
我唯一接近做的是动画属性，但我对此属性知之甚少。
底部动画是我想要的效果，但它的移动速度很慢，我希望它的速度与我已经创建的效果相同。我正在努力重现这种效果。 : http://jsfiddle.net/Birdieasm/Lam3C/
<body>
<div class="wrapper">
<h1>Marquee with CSS3 Animation</h1>
<h3>Move the text Downwards</h3>
<div class="marquee down">
<p><a href="http://www.hongkiat.com/blog/wordpress-related-posts-without-plugins/">How to add WordPress Related Posts Without Plugins</a></p>
<p><a href="http://www.hongkiat.com/blog/automate-dropbox-files-with-actions/">Automate Your Dropbox Files With Actions</a></p>
</div>
<h3>Move the text Upwards</h3>
<div class="marquee up">
<p><a href="http://www.hongkiat.com/blog/wordpress-related-posts-without-plugins/">How to add WordPress Related Posts Without Plugins</a></p>
<p><a href="http://www.hongkiat.com/blog/automate-dropbox-files-with-actions/">Automate Your Dropbox Files With Actions</a></p>
</div>
</div>
</body>
html {
background: url('../images/skewed_print.png');
}
h1, h2, h3 {
font-family: Tahoma, Arial, sans-serif;
color: #fff;
text-shadow: 1px 1px 0px #000000;
filter: dropshadow(color=#000000, offx=1, offy=1);
}
a {
color: #00b1dc;
text-decoration: none;
}
a:hover {
color: #0097bc;
}
.wrapper {
width: 500px;
margin: 25px auto;
}
.marquee {
width: 500px;
height: 50px;
margin: 25px auto;
overflow: hidden;
position: relative;
border: 1px solid #000;
background-color: #222;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);
box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);
-webkit-transition: background-color 350ms;
-moz-transition: background-color 350ms;
transition: background-color 350ms;
}
.marquee p {
position: absolute;
font-family: Tahoma, Arial, sans-serif;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
color: #fff;
text-shadow: 1px 1px 0px #000000;
filter: dropshadow(color=#000000, offx=1, offy=1);
transform:translateX(100%);
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
}
.marquee p:nth-child(1) {
animation: left-one 20s ease infinite;
-moz-animation: left-one 20s ease infinite;
-webkit-animation: left-one 20s ease infinite;
}
.marquee p:nth-child(2) {
animation: left-two 20s ease infinite;
-moz-animation: left-two 20s ease infinite;
-webkit-animation: left-two 20s ease infinite;
}
.marquee.down p {
transform:translateY(-100%);
-moz-transform:translateY(-100%);
-webkit-transform:translateY(-100%);
}
.marquee.down p:nth-child(1) {
animation: down-one 20s ease infinite;
-moz-animation: down-one 20s ease infinite;
-webkit-animation: down-one 20s ease infinite;
}
.marquee.down p:nth-child(2) {
animation: down-two 20s ease infinite;
-moz-animation: down-two 20s ease infinite;
-webkit-animation: down-two 20s ease infinite;
}
.marquee.up p {
transform:translateY(100%);
-moz-transform:translateY(100%);
-webkit-transform:translateY(100%);
}
.marquee.up p:nth-child(1) {
animation: up-one 20s ease infinite;
-moz-animation: up-one 20s ease infinite;
-webkit-animation: up-one 20s ease infinite;
}
.marquee.up p:nth-child(2) {
animation: up-two 20s ease infinite;
-moz-animation: up-two 20s ease infinite;
-webkit-animation: up-two 20s ease infinite;
}
/*================================
Move the Marquee to the Left
==================================*/
/** Mozilla Firefox Keyframes **/
@-moz-keyframes left-one {
0% {
-moz-transform:translateX(100%);
}
10% {
-moz-transform:translateX(0);
}
40% {
-moz-transform:translateX(0);
}
50% {
-moz-transform:translateX(-100%);
}
100%{
-moz-transform:translateX(-100%);
}
}
@-moz-keyframes left-two {
0% {
-moz-transform:translateX(100%);
}
50% {
-moz-transform:translateX(100%);
}
60% {
-moz-transform:translateX(0);
}
90% {
-moz-transform:translateX(0);
}
100%{
-moz-transform:translateX(-100%);
}
}
/** Webkit Keyframes **/
@-webkit-keyframes left-one {
0% {
-webkit-transform:translateX(100%);
}
10% {
-webkit-transform:translateX(0);
}
40% {
-webkit-transform:translateX(0);
}
50% {
-webkit-transform:translateX(-100%);
}
100%{
-webkit-transform:translateX(-100%);
}
}
@-webkit-keyframes left-two {
0% {
-webkit-transform:translateX(100%);
}
50% {
-webkit-transform:translateX(100%);
}
60% {
-webkit-transform:translateX(0);
}
90% {
-webkit-transform:translateX(0);
}
100%{
-webkit-transform:translateX(-100%);
}
}
/*================================
Move the Marquee Downwards
==================================*/
/** Mozilla Firefox Keyframes **/
@-moz-keyframes down-one {
0% {
-moz-transform:translateY(-100%);
}
10% {
-moz-transform:translateY(0);
}
40% {
-moz-transform:translateY(0);
}
50% {
-moz-transform:translateY(100%);
}
100%{
-moz-transform:translateY(100%);
}
}
@-moz-keyframes down-two {
0% {
-moz-transform:translateY(-100%);
}
50% {
-moz-transform:translateY(-100%);
}
60% {
-moz-transform:translateY(0);
}
90% {
-moz-transform:translateY(0);
}
100%{
-moz-transform:translateY(100%);
}
}
/** Webkit Keyframes **/
@-webkit-keyframes down-one {
0% {
-webkit-transform:translateY(-100%);
}
10% {
-webkit-transform:translateY(0);
}
40% {
-webkit-transform:translateY(0);
}
50% {
-webkit-transform:translateY(100%);
}
100%{
-webkit-transform:translateY(100%);
}
}
@-webkit-keyframes down-two {
0% {
-webkit-transform:translateY(-100%);
}
50% {
-webkit-transform:translateY(-100%);
}
60% {
-webkit-transform:translateY(0);
}
90% {
-webkit-transform:translateY(0);
}
100%{
-webkit-transform:translateY(100%);
}
}
/*================================
Move the Marquee Upwards
==================================*/
/** Mozilla Firefox Keyframes **/
@-moz-keyframes up-one {
0% {
-moz-transform:translateY(100%);
}
10% {
-moz-transform:translateY(0);
}
40% {
-moz-transform:translateY(0);
}
50% {
-moz-transform:translateY(-100%);
}
100%{
-moz-transform:translateY(-100%);
}
}
@-moz-keyframes up-two {
0% {
-moz-transform:translateY(100%);
}
50% {
-moz-transform:translateY(100%);
}
60% {
-moz-transform:translateY(0);
}
90% {
-moz-transform:translateY(0);
}
100%{
-moz-transform:translateY(-100%);
}
}
/** Webkit Keyframes **/
@-webkit-keyframes up-one {
0% {
-webkit-transform:translateY(100%);
}
10% {
-webkit-transform:translateY(0);
}
40% {
-webkit-transform:translateY(0);
}
50% {
-webkit-transform:translateY(-100%);
}
100%{
-webkit-transform:translateY(-100%);
}
}
@-webkit-keyframes up-two {
0% {
-webkit-transform:translateY(100%);
}
50% {
-webkit-transform:translateY(100%);
}
60% {
-webkit-transform:translateY(0);
}
90% {
-webkit-transform:translateY(0);
}
100%{
-webkit-transform:translateY(-100%);
}
}
我需要我的页面进行验证，因为目前还没有。 :(
最佳答案
试试这个对我来说很完美，但如果想要它上升，那么只需交换 100% 和 0%，然后将设置更改为你想要的设置，如果需要有关设置的帮助，谷歌设置和 w3schools 将解释如何使用该设置
为此，您不需要任何选取框，只需一个 div 类或 id，其中包含您希望在其中选取选取框的内容 n 如果您向我确切解释您想要移动的内容以及如果更容易的话我会为您尝试的地方，请更改相关内容
#marquee_div_name {
display:block;
width: 500px;
position:absolute;
text-align: center;
animation-name: marquee;
-webkit-animation-name: marquee;
animation-duration: 60s;
-webkit-animation-duration: 60s;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-iteration-count:infinite;
animation-direction:normal;
-webkit-animation-direction:normal;
}
@keyframes marquee {
from { top: 0%; }
to { top: 100%; }
}
}
@-webkit-keyframes marquee {
from {top: 0%;}
to {top: 100%;}
}关于html - CSS3 选框效果 - 难倒，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22494325/
26
4
0
我正在尝试用 Swift 编写这段 JavaScript 代码:k_combinations 到目前为止，我在 Swift 中有这个: import Foundation import Cocoa e
我是一名优秀的程序员,十分优秀！